GTmetrix在JV刚折腾网站时就时不时拿来测速,它结合了PageSpeed和YSlow两款知名的网页性能分析工具,可以对你的页面载入进行详细的分析,然后综合各项指标得出相应的分数。
JV到后来就不怎么理会了,觉得自己打开页面感觉还可以,也不太在意这些细节上的问题,今天又想起来索性就测一测,不过这一测让我立马有优化一番的冲动:截图没有截到分数,好像PageSpeed只有70%,而YSlow只有83% .
GTmetrix
下面JV就来教大家实实在在地进行几项常见指标的优化,上图基本涵盖了目前WP站需要优化的项目:

1、Enable gzip compression

就是所谓的Gzip压缩了,点击这一项会展开告诉你需要压缩的文件类型,网上也有很多Gzip压缩的方法,不过目前真正压缩的话JV是用cPanel面板的“优化网站”功能实现的,打开CP面板主页,找到优化网站项:
mime
选择压缩指定的MIME类型,至于MIME类型是什么,建议你百度一下。我们Gzip压缩一般是压缩 css、js、html等,它们对应的MIME类型就是我们要输进去的:(复制/粘贴/更新设置 即可)

text/html text/plain text/xml text/css application/x-httpd-php application/x-javascript application/javascript

如果是DA面板,需要使用.htaccess来开启Gzip压缩,添加以下代码(注意先备份.htaccess文件)

SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css image/gif image/jpeg image/jpg image/png text/plain text/xml application/x-httpd-php application/x-javascript application/javascript
2、Leverage browser caching

开启使用浏览器的缓存功能,在.htaccess中添加以下代码(注意先备份.htaccess文件,以免发生意外)

# JV注释:开启缓存到期以及默认到期时间为0,格式为:A秒(下同)
ExpiresActive On
ExpiresDefault A0
# 设置媒体文件缓存时间为1年
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A29030400
Header append Cache-Control "public"
</FilesMatch>
# 设置媒体图片文件为1周
<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A604800
Header append Cache-Control "public"
</FilesMatch>
# 设置常规文件为2小时
<FilesMatch "\.(xml|txt|html|js|css)$">
ExpiresDefault A7200
Header append Cache-Control "proxy-revalidate"
</FilesMatch>
# 强制不缓存动态文件
<FilesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>

注意以上的缓存类型,这些代码基本已经把所有文件都进行了相应的缓存,实际上在GTmetrix检测提示需要缓存什么你就缓存什么,最好有的放矢。

3、Specify a Vary: Accept-Encoding header

针对该问题,一样用.htaccess搞定,记得先备份:

<IfModule mod_headers.c>  
 <FilesMatch ".(js|css|xml|gz)$">  
    Header append Vary Accept-Encoding
 </FilesMatch>
</IfModule>
4、Enable Keep-Alive

针对该问题,还是用.htaccess搞定,记得先备份:

<IfModule mod_headers.c>  
 <FilesMatch ".(js|css|png|jpg)$">  
    Header set Connection keep-alive
 </FilesMatch>
</IfModule>
5、Defer parsing of JavaScript

这是针对页面js加载的优化检测,js异步加载、延迟、放在网页最后加载等等,做好这几项就能满分。其中延迟加载的方法很简单,在script标签中加入defer属性即可,比如INLOSIM主题的加载方式:

<script defer="defer" type='text/javascript' src='http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js'></script>

非常简单。

6、Optimize images

压缩网页中的图片,怎么压缩?不用你去犯愁了,在报告中展开这一项,里面已经提供了压缩后的图片给你,只需要另存下来替换你主题中的原图即可。JV看过了,压缩后的质量用肉眼基本分辨不出来,所以不必担心图片会变模糊。

7、Add Expires headers

Expires header,就是过期时间的header报文。这个文件过期时间,其实就是通过header报文来指定特定类型的文件在浏览器中的缓存时间。有些文件(例如样式表中调用的背景图片和文章中调用的图片)其实在很长一段时间内我们都不会对它们有什么改变,这类文件可以设置非常长的缓存时间,这样浏览器以后就不需要再从服务器下载这些文件而直接从缓存中读取,从而大大加速网站的载入速度。
也是在.htaccess中添加代码:

# Expire images header /A后面为时间,单位:秒
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000
8、Use cookie-free domains

当浏览器向服务器请求一张静态的图片前,会先发送同域名下的cookie,服务器对于这些cookie不会做任何处理。因此它们只是在毫无意义的消耗带宽。所以你应该确保对于静态内容的请求是无cookie的请求。优化方法——在 wp-config.php 加入一句代码:

define('COOKIE_DOMAIN', '你的网站域名');
9、Configure entity tags (ETags)

在.htaccess中加入一句:

FileETag none

完成以上九个步骤再检测一次,基本上你的分数都会在85%_B以上,绿色的,看起来顺眼多了。
gtmetrix


还有其他一些优化建议:

  • 手动合并css和js
  • 利用cdn加速静态文件(JV的图片还没有开启加速)
  • 尽量不使用内嵌脚本、样式,应从外部加载
  • 把 CSS 文件放在源代码的开头,把 JS 放在页面底部加载(上面已经提到)
  • 优化 CSS 选择器(网页分析其实部分目的也是为了提高这方面的技巧)
  • 开启 Gzip ,这方面插件和代码的实现方法都有很多,有的主机控制面板还可以直接设置
  • 使用缓存插件(Hyper Cache、WP Super Cache 等)、数据库缓存插件(WordPress Object Cache、DB Cache Reloaded 等)

2015-01-08_baiduyouhua
百度页面优化建议分数也会提高的。

最后,如果你上不到90%_A的水平,很有可能你的页面引用了外部的js,比如站长统计,插件js等等。你可以试着去掉再进行一次检测。如此一来,页面看起来也清爽顺眼多了。

附上我自己的优化代码,以下代码加在.htaccess最后

#
# 以下是网站优化 2015.05.14
#

# 开启浏览器缓存
<FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|js|css|pdf)$">
Header set Cache-Control "max-age=2592000"
</FilesMatch>
<FilesMatch ".(html|htm|php)$">
Header set Cache-Control "max-age=36000"
</FilesMatch>

# 解决 GTmetrix 检查报出 Specify a Vary: Accept-Encoding header 的问题
<IfModule mod_headers.c>  
 <FilesMatch ".(js|css|xml|gz)$">  
    Header append Vary Accept-Encoding
 </FilesMatch>
</IfModule>

# 解决 GTmetrix 检查报出 Enable Keep-Alive 的问题
<IfModule mod_headers.c>  
 <FilesMatch ".(js|css|png|jpg)$">  
    Header set Connection keep-alive
 </FilesMatch>
</IfModule>

# 解决 GTmetrix 检查报出 Add Expires headers 的问题
ExpiresActive On
ExpiresDefault A0
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/ico A2592000
ExpiresByType text/css A2592000
ExpiresByType text/javascript A2592000

# 解决 GTmetrix 检查报出 Configure entity tags (ETags) 的问题
FileETag none

# 解决 GTmetrix 检查报出 Leverage browser caching 的问题
# 开启缓存到期以及默认到期时间为0,格式为:A秒(下同)
ExpiresActive On
ExpiresDefault A0
# 设置媒体文件缓存时间为1年
<FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">
ExpiresDefault A29030400
Header append Cache-Control "public"
</FilesMatch>
# 设置媒体图片文件为1周
<FilesMatch "\.(gif|jpg|jpeg|png|swf)$">
ExpiresDefault A604800
Header append Cache-Control "public"
</FilesMatch>
# 设置常规文件为2小时
<FilesMatch "\.(xml|txt|html|js|css)$">
ExpiresDefault A7200
Header append Cache-Control "proxy-revalidate"
</FilesMatch>
# 强制不缓存动态文件
<FilesMatch "\.(php|cgi|pl|htm)$">
ExpiresActive Off
Header set Cache-Control "private, no-cache, no-store, proxy-revalidate, no-transform"
Header set Pragma "no-cache"
</FilesMatch>

# 防盗链
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_REFERER} !^$ [NC]
RewriteCond %{HTTP_REFERER} !inlojv.com [NC]
RewriteCond %{HTTP_REFERER} !google.com [NC]
RewriteCond %{HTTP_REFERER} !baidu.com [NC]
RewriteCond %{HTTP_REFERER} !qq.com [NC]
RewriteCond %{HTTP_REFERER} !feedsky.com [NC]
RewriteCond %{HTTP_REFERER} !xianguo.com [NC]
RewriteCond %{HTTP_REFERER} !zhuaxia.com [NC]
RewriteCond %{HTTP_REFERER} !yahoo.com [NC]
RewriteRule .*.(gif|jpg|jpeg|png|bmp|zip|rar|7z|swf|mp3)$ http://ww3.sinaimg.cn/large/6b002b97gw1enuhhqrqadj20d807at8p.jpg [NC,L]
</IfModule>

以下代码加在.htaccess头部,大部分是301重定向用的

#首页301 index.html重定向
<IfModule mod_rewrite.c>
RewriteEngine On 
RewriteBase / 
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.(php|html|htm)\ HTTP/ 
RewriteRule ^index\.(php|html|htm)$ http://www.inlojv.com/ [R=301,L]
</IfModule>

# sitemap.php 定向为sitemap.xml
RewriteEngine On
RewriteBase /
RewriteRule ^sitemap.xml$ sitemap.php

# 永久性301重定向,也可以在控制面板填写
Redirect 301 /goto/tnc http://service.technetcal.com/aff.php?aff=091

# 禁止直接浏览网站目录结构,定向至404页面
Options -Indexes
DirectoryIndex index.php /404.php
# 禁止直接浏览wp-config.php文件
<files wp-config.php>
order allow,deny
deny from all
</files>