This article was written by Bob Feldbauer (@bobfeldbauer)
Optimizing website performance can dramatically increase conversions and loyalty, and decrease costs. Although it may be traditionally viewed as a responsibility of developers, the reality is that sysadmins are also often asked to work on website performance optimization.
The following is intended as a busy sysadmin's "crash course" in optimizing website performance.
As with trying to optimize any process, you should establish a baseline to measure any changes against. Install the Firebug Firefox plugin and Yahoo!'s YSlow add-on to measure your initial performance and verify improvements as you make changes. To see performance changes over time from a consistent external source, you can use free tools like Pingdom's Full Page Test or Octagate's SiteTimer. Also, Google's Webmaster Tools shows optimization suggestions based on the Page Speed tool, and crawl stats for the average time spent downloading a page from your site.
Yahoo!'s research shown in the table below shows 62-95% of the time required to load a page is spent making HTTP requests for non-HTML components like images, scripts, and stylesheets. See the following table for the time spent loading HTML vs non-HTML components for popular websites:
| Site | Time Retrieving HTML | Time Elsewhere |
|---|---|---|
| Yahoo! | 10% | 90% |
| 25% | 75% | |
| MySpace | 9% | 91% |
| MSN | 5% | 95% |
| eBay | 5% | 95% |
| Amazon | 38% | 62% |
| YouTube | 9% | 91% |
| CNN | 15% | 85% |
As the table indicates, reducing the number of HTTP requests can provide one of the biggest increases in performance. Aggregating CSS and JavaScript into as few files as possible and using CSS Sprites are two ways to reduce the number of HTTP requests.
In addition to reducing the number of HTTP requests, being able to load scripts in parallel instead of serially can improve performance. A newly developed tool calledHead JS can be used to load JavaScript scripts in parallel, while retaining execution order. This allows scripts to load without blocking other components from loading.
Most sites include static files that change infrequently (CSS, images, JavaScript, etc) and can benefit from appropriate HTTP caching. See the Google's Page Speed team'sguide to HTTP caching for more information.
Another important step in website performance optimization is configuring your web or application server to deliver gzip compressed content. On typical sites, gzipping content reduces text size by 75% and total size by 37%.
In addition to gzip compression, making images, scripts, and CSS files smaller also helps - especially when loading a site on lower bandwidth connections like mobile devices. Even if you gzip scripts or CSS files, you can "minify" them to further reduce their size by 5% or more. Yahoo!'s YUI Compressor can minify both CSS and JavaScript, while Yahoo's Smush.it can optimize image sizes without losing quality.
Although there are many other things you can do to optimize website performance, this "crash course" in optimization should get you started.
Further reading:
- Web Performance Best Practices by Google's Page Speed team
本文由Bob Feldbauer撰写,旨在为忙碌的系统管理员提供网站性能优化的快速入门指南。通过安装Firebug Firefox插件和Yahoo! YSlow添加功能测量初始性能,并验证随更改而来的改进。使用Pingdom的全页测试或Octagate的站点计时器从一致的外部来源获取长期性能变化。Google的Webmaster Tools基于PageSpeed工具提供优化建议,同时显示页面下载平均时间。研究表明,减少HTTP请求次数是提高性能的最大潜在因素之一。优化CSS和JavaScript聚合、使用CSS Sprites减少HTTP请求,并允许并行加载脚本以改善性能。此外,通过适当的HTTP缓存和Gzip压缩静态文件,可以显著提高加载速度。最后,配置Web或应用程序服务器以提供压缩内容,典型情况下可将文本大小减少75%,总大小减少37%。
238

被折叠的 条评论
为什么被折叠?



