用YSlow优化网站性能

知识点：

• 怎么样加快网页的加载速度？
• 什么是YAHOO优化十三条规则？
• 什么是firebug? 什么是YSlow?
• 我想优化我的网站加载速度，应该从哪里开始？

最终效果：

• 网页加载速度有了明显的提升。
• YSlow的分数明显增长。
• 用户浏览时，停顿感明显减少。

结果数据：
分项结果：

[/url]

统计数据：


Performance Grade: A (99)    Expand All Collapse All
A    1. Make fewer HTTP requests
A    2. Use a CDN
Using these CDN hostnames from your preferences: cdn.eaxi.com
A    3. Add an Expires header
A    4. Gzip components
A    5. Put CSS at the top
A    6. Put JS at the bottom
A    7. Avoid CSS expressions
n/a    8. Make JS and CSS external
Only consider this if your property is a common user home page.
A    9. Reduce DNS lookups
A    10. Minify JS
A    11. Avoid redirects
A    12. Remove duplicate scripts
A    13. Configure ETags
下面一条条地说说，怎么实现。

• 1. 尽可能减少HTTP请求，一般采取的办法是减少图片量，多图组合成一图。
• 
  
• 2.使用CDN。使用专门的域名来存放图片、JS脚本、CSS样式文件、FLASH文件等静态的内容。
• 用独立于主域名的域名来做CDN，主要的原因是防止COOKIE的干扰，因为如果有COOKIE的情况下，浏览器在HTTP请求时会把COOKIE发送给服务器。
• 这里使用了cdn.eaxi.com。这里也可以使用智能解析，让网通、电信、教育网的的用户选择最快的CDN。
• (优点是主站中的任何cookie等header不会带到图片服务中，省了不少上传流量和服务器可能有的处理时间；缺点是多花了点域名的钱。)
• 
  
• 3.给静态文件加上过期标志。让浏览器或者CDN服务器缓存起来，加速图片和其他静态文件的加载。
• 
  
• 4.启用gzip压缩。gzip对文本的压缩效果非常好，而且主流浏览器也都支持gzip，建议启用。
• 
  
• 5.把CSS文件置顶。这个主要是为了让浏览器可以即时渲染。也就是说，加载了一部分HTML，浏览器马上就可以将其渲染到最终效果，不用等待加载完毕。
• 
  
• 6.把JS放到底部，这主要是防止JS在HTML加载完成前运行，加长网页的加载时间。
• 
  
• 7.不用CSS expressions。这个IE-only的垃圾，考都不考虑。
• 
  
• 8.把JS, CSS放到外部，让浏览器缓存。
• 
  
• 9.减少域名解析次数。这里只使用了两个域名：[url=http://seaprince.cn/]http://seaprince.cn/ (主站)，http://cdn.eaxi.com/(CDN)，这样，只需要进行两次域名解析。
• 域名解析也是个耗时的头儿，要注意。这CDN一多，域名查询也多，是冲突的。大家按自己情况合理取舍。当然，如果是大站，可以考虑多几个CDN服务器，
• 比如css.eaxi.com, js.eaxi.com，方便管理。
• 
  
• 10.压缩JS, CSS。
• 
  
• 11.避免重定向，重定向是浪费时间。
• 
  
• 12.删除重复的脚本。
• 
  
• 13.不用ETag。ETag是用于服务器和浏览器间文档校验的一种手段，如果匹配就使用缓存版本，不匹配的话，重新下载。
• 但是使用CDN的时候，不同镜像间的ETag是不一样的，这就导致了ETag的失灵。我们删除ETag。

      这样处理后，网页速度已经得到极大的提升。


技巧
在处理过程中，有一些我发现的技巧可以参考：
CDN。很多朋友可能没有经济能力去架设CDN服务器，或者根本就没有必要。这时就可以考虑用别名的方式。
比如，cdn.eaxi.com只是seaprince.cn的一个别名，它们属于同一个虚拟主机。但是，seaprince.cn下的cookie不会干扰到cdn.eaxi.com，这达到了CDN的一部分效果。
过期。对于Apache服务器，可以选择使用mod_expires或者mod_headers。我使用的是mod_headers。

可以在.htaccess文件中加上：
# YEAR
<FilesMatch "\.(flv|gif|ico|jpg|png|bmp)$">
Header set Cache-Control "max-age=2592000"
Header unset ETag
Header set X-Powered-By "seaprince.cn"
Header set Expires "Mon, 18 Jun 2018 05:30:47 GMT"
Header set Age "567"
Header set Connection "keep-alive"
Header set Server "nginx 0.7.1"
</FilesMatch>

# WEEK
<FilesMatch "\.(pdf|swf|js|css)$">
Header set Cache-Control "max-age=604800"
Header unset ETag
Header set X-Powered-By "seaprince.cn"
Header set Expires "Mon, 18 Jun 2018 05:30:47 GMT"
Header set Age "567"
Header set Connection "keep-alive"
Header set Server "nginx 0.7.1"
</FilesMatch>
如果你的服务器不支持mod_headers，可以选择mod_expires的方法：
ExpiresDefault "access plus 4 months"
ExpiresByType text/html "access plus 4 months"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"
ExpiresByType image/jpg "modification plus 5 hours 3 minutes"
ExpiresByType image/png "modification plus 5 hours 3 minutes"
ExpiresByType image/bmp "modification plus 5 hours 3 minutes"
ExpiresByType image/js "modification plus 5 hours 3 minutes"
ExpiresByType image/css "modification plus 5 hours 3 minutes"
其中的时间可以按需要自己定制。
删除ETag。这个可以使用Header unset ETag禁用服务器ETag的发送。

要完全关闭这个功能，可以使用YAHOO推荐的：
FileETag none
可以直接加在.htaccess文件中。

来源: http://seaprince.cn/website_performance/