西西弗神话

Performance optimization is the Rodney Dangerfield of web development–it “don’t get no respect”. In spite of its great importance in the overall user experience, it is all too often pushed aside and treated as an afterthought. In my conversations with designers and developers who don’t optimize, a few of the same myths are constantly brought up.

性能优化是Web开发的Rodney Dangerfield，它“没有得到尊重”。 尽管它在整体用户体验中非常重要，但它常常被搁置一旁，被视为事后的想法。 在我与未进行优化的设计师和开发人员的对话中，不断提出一些相同的神话。

• Performance optimization isn’t that necessary. This misconception doesn’t stem from a lack of caring–most of the people I talk to truly care about crafting a good user experience for their visitors. I think this myth stems more from a lack of awareness. Most of us work on connections that are typically quite a bit faster than that of the average internet user. As a result, we experience the web differently than our users. In addition, most of the people I talk to just haven’t heard about the studies that have come out regarding the effect of performance on the user experience.

  性能优化不是必需的。 这种误解并非源于缺乏关心，我交谈的大多数人都真正关心为访问者打造良好的用户体验。 我认为这个神话更多是由于缺乏认识。 我们大多数人的连接速度通常比普通互联网用户快很多。 因此，我们对网络的体验与我们的用户不同。 此外，与我交谈的大多数人都没有听说过有关性能对用户体验的影响的研究。

• Performance optimization is too difficult and takes too much time. The statement is often followed by “…and my clients won’t pay for all that extra time.” The prevailing belief is that you have to invest numerous hours and considerable energy to improve the performance of your site.

  性能优化太困难，并且花费太多时间。 声明后通常会出现“……我的客户不会花那么多额外的时间。” 普遍认为，您必须投入大量时间和大量精力来改善站点的性能。

• High performance and beautiful design are mutually exclusive. In the early days of the web when we were browsing the internet via a dialup connection, improving performance meant removing the images from your site. On today’s web people don’t want to have to settle for a less graphically compelling site, so removing most of the images on a site isn’t a very compelling option. The fact that most sites that talk about performance optimization aren’t exactly well known for beautiful designs doesn’t help to dispel the myth.

  高性能和精美的设计是相互排斥的。 在网络的早期，当我们通过拨号连接浏览Internet时，提高性能意味着从您的站点中删除图像。 在当今的网络上，人们不想满足于图形吸引力不强的网站，因此删除网站上的大多数图像并不是一个很有吸引力的选择。 大多数谈论性能优化的网站并不是以精美的设计而闻名，这一事实无助于消除神话。

Thankfully, there’s been a flurry of recent studies and new tools that help to both demonstrate the value of a high-performing site and simplify the process of getting there.

值得庆幸的是，最近有大量研究和新工具帮助证明了高性能站点的价值并简化了到达该站点的过程。

绩效很重要 (Performance matters)

Information on the how of performance has been available for awhile, but not until the last couple years have we really seen answers to the question of why.

关于性能如何的信息已有一段时间了，但是直到最近几年才真正看到了为什么的答案。

In 2009 at Velocity–the annual performance optimization conference–there was a flurry of information released by companies that clearly demonstrated how performance effects key business objectives. Google and Bing teamed up to present results from their respective experiments with page load time. Bing showed that by slowing their load time down by 2 seconds, they saw a 4.3% drop in revenue per user, as well as a 1.8% decrease in the number of search queries per user.

在2009年的Velocity(年度绩效优化会议)上，公司发布了大量信息，清楚地表明了绩效如何影响关键业务目标。 Google和Bing联手展示了各自实验的结果以及页面加载时间 。 Bing表示，通过将加载时间降低2秒，他们发现每位用户的收入下降了4.3％，每位用户的搜索查询数量下降了1.8％。

Google’s results were perhaps even more startling. They found that by introducing just a 400ms delay in their pages, the number of searches per user decreased by .59%. Even more concerning was the fact that even after the delay was removed, the slower initial user experience continued to affect how their users interacted with the site. With the delay gone, those same users still had .21% less searches.

Google的结果可能更令人吃惊。 他们发现，通过在页面中仅引入400ms的延迟，每个用户的搜索次数减少了0.59％。 更令人担忧的是，即使在消除延迟之后，较慢的初始用户体验仍继续影响其用户与站点的交互方式。 随着延迟的消失，这些相同的用户仍然减少了0.21％的搜索。

Performance isn’t just tied to the business objectives of search engines. Shopzilla presented information detailing how they were able to speed up their site from 4-6 seconds to 1.5 seconds per page. The results were impressive. They saw their conversion rate increase by 7-12% and their page views increased by 25%.

性能不仅仅与搜索引擎的业务目标相关。 Shopzilla 展示了详细信息，详细说明了他们如何将网站速度从每页4-6秒提高到1.5秒。 结果令人印象深刻。 他们看到转换率提高了7-12％，页面浏览量增加了25％。

In April of this year, Mozilla performed just a couple of simple performance techniques and shaved 2.2 seconds off their average page load time. This boost in performance increased their download conversions by 15.4%. Based on their daily traffic, they estimated that this increase translated to an astonishing 10.28 million additional downloads per year.

在今年4月，Mozilla仅执行了一些简单的性能技术，并将其平均页面加载时间缩短了2.2秒 。 性能的提高使他们的下载转换增加了15.4％。 根据他们的每日流量，他们估计，这种增加导致每年惊人的1028万下载量。

Buoyed by these studies, Google recently announced that they will be taking page load time into consideration when ranking sites. While it’s not yet one of the primary considerations, a high performing site of otherwise equal or similar ranking as a lower performing site will benefit from a bump in their ranking.

受这些研究的鼓舞，Google最近宣布，在对网站进行排名时，将考虑页面加载时间 。 虽然这还不是主要考虑因素之一，但排名较高的网站如果与排名较低的网站相同或相似，将会受益于排名的提高。

With performance contributing to revenue, frequency and depth of interaction, conversion rates and search engine optimization, it becomes crystal clear that performance optimization is not only important but that it should be a primary consideration.

由于性能会影响收入，互动的频率和深度，转化率以及搜索引擎的优化，因此，显而易见的是，性能优化不仅很重要，而且应该成为首要考虑因素。

你也可以吃蛋糕 (You can have your cake and eat it too)

Of course, performance is not all that matters. (If it was, we’d all have sites that look like Jakob Nielsen’s.) Eye candy, time and energy are all critical too. That’s why it’s important to note that there are many techniques you can use to improve the performance of your site without affecting the design at all. In most cases, you can do so using tools that greatly simplify the process and reduce the time investment required.

当然，性能并不重要。 (如果是的话，我们所有人都会拥有与Jakob Nielsen相似的网站。) 糖果 ，时间和精力也至关重要。 这就是为什么要注意，可以使用许多技术来改善网站性能而根本不影响设计的重要原因。 在大多数情况下，您可以使用可大大简化流程并减少所需时间投入的工具来这样做。

Improving page load time primarily boils down to two concerns:

缩短页面加载时间主要归结为两个方面：

1. reducing page weight;

   减轻页面重量；

2. and reducing HTTP requests.

   并减少HTTP请求。

减少页面重量 (Reducing page weight)

Reducing page weight is really a lot simpler than you might think. For images, take the time to optimize them by hand using your favorite graphics program. You’ll be amazed by how much smaller you can make them without any noticeable degradation in quality.

减少页面重量确实比您想象的要简单得多。 对于图像，请花一些时间使用您喜欢的图形程序手动优化它们。 您会惊奇地发现它们可以缩小多少而质量没有明显下降。

If your images have already been produced, you can use a couple of different tools to reduce the size simply and quickly. One such tool is Smushit.com. Smush.It lets you upload graphics which it will then return to you optimized, without any loss in quality. If an app is more your style, ImageOptim is a very powerful app for Macs that wraps up the power of several different image optimization tools in an easy drag-and-drop interface.

如果已经生成了图像，则可以使用几个不同的工具来简单快速地缩小尺寸。 Smushit.com就是这样一种工具。 Smush.It使您可以上传图形，然后将其恢复为优化状态，而不会降低质量。 如果应用程序更适合您的风格，则ImageOptim是Mac上非常强大的应用程序，它通过简单的拖放界面将几种不同的图像优化工具的功能融合在一起 。

For CSS and Javascript, run your code through a minimization tool like YUI Compressor or JSMin, both of which can be found online. These tools will remove unnecessary whitespace and comments from your files, decreasing the file size. YUI Compressor will take it a step further and substitute shorter variable and function names for the longer ones in your core file, resulting in even more savings. Again, if an app is more your style, Stoyan Stefanov’s OMG will automatically minimize and save your CSS and Javascript files.

对于CSS和Javascript，请通过最小化工具(例如YUI Compressor或JSMin)运行代码，这两种工具都可以在线找到。 这些工具将从文件中删除不必要的空格和注释，从而减小文件大小。 YUI Compressor将更进一步，将较短的变量和函数名替换为核心文件中的较长变量和函数名，从而节省更多费用。 同样，如果您的风格更像一个应用，Stoyan Stefanov的OMG将自动最小化并保存您CSS和Javascript文件。

减少HTTP请求 (Reducing HTTP requests)

To reduce the number of HTTP requests, you can again use a tool like the online wrapper for YUI Compressor. The online tool gives you the option to upload several files, which it will then combine into one.

为了减少HTTP请求的数量，您可以再次使用诸如YUI Compressor的在线包装之类的工具。 在线工具可让您选择上传多个文件，然后将其合并为一个文件。

In addition to being a good idea in general, making use of progressive enhancement with CSS3 will help with the performance of your site. Using CSS3 for things like gradients, drop shadows and rounded corners can allow you to significantly reduce the number of images included on a page. Doing so will not only reduce the number of HTTP requests, but also reduce your page weight.

除了是一个好主意外，在CSS3中使用渐进增强功能将有助于提高网站的性能。 将CSS3用于渐变，阴影和圆角等内容可以使您显着减少页面上包含的图像数量。 这样做不仅可以减少HTTP请求的数量，而且可以减轻页面的重量。

Use CSS sprites where applicable. They can be a little tedious to create and maintain, so consider using a tool like the SpriteMe bookmarklet. SpriteMe will search through your CSS to find references to images and recommend which of them you can combine into one sprite. It will not only create the sprite for you, but it will also generate the new CSS for you to place into your stylesheet.

在适用的地方使用CSS精灵。 创建和维护它们可能有些繁琐，因此请考虑使用SpriteMe书签小工具之类的工具。 SpriteMe将在CSS中进行搜索，以找到对图像的引用，并建议您可以将其中哪些图像合并为一个sprite。 它不仅会为您创建精灵，还将生成供您放入样式表的新CSS。

If sprites aren’t your cup of tea, then use Data URI’s. Like sprites, they can be tricky to efficiently maintain, but again, someone has done some of the heavy lifting for us. CSSEmbed, created by Nicholas Zakas, is a great command line tool for parsing CSS and generating Data URIs where appropriate.

如果精灵不是您的最佳选择，请使用Data URI。 像sprite一样，它们可能很难有效地进行维护，但是同样，有人为我们做了一些繁重的工作。 由Nicholas Zakas创建的CSSEmbed是一个很好的命令行工具，用于解析CSS并在适当的地方生成数据URI。

服务器端优化 (Server side optimizations)

You can reap great benefits from some basic optimizations in your .htaccess file as well. Enabling gzip compression for not only html, but also stylesheets and scripts, can greatly reduce the size of your files, typically by about 70%. In fact, you can–and should–gzip any textual content that is requested on the server. It’s not necessary to enable gzipping for files like images or PDFs, as you will not notice any improvement in size. In fact, you may see the size of those files actually increase if you try to gzip them.

您也可以从.htaccess文件中的一些基本优化中获得巨大收益。 不仅为html启用gzip压缩，还为样式表和脚本启用gzip压缩，可以大大减少文件的大小，通常减少约70％ 。 实际上，您可以(并且应该)gzip服务器上请求的任何文本内容。 无需为图像或PDF之类的文件启用gzip压缩，因为您不会注意到大小有所改善。 实际上，如果您尝试对它们进行gzip压缩，则可能会看到这些文件的大小实际上有所增加 。

You should also set a far future Expires header. The Expires header is used by the server to tell the browser how long a component can be cached for. While this technique doesn’t do anything for first time visitors, applying a far future Expires header to your images, stylesheets and scripts will greatly reduce the number of HTTP requests for return visits.

您还应该设置一个将来的Expires标头。 服务器使用Expires标头告诉浏览器可以将组件缓存多长时间。 尽管此技术对首次访问者没有任何帮助，但将遥远的Expires标头应用于您的图像，样式表和脚本将极大地减少HTTP请求返回的次数。

Depending on your role and familiarity with server side technologies, you might feel a bit uncomfortable making significant changes to your .htaccess file. Thankfully someone has already done the heavy lifting for us. There’s actually an .htaccess file already configured with all of these settings that you can just download and drop into place on your server.

根据您的角色和对服务器端技术的熟悉程度，对.htaccess文件进行重大更改可能会使您感到不舒服。 值得庆幸的是，有人已经为我们完成了繁重的工作。 实际上， 已经配置了所有这些设置的.htaccess文件 ，您可以将其下载并放置在服务器上。

结论 (Conclusion)

Performance matters. More and more studies are confirming that it’s tied to the success of major business objectives. With Google now taking page performance into consideration in their rankings, it can no longer be ignored. Users want sites that are fast. We can give them those, without having to reduce the quality and effectiveness of our designs.

性能很重要。 越来越多的研究证实，这与主要业务目标的成功息息相关。 现在，由于Google在其排名中考虑了网页效果，因此不能再忽略它了。 用户想要快速的网站。 我们可以为他们提供这些产品，而不必降低设计的质量和有效性。

If you perform these basic optimization techniques, you’ll considerably improve the performance of your site and you’ll do so without having to sacrifice your design at all. In fact, you can implement all 35 of the best practices for performance as recommended by Yahoo! without any noticeable difference in your design.

如果执行这些基本的优化技术，则可以极大地提高站点的性能，而不必牺牲任何设计。 实际上，您可以按照Yahoo!的建议实施性能方面的全部35种最佳实践。 在设计上没有任何明显的不同。

If you also make use of the plethora of freely available tools to simplify each step, you’ll find you don’t have to spend a lot of time to notice a significant improvement in your page load time. Of course, if you’re using a build tool the best solution would be to grab the command line versions of these tools and automate them, but that’s a discussion for another article.

如果您还利用大量免费的工具来简化每个步骤，那么您将发现不必花费大量时间来注意到页面加载时间的显着改善。 当然，如果您使用的是构建工具，最好的解决方案是获取这些工具的命令行版本并使其自动化，但这是另一篇文章的讨论。

It’s time we stop making excuses and start giving performance the respect it deserves and our users the faster experience they want. *[OMG]: One-click Minifier Gadget

现在该是我们停止找借口，开始为性能提供应有的尊重，并为我们的用户提供所需的更快体验的时候了。 * [ OMG ]：一键式Minifier小工具

翻译自: https://timkadlec.com/2010/10/performance-mythbusters/

西西弗神话