yslow优化心得

距离上次的优化大概隔了两个星期，上次就说了，要用yslow来优化自己的网站，这次终于达到了我的预期目标，先看看我优化的成绩吧，先用谷歌浏览器的Monster来测试一下！（Monster是Alipay UED推出的网站代码分析、质量检测及评分的浏览器扩展.智能分析CSS、JS、HTML内容，生动形象展示网页得分情况类似YSlow。）

分数比谷歌百度的的要高啊(谷歌的是90.49，百度的是92.96）！

再用谷歌的Page speed来测试一下！

分数还算可以，和Monster分析的差不多！

嗯，再请出权威的Yslow来测试一下！

哭啊，没有到A！不过，我再挣扎也没用的，那两项都和主机有关，我能做到的都做到了……我是B里面最牛B的一个！！

OK，数据已经出来了，这就是我几天辛苦的成果！不过，文章页我还暂时没有能力优化呢，因为有百度和谷歌的广告，js乱七八糟的东西一大推，又不能改，于是只有将就一下了，谁让我那么穷呢……

是不是有点手痒痒了，好吧，我来说几句我的优化心得！
首先就要看看Yslow12项优化

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.减少域名解析次数。大家按自己情况合理取舍。当然，如果是大站，可以考虑多几个CDN服务器，比如css.eaxi.com, js.eaxi.com，方便管理。
压缩JS, CSS。
10.避免重定向，重定向是浪费时间。
11.删除重复的脚本。
12.不用ETag。ETag是用于服务器和浏览器间文档校验的一种手段，如果匹配就使用缓存版本，不匹配的话，重新下载。但是使用CDN的时候，不同镜像间的ETag是不一样的，这就导致了ETag的失灵。我们删除ETag。

对照自己看看，有哪些不符合规定吧！

我一开始是1.3.4.6.12不符合，好惨啊，去问了下谷歌，找到了适合自己的修改方法！

针对第一项，那就是合并css和js了，嘿嘿，这个一句两句也说不清楚，而且牵涉到插件里面的js和css，所以不太好改，大家可以先不弄这个，真想弄的话，先备份好吧，要不……

针对第三项，我只能给图片什么的加上过期标志，js和css我加不上，所以那个是等级是D！！！加代码可以选择使用mod_expires或者mod_headers。我使用的是mod_headers。可以在.htaccess文件中加上：

.HTACCESS
  1. # YEAR  
  2. <filesMatch ”\.(flv|gif|ico|jpg|png|bmp)$”>  
  3. Header set Cache-Control ”max-age=2592000“  
  4. Header unset ETag  
  5. Header set X-Powered-By ”seaprince.cn”  
  6. Header set Expires ”Mon, 18 Jun 2018 05:30:47 GMT”  
  7. Header set Age ”567″  
  8. Header set Connection ”keep-alive”  
  9. Header set Server ”nginx 0.7.1″  
  10. </filesMatch>  
  11. # WEEK  
  12. <filesMatch ”\.(pdf|swf|js|css)$”>  
  13. Header set Cache-Control ”max-age=604800“  
  14. Header unset ETag  
  15. Header set X-Powered-By ”seaprince.cn”  
  16. Header set Expires ”Mon, 18 Jun 2018 05:30:47 GMT”  
  17. Header set Age ”567″  
  18. Header set Connection ”keep-alive”  
  19. Header set Server ”nginx 0.7.1″  
  20. </filesMatch>  

如果你的服务器不支持mod_headers，可以选择mod_expires的方法：

.HTACCESS
  1. ExpiresDefault “access plus 4 months”  
  2. ExpiresByType text/html “access plus 4 months”  
  3. ExpiresByType image/gif “modification plus 5 hours 3 minutes”  
  4. ExpiresByType image/jpg “modification plus 5 hours 3 minutes”  
  5. ExpiresByType image/png “modification plus 5 hours 3 minutes”  
  6. ExpiresByType image/bmp “modification plus 5 hours 3 minutes”  
  7. ExpiresByType image/js “modification plus 5 hours 3 minutes”  
  8. ExpiresByType image/css “modification plus 5 hours 3 minutes”  

自己不清楚，可以问问空间商或者加上后看看是否生效！

第四点，压缩css,js的gzip，方法如下：
1.在根目录的.htaccess里面加上RewriteRule (.*.css$|.*.js$) gzip.php?$1 [L]
2.做一个gzip.php，放在根目录下，代码如下：

PHP
  1. define(‘ABSPATH’, dirname(__FILE__).’/');  
  2. $cache = true;//Gzip压缩开关  
  3. $cachedir = ’wp-cache/’;//存放gz文件的目录，确保可写  
  4. $gzip = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], ’gzip’);  
  5. $deflate = strstr($_SERVER['HTTP_ACCEPT_ENCODING'], ’deflate’);  
  6. $encoding = $gzip ? ’gzip’ : ($deflate ? ’deflate’ : ’none’);  
  7. if(!isset($_SERVER['QUERY_STRING'])) exit();  
  8. $key=array_shift(explode(‘?’, $_SERVER['QUERY_STRING']));  
  9. $key=str_replace(‘../’,”,$key);  
  10. $filename=ABSPATH.$key;  
  11. $symbol=’^';  
  12. $rel_path=str_replace(ABSPATH,”,dirname($filename));  
  13. $namespace=str_replace(‘/’,$symbol,$rel_path);  
  14. $cache_filename=ABSPATH.$cachedir.$namespace.$symbol.basename($filename).’.gz’;//生成gz文件路径  
  15. $type=“Content-type: text/html”; //默认的类型信息  
  16. $ext = array_pop(explode(‘.’, $filename));//根据后缀判断文件类型信息  
  17. switch ($ext){  
  18. case ’css’:  
  19. $type=“Content-type: text/css”;  
  20. break;  
  21. case ’js’:  
  22. $type=“Content-type: text/javascript”;  
  23. break;  
  24. default:  
  25. exit();  
  26. }  
  27. if($cache){  
  28. if(file_exists($cache_filename)){//假如存在gz文件  
  29. $mtime = filemtime($cache_filename);  
  30. $gmt_mtime = gmdate(‘D, d M Y H:i:s’, $mtime) . ’ GMT’;  
  31. if( (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) &&  
  32. array_shift(explode(‘;’, $_SERVER['HTTP_IF_MODIFIED_SINCE'])) == $gmt_mtime)  
  33. ){  
  34. // 浏览器cache中的文件修改日期是否一致，将返回304  
  35. header (“HTTP/1.1 304 Not Modified”);  
  36. header(“Expires: ”);  
  37. header(“Cache-Control: ”);  
  38. header(“Pragma: ”);  
  39. header($type);  
  40. header(“Tips: Cache Not Modified (Gzip)”);  
  41. header (‘Content-Length: 0′);  
  42. }else{  
  43. //读取gz文件输出  
  44. $content = file_get_contents($cache_filename);  
  45. header(“Last-Modified:” . $gmt_mtime);  
  46. header(“Expires: ”);  
  47. header(“Cache-Control: ”);  
  48. header(“Pragma: ”);  
  49. header($type);  
  50. header(“Tips: Normal Respond (Gzip)”);  
  51. header(“Content-Encoding: gzip”);  
  52. echo $content;  
  53. }  
  54. }else if(file_exists($filename)){ //没有对应的gz文件  
  55. $mtime = mktime();  
  56. $gmt_mtime = gmdate(‘D, d M Y H:i:s’, $mtime) . ’ GMT’;  
  57. $content = file_get_contents($filename);//读取文件  
  58. $content = gzencode($content, 9, $gzip ? FORCE_GZIP : FORCE_DEFLATE);//压缩文件内容  
  59. header(“Last-Modified:” . $gmt_mtime);  
  60. header(“Expires: ”);  
  61. header(“Cache-Control: ”);  
  62. header(“Pragma: ”);  
  63. header($type);  
  64. header(“Tips: Build Gzip File (Gzip)”);  
  65. header (“Content-Encoding: ” . $encoding);  
  66. header (‘Content-Length: ’ . strlen($content));  
  67. echo $content;  
  68. if ($fp = fopen($cache_filename, ’w')) {//写入gz文件，供下次使用  
  69. fwrite($fp, $content);  
  70. fclose($fp);  
  71. }  
  72. }else{  
  73. header(“HTTP/1.0 404 Not Found”);  
  74. }  
  75. }else{ //处理不使用Gzip模式下的输出。原理基本同上  
  76. if(file_exists($filename)){  
  77. $mtime = filemtime($filename);  
  78. $gmt_mtime = gmdate(‘D, d M Y H:i:s’, $mtime) . ’ GMT’;  
  79. if( (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) &&  
  80. array_shift(explode(‘;’, $_SERVER['HTTP_IF_MODIFIED_SINCE'])) == $gmt_mtime)  
  81. ){  
  82. header (“HTTP/1.1 304 Not Modified”);  
  83. header(“Expires: ”);  
  84. header(“Cache-Control: ”);  
  85. header(“Pragma: ”);  
  86. header($type);  
  87. header(“Tips: Cache Not Modified”);  
  88. header (‘Content-Length: 0′);  
  89. }else{  
  90. header(“Last-Modified:” . $gmt_mtime);  
  91. header(“Expires: ”);  
  92. header(“Cache-Control: ”);  
  93. header(“Pragma: ”);  
  94. header($type);  
  95. header(“Tips: Normal Respond”);  
  96. $content = readfile($filename);  
  97. echo $content;  
  98. }  
  99. }else{  
  100. header(“HTTP/1.0 404 Not Found”);  
  101. }  
  102. }  
  103. ?>  

注意看第四行，一定要在根目录下建立一个wp-cache的文件夹，属性777，这样才可以！

关于第六点，JS放到底部，这个也和某些插件有关系，因为有的插件是把js写到head里面了，还是那句话，要改插件加js的位置代码，这个留到以后再说（不是一句两句能说清楚的）！

第十二点，不用ETag。这个最简单了，直接加在.htaccess文件中写上FileETag none就可以了。

嗯，总结的差不多了，不过优化不是一天两天能弄好的，还是循序渐进的来比较好，而且，就目前来看，我的速度也还是没有太多的变化！嘿嘿，想要自己博客快一些，如果不想折腾代码，那就去找一个快点的主机吧！不过，优化的方法还是要掌握一下的！

不知不觉写了这么多文字，够累的，在这里推荐一个压缩js和css的工具，“Packer – 最好用的 javascript 压缩工具”，“CSSTidy 1.3 – CSS整形与最佳化工具”，这两个工具是我现在必不可少的工具了，推荐大家使用！

如果有朋友想优化自己的网站，而自己又不会的话，可以联系我，我会在闲暇的时间去弄的，先来后到啊！不过我已经答应帮lowstz同学的忙了，嘿嘿，他排第一位！

支付宝担保交易购买 博客新手计划：域名+空间=100元

本文写于2010-08-31，采用 【BY-NC-SA】 进行授权。Tags : ,


70 次评论 (访客:36 次, 博主:34 次)

  1. avatar中华E商网-创业网

    多谢楼主分享，可以交换个链接吗？
    多谢楼主分享，回访有礼赠送哦~
    多谢楼主分享，回访有礼赠送哦~
    多谢楼主分享，回访有礼赠送哦~
    多谢楼主分享，回访有礼赠送哦~ :mrgreen: :mrgreen:

    2010年09月2日 22:54 | 回复  21楼 
  2. avatar优艾点

    有点小牛× 嘻嘻

    2010年09月3日 12:03 | 回复  22楼 
  3. avatar安庆法律人

    怎么将我的链接去掉了？
    去掉就去掉了吧，最后一次回访。

    2010年09月3日 13:45 | 回复  23楼 
  4. avatarzwwooooo

    这个太折腾人了，一般过得去就算了

    2010年09月4日 23:16 | 回复  24楼 
  5. avatar亿品元素

    速度真不错

    2010年09月7日 13:10 | 回复  25楼 
  6. avatarair max

    不错 看来你经常优化！

    2010年09月8日 09:15 | 回复  26楼 
  7. avatarNikeSB

    博主看来从事这个很有经验 优化很重要 但博主也要在文章提醒一句 网站的质量那是根本，。。

    2010年09月26日 13:17 | 回复  27楼 
  8. avatarNFL Jersey

    优化真的很强大！

    2010年09月28日 16:37 | 回复  28楼 
  9. avatarblueandhack

    准备给我的博客加速了~

    2010年10月14日 03:31 | 回复  29楼 
  10. avataryesureadmin

    又G到你这篇文章,照你的方法我终于把我的搞了了B不过应该是B里最差的,还是用small site or blog 模式,我这里有个问题,问下野鹤.首先我的yslow显示我的gzip分数是F,照你的方法搞也是没有,但我用站长工具等Gzip测试工具测试是成功的,压缩率达75%.

    2010年11月5日 10:55 | 回复  30楼 

:?: :razz: :!: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :idea: :arrow: :neutral: :cry: :mrgreen: :smile: :evil: