让网站通过Yslow Grade A之一

早在刚接触前端的时候, 一位师兄就给我介绍过Yslow这款ff插件,一款给页面评分的插件。前段时间觉得网站已经修改得不错了,于是用yslow测试,结果十分郁闷,竟然是72分,Grade C,这个分数是在v2(标准或大型网站模式)下的得分,而在small site or blog(小型网站或博客)模式下为82分,Grade B。这个对于追求完美的处女座来说当然是接受不了,于是决定冲击Grade A,而且是v2模式下的。

首先本站在v2下只拿到72分,究竟是哪些方面做得不足呢?用yslow测试,发现了5个低分为F(最低评分)的项目:

Make fewer HTTP requests

Use a Content Delivery Network (CDN)

Add Expires headers

Configure entity tags(ETags)

Compress components with gzip

经过一个晚上的努力,已经解决了以上的几点问题,我还顺带对其他一些网站进行yslow评测,发现以上5个项目可以说是很多网站的“通病”,因此下面的解决方案相信也会对一些站长有帮助。

1.Make fewer HTTP requests

这点是“尽可能减少http请求”,主要是js和external background images请求太多,这个问题的解决办法比较简单,合并js文件以及减少不必要的js文件即可。网站里本来是有相册页面的,主要是利用NextGEN Gallery这个插件做的,但是NextGEN Gallery却在每个页面都加载2个比较大的js,后来相册页面没有用了,因此我果断停用NextGEN Gallery这个插件,但这时又会产生一个问题:

因为NextGEN Gallery会自动加载wordpress自带的jQuery,那么就算你之前在header.php里删除加载wordpress自带jQuery库的语句,而加载google的jQuery库也看不出什么区别,但一旦停用NextGEN Gallery后自带的jQuery停止加载了,而最近google又经常被黑,导致google jQuery库失效,因此网站上所有利用jQuery的js都会失效。这时可以把

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"><script>

(google?jQuery版本不同,路径有所不同)

替换为

<script type="text/javascript" src="http://kayosite.com/wp-includes/js/jquery/jquery.js?ver=1.4.4"><script>

(把kayosite.com替换为自己的网站域名)

问题就解决了。

另外我还合并了一些插件,Make fewer HTTP requests这一项升为C了,当然你也可以把php请求改为固定链接,比如把<?php bloginfo('template_url'); ?>改为http://kayosite.com/wp-content/themes/sight/。不过我把六七个php请求替换后效果并不大,因此最后没有采用,有兴趣的童鞋可以试试。

2.Use a Content Delivery Network (CDN)

首先什么是CDN?CDN中文为内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络”边缘”,使用户可以就近取得所需的内容,解决Internet网络拥挤的状况,提高用户访问网站的响应速度。好了,很复杂是不?其实简单点来说,就是平时玩游戏或下载时要选择的“北京网通”,“北京电信”,“广东网通”,“广东电信”,然后才能得到最快的游戏或下载速度。这应该很容易理解了,但是作为一个普通前端人员,这显然不是我能修改的,因此这项yslow得分只能舍弃了。

3.Add Expires headers

首先对Add Expires headers解释一下,浏览器会用缓存来减少 http 请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。因此这也是服务器端所要修改的,但如果你能修改网站服务器的.htaccess文件,也可以轻松拿到这一项yslow得分。

如果你的服务器安装的是cpanel面板,可以进入面板后点击打开文件管理器,在弹出的选择框中勾选显示隐藏文件,进入html_public后就能找到.htaccess,如果找不到,那就说明你的服务器不支持自行修改.htaccess,可以联系你的服务器管理员。

找到.htaccess后,打开文件,在</IfModule>与# END WordPress之间添加以下语句:

ExpiresActive On
ExpiresDefault A600
ExpiresByType image/x-icon A2592000
ExpiresByType application/javascript A2592000
ExpiresByType application/x-javascript A2592000
ExpiresByType text/css A604800
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType text/plain A86400
ExpiresByType application/x-shockwave-flash A2592000
ExpiresByType video/x-flv A2592000
ExpiresByType application/pdf A2592000
ExpiresByType text/html A600

添加以上语句后,这一项的yslow得分马上提升为A。

4.Configure entity tags(ETags)

Etag是服务器告诉浏览器缓存,缓存中的内容是否已经发生变化的一种机制。通过Etag,浏览器就可以知道现在的缓存中的内容是不是最新的,需不需要重新从服务器上重新下载。但这也使浏览器在访问网站资源时常常把网站资源整个重新下载,因此果断在.htaccess中添加如下语句以关闭Etags。

FileETag none

5.Compress components with gzip

用过Linux的童鞋应该对gzip不陌生,gzip用在服务器端对网站文件进行压缩可以大大加快网站载入速度,对于大型的js和css文件尤其有效。

由于这一部分比较复杂,因此将会另写一篇文章对其进行详细介绍。

 

针对yslow评测意见的网站修改进行到这里,已经完成大半了,这时再对网站进行yslow(v2)评测,得分已经提高到86分,Grade B:

而yslow(small site or blog)评测更达到90分,Grade A:

 

由此可见这次针对yslow优化的效果还是十分明显的。也没有浪费一个晚上的时间了(激动啊),期待最后一步针对Compress components with gzip的优化,冲击v2 Grade A!

 

本文由 Kayo Lee 发表,本文链接:http://kayosite.com/pass-yslow-grade-a-one.html

评论列表

  • 评论者头像
    回复

    v2规则下grade A的飘过,HOHO~

    • 评论者头像
      回复

      8-O 表示羡慕中,不过我对js和css进行gzip后应该能到V2 GradeA了 :idea:

  • 评论者头像
    回复

    这个用了,貌似我的还有其他问题,只是分数提高了

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O