国内的Wordpressr大多都是自娱自乐,自己折腾着好玩,既然开始了折腾,那么优化是必不可少的重要内容,另外,大多个人Blog为了避免备案的麻烦,都选择迁移到国外,大多是万里之外的美国,山高路远的,速度很成问题,所以提速也是必不可少的部分。排除掉主机性能与网络线路的问题,纯粹从wordpress自身的角度来进行优化有很多种方法。经过一系列的处理后,分别用Google PageSpeed,YahooYslow和WebPatetest检测,结果相当的不错。

实测结果是:PageSpeed得分97,YSlow(V2)得分100,YSlow(small site or blog)得分100

加上Google和Baidu的流量统计后,两项测试得分均降为96分

WebPagetest 得分

部分记录如下:

优化

  1. 减少HTTP请求,这是前端优化的第一条原则
    • 主要是减少CSS/JS的请求数量,多css的进行合并,有插件调用css的禁止掉
    • 使用css sprit技术合并背景图,使用源数据的形式把图片直接写入CSS,像我这里总共有30多个图片,通过css sprit合并图片后全站调用的图片只有3个,另外两个因为是非常细小的分割线,直接以源数据的形式写入了CSS
      合并后的背景图:http://www.crsay.com/blog/wp-content/themes/crsay/img/all.png
      直接写入css的小分割线:

      .somediv{background:#f9f9f9 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAjCAYAAAC+Rtu3AAAAF0lEQVQYV2N89er1f1FREQbGUQaJgQAA3UmLmKNVprgAAAAASUVORK5CYII=) 749px 0 repeat-y;}
      
    • 合并JS,把多个JS合并成一个
  2. 使用CDN

    我这里说的不是纯粹意义上的CDN,当然如果你有的话,用起来当然很爽。这里特指的是Google的Jquery库,现在很多主题的Lightbox或其他各种效果往往都需要Jquery库,小则50多K,新版的1.7.2则高达90多K,这个可以直接从Google调用,一般来说,速度肯定比我们这些米国的虚拟主机快的多,如:

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

    如无特殊需要,推荐使用1.3.2版,已经足够使用了。

  3. 文件缓存

    对CSS/JS/ICO和图片文件设置过期时间,通过.htaccess设置,数值请根据需要修改

    <IfModule mod_expires.c>
    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
    </IfModule>
    
  4. 压缩

    这里指两种压缩,1是对CSS/JS/HTML代码进行压缩处理,2是通过gzip压缩传输的内容
    对css/js进行压缩,网上有太多的工具,如csstidy等,对html压缩,可以通过一个插件Autoptimize实现
    Gzip压缩同样通过.htaccess来设置,注意不要压缩图片,JPG和PNG本身就是压缩过的,再进行压缩会起到反效果

    SetOutputFilter DEFLATE
    AddOutputFilterByType DEFLATE text/html text/css application/x-javascript
    
  5. CSS与JS
    把CSS放在顶部head区,务必放在JS之前
    CSS内不要import其他的css
    CSS内不要重复定义,去除不合理的css使用方式
    去除css内的表达式,尽量避免在css中使用*
    把JS放在页面尾部,因为Javascript加载是阻断式的,当页面中含有script时会先保证script内的内容加载完毕,然后才会继续处理余下的内容

    试着用Gtmetrix检测一下,看看其中关于CSS的得分项

    注:
    合并css/js可以手动合并,也可以使用类似scriptloader.php那样的程序对代码进行组合
    如果你的web服务器支持类似Tengine的那种combo特性的话,合并就会更简单了
    不推荐使用wordpress的minify插件,这个插件很容易和其他常用插件产生冲突

  6. 去除Etag
    Entity tags(ETags)(实体标签)是web服务器和浏览器用于判断浏览器缓存中的内容和服务器中的原始内容是否匹配的一种机制(“实体”就是所说的“内容”,包括图片、脚本、样式表等)。增加ETag为实体的验证提供了一个比使用“last-modified date(上次编辑时间)”更加灵活的机制。Etag是一个识别内容版本号的唯一字符串。唯一的格式限制就是它必须包含在双引号内。原始服务器通过含有 ETag文件头的响应指定页面内容的ETag。

    ETag的问题在于,它是根据可以辨别网站所在的服务器的具有唯一性的属性来生成的。当浏览器从一台服务器上获得页面内容后到另外一台服务器上进行验证时 ETag就会不匹配,这种情况对于使用服务器组和处理请求的网站来说是非常常见的。默认情况下,Apache和IIS都会把数据嵌入ETag中,这会显著减少多服务器间的文件验证冲突。

    如果web服务器是Apache的话,在.htaccess里加上一行即可

    FileETag none

    我的web服务器是LiteSpeed,悲催的解决不了这个问题

  7. Cookie和Cookie Free Domain
    去除不必要的Cookie,使Cookie体积尽量小,设置合理的过期时间、较早的Expire时间,不要过早去清除coockie。
    对于页面内容,使用Cookie Free 的域名,说白了就是文件内容使用的域名不含Cookie
    很多cookie的作用域是.abc.com这种,那么所有abc.com的域名都会带有cookie
    所以,我们来增加一个设置,修改wp-config.php,增加一行:

    define('COOKIE_DOMAIN', 'www.crsay.com'); 

    这样,当你通过二级域名来调用样式表和图片的时候,二级域名就是不含cookie的了

    确定好Cookie Free Domain后,修改wp-config.php,在define('DB_CHARSET', 'utf8');之前添加下面这行即可

    define('WP_CONTENT_URL', 'http://cookie.free.domain/wp-content');

    注:如果你使用了Google或者百度流量统计,那么它们会分别自动给全站加上__utm开头和Hm_开头的cookie,那就只好使用不同于blog域名的其他域名了

    其他还有一些小的优化措施,不一一表述,下面来说说从Wordpress本身的角度优化提速的几个注意事项:

  8. 模板静态化

    我之前的blog模板内使用了一个menu菜单,打开单篇文章页面时,查询是35个,屏蔽掉这个菜单后,查询变成17个,可见这个菜单的调用额外产生了多少查询啊

    与此类似,如果是个人站点,模板不会大动,域名与路径不会常变,那就把模板尽量静态化吧,模板内的

    <?php bloginfo( 'stylesheet_url' ); ?>
    <?php bloginfo('pingback_url'); ?>
    <?php bloginfo('name'); ?>
    <?php bloginfo('rss2_url'); ?>
    <?php echo get_option('home'); ?>
    <?php bloginfo('description'); ?>
    ....
    

    完全可以直接写入,不去调用这些函数,菜单就尽量不要动态调用了,没有谁会整天去换网站菜单的吧

  9. 插件
    原则就只有一个:尽量少用插件,能用代码实现的坚决不用插件

    我的这个Blog原来使用插件实现的功能有:SEO/si-contact-form/srg_clean_archives,Dagon sitemap-generator/wp-pagenavi/wp-lightboxJS/wp-cumulus/wp-syntax/wp-db-backup/autoptimize/akismet/Google sitemap/Baidu Sitemap等10多个插件,到目前为止仅保留了akismet/google sitemap/autoptmize和wp-syntax这四个插件,其他功能都有保留,但是都已经采用代码实现,查询大大减少,补充说明:

    • All in One SEO Pack:代码替换,在head模板内判断页面,提取descprition,Keywords对现在搜索引擎来说基本上已经没有什么意义,所以不再写入keywords
    • si-contact-form/srg clean archives/wp-cumulus包括Pagenavi分页导航和图片lightbox效果都可以很容易的用代码替换
    • 插件如果不用的话,从plugins目录里移除。只要插件还在这个目录,即便停用,wordpress仍然会每次都检测的
    • wp-db-backup可以通过cPanel后台的定时任务来执行一个PHP进行备份
    • 格式高亮我用的是wp-syntax,而没有使用Syntax Highlighter。wp-syntax这个插件不需要额外的加载js,最重要的是调用方式是通过形如
      <pre lang="html" line="1"> 

      这样的形式实现的,pre是标准的html语法,如果以后blog需要转移或转换什么的,PRE不会存在任何问题。

    • 站点地图我只用了Google Sitemap,百度的的数据格式和google是一样的,只是百度要求要使用sitemap_baidu.xml的文件名,通过.htaccess直接rewrite过去即可,完全没有必要再多一个插件来生成专门适应百度的xml
      RewriteBase /
      Rewriterule sitemap_baidu.xml sitemap.xml [L]
      
  10. 提速
    以上的各项措施事实上都可以起到提速的作用,但是对于中文wordpress来说,最有效的提速方式是去掉前台的语言包,具体修改方法参见:
    http://www.crsay.com/network/wordpress-exclude-category-and-speedup.html
    页面加载速度会有非常明显的提升。
  11. 缓存
  12. 如果一定要用缓存,对于虚拟主机而言,首选wp-super-cache,如果你不其他优化已经做得很好了,只是想减少一点查询,可以考虑使用Db Cache Reloaded Fix,W3 Total Cache对虚拟主机用户而言是个灾难,它只会让你的网站速度更慢,wp-super-cache建议禁止垃圾收集,开启preload模式,更新少的主机,每隔5-7天更新一次就行了
  13. 其他
    根目录下应该有favicon.ico,或者在wordpress模板里指定favicon的位置
    根目录下应该有robots.txt
    不要有404死链
    不要有空链接
    不要强行在页面内缩放图片

对于个人博客访问量较少的情况而言,优化的重点主要应该是对模板的结构进行优化,对CSS进行优化,对JS进行优化,对静态文件设置合适的缓存策略

几个比较“有用”的检测工具:

http://www.webpagetest.org/
http://gtmetrix.com/
http://tool.lu/
http://csssprites.com/

当然,如果你使用Chrome,Yslow和PageSpeed是最方便的工具

最后:选一个性能好、速度快、线路稳定的主机,上面的一切都不是问题