会员登录 还没有账号? 立即注册

WordPress网站定制开发专家
成为WPYOU会员, 享受更多专属优惠吧!

成为WPYOU联盟推广代理,获取高比例的推广佣金分成

立即加入

WordPress页面加载速度优化技巧汇总

一般WordPress企业建站客户需要花费大量的时间、精力和一定的技术来优化你的网站。对于这些工作,其中之一比较容易达到的并且效果比较明显的就是优化你的博客的页面加载速度。

为什么要优化呢?第一,页面加载速度快慢能够反映你对博客的管理技术,进而反映了整体博客内容的质量。其次,加载速度快的页面将给读者留下更好的印象,因为常识是几乎没有人愿意等待5秒钟为了看一个不知内容质量的页面,”网络信息的竞争是激烈的”。第三,搜索引擎(谷歌)已经把页面加载速度列为衡量排序搜索结果的一个标准。基于这几点考虑,优化页面加载速度是一项有形的工作,但却有无形的回报。

基于我个人的经验并结合网络所收集的资源,优化页面加载速度的主要目标是:减少http请求,减少数据库读取,优化代码,减少回应内容的带宽,这些目标可以通过以下方式来达到。

1. 插件,插件,插件
在我第一次使用wordpress建博客的时候,我一次性装了7,8个插件,而且很满足我的成果,但是后来才感觉,我的博客主页接近打不开了。也许你会觉得没那么严重,但事实是插件确实会降低你的博客的运行速度。这里有很多原因,第一,插件太多,当页面载入时,你的博客服务器需要运行很多额外的功能函数,有些插件需要连接到数据库并读取数据。这些会大大降低你的页面载入速度。其次,你无法确定插件开发者的能力,差的开发者有时会成为页面加载慢的根源。但是这不说明你要完整的拒绝所有插件,而要考虑使用最少量的插件。本博客只使用三个插件,Akismet(垃圾评论过滤),google xml site map和社交登录。最后一个插件是本站自己开发的,自己开发这个插件的原因就是实在受不了有个同款插件里大量的冗余代码。

2. 图片
俗语说一图道千言,使用图片会有魔术般的效果吸引你的读者,但是大量的使用图片也将会大程度地拖慢你的页面加载速度。其中主要有两个原因: 第一,图片一般都比文字大很多,下载一张图片也许要大于下载一千个文字的量。第二,对于每个图片,你的浏览器需要发送一个http请求。越多的http请求,你的页面加载越慢。每个http的回应速度取决于网络的状态,和服务器的运行速度(如下图),所以使用最少量的图片是最有效的措施。
http请求

CSS sprite
如果你实在很想使用图片的话,那么一定要使用CSS sprite. CSS sprite其实是一个很简单的技巧,它是把多个图片拼合在一起,组成一张图片,然后运用CSS的background和position属性来显示大图片的不同位置。这样当浏览器请求一个页面时,对于图片,它只需要发送一个Http请求,从而大大加快了速度 。网络上有很多自动产生CSS sprite的网站,比如:http://www.wpdou.com/ 你只需要上传所有图片,这个网站将会自动产生一个大图片和相对应的CSS。利用其中的CSS,你可以替换所有的网页上的图片。这个方法是所有大网站都强烈建议使用的包括Yahoo, google等等。

3.主题头部优化
在页面载入是,几乎所有的wordpress主题都要到数据库读取数据,比如:

<html xmlns=”http://www.w3.org/1999/xhtml” <?php language_attributes(); ?>>
<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”
<?php bloginfo(‘html_type’); ?>;
charset=<?php bloginfo(‘charset’); ?>

可以看到,上面的代码几乎进行了三次数据库读取,这些数据库的读取是根本没必要的。你可以直接把上面的代码替换为:

<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr”>
<head profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

主题开发者运用这些代码是因为可以扩大主题的兼容性, 但是当你确定要使用一个主题时,你可以毫不犹豫的把那些代码改掉来加快页面的载入速度。对于头部header.php的其余部分,你可以做这些更改: 使用静态CSS, Javascript, pingback,feed 地址和blog名字,blog描述, 常见的修改有:

<?php bloginfo(‘html_type’); ?> : 文件Html类型
<?php bloginfo(‘charset’); ?> : 网页编码
<?php bloginfo(‘name’); ?> : 博客名
<?php bloginfo(‘description’); ?> : 博客描述
<?php bloginfo(‘stylesheet_url’); ?> : CSS文件路径
<?php bloginfo(‘pingback_url’); ?> : PingBack Url
<?php bloginfo(‘version’); ?> : 可以删除
<?php bloginfo(‘atom_url’); ?> : Atom Url
<?php bloginfo(‘rss2_url’); ?> : RSS 2.o Url
<?php bloginfo(‘url’); ?> : 博客 Url

4.数据库读取
如果你不是一个新手的编程人员,那你肯定知道数据库读取是耗时的。基于这点考虑,站长在建立博客时,应尽量的避免数据库直接读取。比如你可以在function.php里添加一个函数,这个函数将基于作者名称为你取得其所有的文章。你可以写一个SQL语句像:

Select * from $wpdb->posts where post_author=….”

这种读取方法照样可以获取你想要的文章,但是你可能没有考虑到wordpress里已经有了API query_posts() 可以做这样的工作,运用已有的API将比自己写的SQL更稳定,快速。所有在搭建你的博客是应尽量使用wordpress内嵌的API来读取数据。其次,使用wordpress内嵌的API更快的原因是由于wordpress在运行时已经把一些数据直接缓存在你的服务器的内存里,如果你要读取相应的数据,wordpress内核将会从缓存里读取已有的数据。

5.添加expire header
通常每个网站上都有静态资源,这些静态资源包括图片,CSS, Javascirpt文件等。Expires header,就是过期时间的header报文。添加这个文件过期时间,其实就是通过header报文来指定特定类型的文件在浏览器中的缓存时间。有些文件(例如样式表中调用的背景图片和文章中调用的图片)其实在很长一段时间内我们都不会对它们有什么改变,这类文件当第一次被下载时,可以设置非常长的缓存时间,这样以后浏览器就不需要再从服务器下载这些文件而直接从缓存中读取,从而大大加速网站的载入速度。首次登录的话并不能看出来有什么提升,但是当浏览子页面或者再次浏览的时候,就会发现速度较之前有很大改观,服务器不会重新抓图片、css、javascript这样不常常跟新的文件(就是减少了HTTP请求次数)。在wordpress中添加expire header的方法是在根目录下的.htaccess里加上以下的设置:

# Expire images header
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

A2592000 指的是未来的一个月(60*60*24*30=2592000)。以上的设置将图片,CSS,Javascript文件缓存在客户端本地。当客户第二次登录你的博客时,客户端无需从服务器下载这些资源,而是直接从本地读取。从而加快页面加载速度。

6. 启用GZIP
启用GZIP的目的是减少文件传输的带宽,一般的HtmL文件和CSS等其它文件都能够在传送之前进行压缩,从而减少了传输数据量。最常用的两种压缩方法是Gzip和 deflate. 在wordpress里常用的是Gzip。 要启用Gzip功能,需要在你的header.php的 头部第一行加上:

<?php  ob_start(“ob_gzhandler”); ?>

这样当每个也被服务器发送之前都进行了压缩。你可以测试你的博客是否启用的压缩功能。登录http://www.gidnetwork.com/tools/gzip-test.php,输入你的博客地址即可测出是否启用Gzip。

7. 移除Etags
Yslow里推荐要移除Etags, 我不太清楚有什么好处,不过权威IT巨人Yahoo说的肯定不会错了,所以就照做了。要移除Etags其实很简单,在.htaccess里加上下面这行就解决了:

FileETag none

8. 手动压缩Javascript和CSS文件
前面都解释了很清楚了,我们需要减少文件的发送带宽,所以手动压缩javascript 和CSS文件有很大的帮助,不过要区别的是这个压缩和Gzip的压缩是不同层次的压缩,手动压缩时在文件上压缩,而Gzip是在数据上压缩。 两种压缩都是必须的。要压缩Javascript,登录这个网站http://jscompress.com/,复制你的javascript代码到那个页面,压缩后再把代码复制回来到原来的文件上,这样你的Javascript就可以上传到服务器使用了。 同样的CSS文件也要在http://www.refresh-sf.com/yui/进行压缩。所有压缩完毕后可进行你的页面测试。

最后建议在火狐浏览器上安装Yslow或谷歌的page speed来测试你的页面评分。我的主页页面在Yslow的评分是92,测试一下你的主页并跟大家分享一下这些技巧是否有帮助你提高分数。

在线留言

你必须 才能评论!

  1. 同心2013/01/01 14:25:17

    不错的BLOG,内容丰富,文章精练,支持一下

在线客服

点击这里给我发消息 定制开发 购买主题 售前咨询 售后服务
返回顶部