Tag Archives: yslow

用YSlow优化网站性能

知识点:

  1. 怎么样加快网页的加载速度?
  2. 什么是YAHOO优化十三条规则
  3. 什么是firebug? 什么是YSlow?
  4. 我想优化我的网站加载速度,应该从哪里开始?

最终效果:

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

 

结果数据:

分项结果:
[attach=124]

统计数据:
[attach=125]

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。
  3. 给静态文件加上过期标志。让浏览器或者CDN服务器缓存起来,加速图片和其他静态文件的加载。
  4. 启用gzip压缩。gzip对文本的压缩效果非常好,而且主流浏览器也都支持gzip,建议启用。
  5. 把CSS文件置顶。这个主要是为了让浏览器可以即时渲染。也就是说,加载了一部分HTML,浏览器马上就可以将其渲染到最终效果,不用等待加载完毕。
  6. 把JS放到底部,这主要是防止JS在HTML加载完成前运行,加长网页的加载时间。
  7. 不用CSS expressions。这个IE-only的垃圾,考都不考虑。
  8. 把JS, CSS放到外部,让浏览器缓存。
  9. 减少域名解析次数。这里只使用了两个域名:http://blog.eaxi.com/ (主站),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 只是blog.eaxi.com的一个别名,它们属于同一个虚拟主机。但是,blog.eaxi.com下的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 "blog.eaxi.com"
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 "blog.eaxi.com"
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文件中。