wordpress 博客優(yōu)化歷程(速度)
我要評(píng)論1.壓縮CSS和JS文件，并修改一部分插件，優(yōu)化頁(yè)面的載入進(jìn)程
一般需要另外加載JS或者CSS的插件都會(huì)存在add_action(”wp_head”,”xxxx”)或者add_action(”wp_footer”,”xxxx”)這兩句代碼，目的是把自己的腳本或者樣式插入到主題的wp_head()和wp_footer()處，使插件可以正常工作（那些反映說(shuō)插件激活了但看不到效果的人注意了，我觀察到相當(dāng)一部分人所使用的主題不能正常加載插件的腳本，缺的就是這兩個(gè)函數(shù)了）。
下面轉(zhuǎn)回正題。我們需要優(yōu)化載入進(jìn)程，也就是流量整形，把CSS文件移到head里（這點(diǎn)100%的插件都能做到，不用擔(dān)心），把JS文件放在頁(yè)面最后。我們可以把a(bǔ)dd_action(xxxx)這句刪掉，然后手工把所需的文件插入到主題模板里。
2.壓縮CSS和JS，縮短文件的加載時(shí)間
經(jīng)常用jQuery寫(xiě)腳本的人應(yīng)該比較清楚，未壓縮版的jQuery庫(kù)（1.3.2）大小為120K左右，但min版的只有56K。因?yàn)閖Query庫(kù)min版經(jīng)過(guò)YUI Compressor壓縮，去除了代碼里的注釋、無(wú)用的空格和換行符。我們也可以用YUI來(lái)壓縮一下自己的腳本，壓縮率能達(dá)到30%~70%。由于軟件版的YUI安裝過(guò)程比較復(fù)雜，這里有個(gè)在線版。
而CSS的壓縮就比較簡(jiǎn)單，就是去除換行符、空格和注釋，大家可以用在線工具壓縮一下。但主題的style.css頭部被注釋掉的主題信息不能刪掉，否則可能導(dǎo)致主題不正常。
對(duì)于CSS的壓縮，很多人用的PHP壓縮。編寫(xiě)名為style.css.php的文件，內(nèi)容如下：
if ( extension_loaded('zlib') and !ini_get('zlib.output_compression') and ini_get('output_handler') != 'ob_gzhandler' and ((version_compare(phpversion(), '5.0', '>=') and ob_get_length() == false) or ob_get_length() === false) ) {
ob_start('ob_gzhandler');
}else{
ob_start();
}
//檢查是否含有Gzip相關(guān)模塊，有的話就采用Gzip傳輸，如果主機(jī)有Apache mod_deflate.c或其它等效模塊的話，可以不寫(xiě)這段
@header("Cache-Control: public");
@header("Pragma: cache");
//緩存文件
$expiresOffset = 3600*24*365;
@header( "Vary: Accept-Encoding" );
@header( "Expires: " . gmdate( "D, d M Y H:i:s", time() + $expiresOffset ) . " GMT" );
//設(shè)置緩存時(shí)間
@header('Content-Type: text/css');//聲明文件類(lèi)型
$cssdata = file_get_contents('style.css');//讀取style.css的內(nèi)容
$cssdata = preg_replace(array('/\s*([,;:\{\}])\s*/', '/[\t\n\r]/', '/\/\*.+?\*\//'), array('\\1', '',''), $cssdata);//清除注釋和換行符等
echo $cssdata;//輸出代碼
把這個(gè)文件放在主題文件夾里，并把主題CSS的加載代碼改為
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.css.php" type="text/css" media="all" />
</link>
當(dāng)然JS文件也可以用PHP進(jìn)行優(yōu)化，但由于通常情況下加載的JS文件比較多，我通過(guò)另一個(gè)文件來(lái)間接加載JS。建立一個(gè)名為js.php的文件，內(nèi)容如下：
if ( extension_loaded('zlib') and !ini_get('zlib.output_compression') and ini_get('output_handler') != 'ob_gzhandler' and ((version_compare(phpversion(), '5.0', '>=') and ob_get_length() == false) or ob_get_length() === false) ) {
ob_start('ob_gzhandler');
}else{
ob_start();
}
//同樣是Gzip壓縮的語(yǔ)句
$js_folder = "js/";//JS文件所在目錄，相對(duì)路徑
$js_src = urldecode( 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" ); // Handle proxies
@header( "Expires: " . gmdate( "D, d M Y H:i:s", time() + $expiresOffset ) . " GMT" );
//設(shè)置緩存時(shí)間
@header('Content-Type: text/javascript; charset: UTF-8');//聲明文件類(lèi)型
$jsdata = file_get_contents($js_file);
echo $jsdata;
//輸出內(nèi)容
把這個(gè)文件放在主題目錄下，在主題文件夾里建立一個(gè)JS文件夾，把所需的JS文件都放到這個(gè)文件夾里。改寫(xiě)一下主題，用以下方式加載JS文件：
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.php?src=library.js"></script>
如果你的主機(jī)有Apache mod_deflate.c模塊，基本上可以忽略上面的方法，因?yàn)橹恍枰?htaccess文件里加入以下代碼就可以實(shí)現(xiàn)全站Gzip傳輸了。而且壓縮率更高。
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-httpd-php application/x-javascript
</ifmodule>
3.整合CSS和JS文件
經(jīng)過(guò)上面一番折騰以后，其實(shí)頁(yè)面載入速度已經(jīng)快很多了，但速度是沒(méi)有止境的，我們追求更快。搞無(wú)可搞以后，只能從減少HTTP請(qǐng)求數(shù)下手了，這一步的目的盡量整合所有的CSS和JS。
整合CSS比較簡(jiǎn)單，用各種主流瀏覽器測(cè)試幾個(gè)頁(yè)面，沒(méi)發(fā)現(xiàn)框架錯(cuò)位現(xiàn)象，把相關(guān)的CSS里的代碼粘貼到style.css里，并把相關(guān)的CSS-image也復(fù)制到主題目錄下，修改一下CSS里的圖片路徑就行了。
JS的整合方法則復(fù)雜點(diǎn)，要搞清楚那些腳本需要在對(duì)象加載前加載，否則是無(wú)效的，并且要注意不同插件的JS沖突問(wèn)題。
整合完CSS和JS后，重返第一步，把插件里加載腳本和樣式的語(yǔ)句刪掉。
后記
經(jīng)過(guò)優(yōu)化以后，通過(guò)我自己測(cè)試，博客速度有了很大提升。Yslow的評(píng)分從70多上升到90多，用Google的Pagespeed和Load Impact測(cè)試頁(yè)面載入時(shí)間，已經(jīng)從5s以上縮短到2~3s。
在Google宣布今后將把網(wǎng)站打開(kāi)速度納入PR評(píng)分基準(zhǔn)以后，我們應(yīng)該更加注重速度。另外從我的網(wǎng)站統(tǒng)計(jì)數(shù)據(jù)里可以看出（絕對(duì)真實(shí)，但暫不公開(kāi)），經(jīng)過(guò)優(yōu)化以后，我博客的跳出率降至優(yōu)化前的一半。無(wú)論我們做網(wǎng)站的目的是什么，要做一個(gè)好網(wǎng)站，從前那個(gè)著名的5s理論還是不能忽視的。
相關(guān)文章
wordpress優(yōu)化頭部 去掉版權(quán)等信息 wordpress去掉generator
一般看下就應(yīng)該明白是什么意思的。這樣可以保證html頭部不再有其它的代碼了。去掉了wordpress的generator標(biāo)簽2012-07-30- 關(guān)鍵字描述：理由 ZBLOG 安裝 優(yōu)化 時(shí)間 WordPress 可以 文章 博客 讓我堅(jiān)守ZBLOG的十二大理由： 盡管WordPress是博客程序里面的老大，它的插件最多，模2009-06-06
- 大家都知道頁(yè)面加載速度對(duì)博客流量有非常重要的影響。最近越來(lái)越多人也在討論頁(yè)面加載速度很可能成為谷歌和其他搜索引擎一個(gè)重要的SEO因素。2010-01-24
- wordpress毫無(wú)疑問(wèn)是一個(gè)優(yōu)秀的博客系統(tǒng)，其最吸引人的一個(gè)特點(diǎn)就是有大量的外觀主題(theme)可以滿足個(gè)性化的博客展示需求。2009-11-09
- Wordpress中根據(jù)不同的頁(yè)類(lèi)型輸出對(duì)應(yīng)的title標(biāo)題的實(shí)現(xiàn)代碼，優(yōu)化標(biāo)題。2011-04-21
wordpress數(shù)據(jù)庫(kù)優(yōu)化和清理冗余數(shù)據(jù)的方法
本文主要介紹了wordpress數(shù)據(jù)庫(kù)優(yōu)化和清理冗余數(shù)據(jù)的方法，大家參考使用吧2014-02-13WordPress性能優(yōu)化加速五大方法：PHP MysqL優(yōu)化等
優(yōu)化Wordpress性能，一般我們是從這幾個(gè)方面來(lái)發(fā)力：服務(wù)器PHP腳本執(zhí)行效率、MysqL數(shù)據(jù)庫(kù)查詢性能、Wordpress評(píng)論、圖片、JS、CSS等靜態(tài)文件加載速度。如果要把Wordpress性2015-01-13