鍗氬浼樺寲鏂规

wordpress博客优化历程(速度)

自从换了域名和主题之后，我一直在努力让博客的浏览体验更好，但是也挂载了大量的JS文件，页面的加载速度一度变得很慢。所以优化迫在眉睫。

我的优化步骤是： 1.压缩CSS和JS文件，并修改一部分插件，优化页面的载入进程

一般add_action(“wp_head”、“xxxx”)或add_action(“wp_footer”、“xxxx”)代码存在于需要额外加载JS或CSS的插件中，以便将自己的脚本或样式插入到主题的WP_head()和WP_footer()中。让插件正常工作(那些反映插件被激活却看不到效果的注意。我观察到相当一部分人用的主题无法正常加载插件的脚本，缺的就是这两个功能)。
还是回到正题吧。我们需要优化加载过程，也就是流量整形，把CSS文件移到头部(100%插件都可以做到这一点，不用担心)，把JS文件放在页面末尾。我们可以删除句子add_action(xxxx)，手动将所需文件插入主题模板。

2.压缩CSS和JS，缩短文件的加载时间

经常用jQuery写脚本的人应该清楚，jQuery库(1.3.2)的未压缩版本大约是120K，而min版本只有56K。因为jQuery库的min版本是用YUI压缩器压缩的，所以代码中的注释、无用空单元格和换行符都被去掉了。我们还可以使用YUI来压缩我们的脚本，压缩率可以达到30%~70%。因为YUI软件版本的安装过程比较复杂，这里是一个在线版本。
CSS的压缩比较简单，就是去掉换行符、空和注释。可以用在线工具压缩一下。但是主题的style.css头中的注释主题信息是不能删除的，否则可能会导致主题异常。
对于CSS的压缩，很多人使用PHP压缩。写一个名为style.css.php的文件，内容如下:

复制代码如下:
if(extension_loaded('zlib')and！ini_get('zlib.output_compression')和ini_get('output_handler')！='ob_gzhandler'和((version_compare(phpversion()，'5.0'，'>=')和ob_get_length()==false)或ob_get_length()===false)){
ob_start('ob_gzhandler')；
}else{
ob_start()；
}
/检查是否有Gzip相关的模块，如果有，使用Gzip传输。如果主机有Apachemod_deflate.c或者其他等效模块，可以不写这个
@header("cache-control:public")；
@header("Pragma:cache")；
//缓存文件
$expiresoffset=3600*24*365；
@header("Vary:Accept-Encoding")；
@header("Expires:"。gmdate("D，dMYH:i:s"，time()+$expireoffset)。“GMT”)；
//设置缓存时间
@header('content-type:text/CSS')；//声明文件类型
$CSSdata=file_get_contents('style.CSS')；//读取style.CSS
$CSSdata=preg_replace(array('/\s*[，；:\{\}])\s*/'，'/[\t\n\r]/'，'/\/\*。+?\*\//')、数组('\1'，''，'')，$CSSdata)；//清除注释和换行符等。
echo$CSSdata；//输出代码

将此文件放入主题文件夹，将主题CSS的加载代码改为

复制代码如下:
<；/link>；

当然JS文件也可以用PHP优化，但是由于一般加载的JS文件比较多，所以我通过另一个文件间接加载JS。创建一个名为js.php的文件，内容如下:


复制代码如下:
if(extension_loaded('zlib')and！ini_get('zlib.output_compression')和ini_get('output_handler')！='ob_gzhandler'和((version_compare(phpversion()，'5.0'，'>=')和ob_get_length()==false)或ob_get_length()===false)){
ob_start('ob_gzhandler')；
}else{
ob_start()；
}
/也是Gzip压缩语句
$js_folder="js/"；//js文件所在的目录，相对路径
$js_src=URLcode(HTMLSPECIALChars($_get['src'])；//获取JS文件名
$js_file=$js_folder。$js_src//JS文件位置
@header("cache-control:public")；
@header("Pragma:cache")；
//缓存文件
$expiresoffset=3600*24*365；
@header("Vary:Accept-Encoding")；//处理代理
@header("Expires:"。gmdate("D，dMYH:i:s"，time()+$expireoffset)。“GMT”)；
//设置缓存时间
@header('content-type:text/JavaScript；字符集:UTF-8’)；//声明文件类型
$jsdata=file_get_contents($js_file)；
echo$jsdata；
//输出内容

把这个文件放在主题目录下，在主题文件夹下建立一个JS文件夹，把所有需要的JS文件放在这个文件夹下。重写主题，用下面的方式加载JS文件:


复制代码如下:

如果你的主机有Apachemod_deflate.c模块，基本上可以忽略上面的方法，因为你只需要在。htaccess文件实现Gzip在全站的传输。并且压缩比更高。

复制代码如下:
AddOutputFilterByTypeDEFLATEtext/htmltext/CSStext/纯文本/XMLapplication/x-httpd-PHPapplication/x-JavaScript
<；/ifmodule>；

3.整合CSS和JS文件

经过上面的折腾，其实页面加载速度已经快很多了，只是速度没有止境，我们在追求更快。无计可施之后，只能从减少HTTP请求数量入手。这一步的目的是尽可能的整合所有的CSS和JS。
集成CSS相对简单。用各种主流浏览器测试了几个页面，没有发现框架错位。将相关css中的代码粘贴到style.css中，将相关CSS-image复制到主题目录中，修改CSS中的图像路径。
JS的集成方式比较复杂。在加载对象之前需要知道需要加载哪些脚本，否则无效，同时要注意不同插件的JS冲突。
集成CSS和JS后，回到第一步，删除插件中加载脚本和样式的语句。

后记

优化后，通过我自己的测试，博客速度有了很大的提高。Yslow的分数从70多提高到了90多。使用Google的Pagespeed和LoadImpact测试页面加载时间，已经从5s以上缩短到2~3s。
在Google宣布未来将网站打开速度纳入PR评分基准后，我们更应该关注速度。另外，从我的网站统计可以看出(绝对真实，但暂时不公开)，优化后，我的博客的跳出率已经下降到优化前的一半。不管我们做网站的目的是什么，要做好网站，著名的5s理论是不可忽视的。