知识点:
- 怎么样加快网页的加载速度?
- 什么是YAHOO优化十三条规则?
- 什么是firebug? 什么是YSlow?
- 我想优化我的网站加载速度,应该从哪里开始?
最终效果:
- 网页加载速度有了明显的提升。
- YSlow的分数明显增长。
- 用户浏览时,停顿感明显减少。
结果数据:
分项结果:
[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
下面一条条地说说,怎么实现。
- 尽可能减少HTTP请求,一般采取的办法是减少图片量,多图组合成一图。
- 使用CDN。使用专门的域名来存放图片、JS脚本、CSS样式文件、FLASH文件等静态的内容。用独立于主域名的域名来做CDN,主要的原 因是防止COOKIE的干扰,因为如果有COOKIE的情况下,浏览器在HTTP请求时会把COOKIE发送给服务器。这里使用了 cdn.eaxi.com。这里也可以使用智能解析,让网通、电信、教育网的的用户选择最快的CDN。
- 给静态文件加上过期标志。让浏览器或者CDN服务器缓存起来,加速图片和其他静态文件的加载。
- 启用gzip压缩。gzip对文本的压缩效果非常好,而且主流浏览器也都支持gzip,建议启用。
- 把CSS文件置顶。这个主要是为了让浏览器可以即时渲染。也就是说,加载了一部分HTML,浏览器马上就可以将其渲染到最终效果,不用等待加载完毕。
- 把JS放到底部,这主要是防止JS在HTML加载完成前运行,加长网页的加载时间。
- 不用CSS expressions。这个IE-only的垃圾,考都不考虑。
- 把JS, CSS放到外部,让浏览器缓存。
- 减少域名解析次数。这里只使用了两个域名:http://blog.eaxi.com/ (主站),http://cdn.eaxi.com/ (CDN),这样,只需要进行两次域名解析。域名解析也是个耗时的头儿,要注意。这CDN一多,域名查询也多,是冲突的。大家按自己情况合理取舍。当然,如果是大站,可以考虑多几个CDN服务器,比如css.eaxi.com, js.eaxi.com,方便管理。
- 压缩JS, CSS。
- 避免重定向,重定向是浪费时间。
- 删除重复的脚本。
- 不用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”
# 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”
如果你的服务器不支持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