欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

wordpress 博客優(yōu)化歷程(速度)

  發(fā)布時間：2009-12-28 14:55:14   作者：佚名   我要評論
自從換了域名，換了主題以后，我一直努力令博客的瀏覽體驗更加好，但因此也掛載了大量的JS文件，頁面的載入速度一度變得非常緩慢。于是優(yōu)化就迫在眉睫了。
我的優(yōu)化步驟是：
1.壓縮CSS和JS文件，并修改一部分插件，優(yōu)化頁面的載入進(jìn)程

一般需要另外加載JS或者CSS的插件都會存在add_action(”wp_head”,”xxxx”)或者add_action(”wp_footer”,”xxxx”)這兩句代碼，目的是把自己的腳本或者樣式插入到主題的wp_head()和wp_footer()處，使插件可以正常工作（那些反映說插件激活了但看不到效果的人注意了，我觀察到相當(dāng)一部分人所使用的主題不能正常加載插件的腳本，缺的就是這兩個函數(shù)了）。
下面轉(zhuǎn)回正題。我們需要優(yōu)化載入進(jìn)程，也就是流量整形，把CSS文件移到head里（這點100%的插件都能做到，不用擔(dān)心），把JS文件放在頁面最后。我們可以把a(bǔ)dd_action(xxxx)這句刪掉，然后手工把所需的文件插入到主題模板里。

2.壓縮CSS和JS，縮短文件的加載時間

經(jīng)常用jQuery寫腳本的人應(yīng)該比較清楚，未壓縮版的jQuery庫（1.3.2）大小為120K左右，但min版的只有56K。因為jQuery庫min版經(jīng)過YUI Compressor壓縮，去除了代碼里的注釋、無用的空格和換行符。我們也可以用YUI來壓縮一下自己的腳本，壓縮率能達(dá)到30%~70%。由于軟件版的YUI安裝過程比較復(fù)雜，這里有個在線版。
而CSS的壓縮就比較簡單，就是去除換行符、空格和注釋，大家可以用在線工具壓縮一下。但主題的style.css頭部被注釋掉的主題信息不能刪掉，否則可能導(dǎo)致主題不正常。
對于CSS的壓縮，很多人用的PHP壓縮。編寫名為style.css.php的文件，內(nèi)容如下：

復(fù)制代碼
代碼如下:

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或其它等效模塊的話，可以不寫這段
@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è)置緩存時間
@header('Content-Type: text/css');//聲明文件類型
$cssdata = file_get_contents('style.css');//讀取style.css的內(nèi)容
$cssdata = preg_replace(array('/\s*([,;:\{\}])\s*/', '/[\t\n\r]/', '/\/\*.+?\*\//'), array('\\1', '',''), $cssdata);//清除注釋和換行符等
echo $cssdata;//輸出代碼

把這個文件放在主題文件夾里，并把主題CSS的加載代碼改為

復(fù)制代碼
代碼如下:

<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文件比較多，我通過另一個文件來間接加載JS。建立一個名為js.php的文件，內(nèi)容如下：


復(fù)制代碼
代碼如下:

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壓縮的語句
$js_folder = "js/";//JS文件所在目錄，相對路徑
$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è)置緩存時間
@header('Content-Type: text/javascript; charset: UTF-8');//聲明文件類型
$jsdata = file_get_contents($js_file);
echo $jsdata;
//輸出內(nèi)容

把這個文件放在主題目錄下，在主題文件夾里建立一個JS文件夾，把所需的JS文件都放到這個文件夾里。改寫一下主題，用以下方式加載JS文件：


復(fù)制代碼
代碼如下:

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js.php?src=library.js"></script>

如果你的主機(jī)有Apache mod_deflate.c模塊，基本上可以忽略上面的方法，因為只需要在.htaccess文件里加入以下代碼就可以實現(xiàn)全站Gzip傳輸了。而且壓縮率更高。

復(fù)制代碼
代碼如下:

<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)過上面一番折騰以后，其實頁面載入速度已經(jīng)快很多了，但速度是沒有止境的，我們追求更快。搞無可搞以后，只能從減少HTTP請求數(shù)下手了，這一步的目的盡量整合所有的CSS和JS。
整合CSS比較簡單，用各種主流瀏覽器測試幾個頁面，沒發(fā)現(xiàn)框架錯位現(xiàn)象，把相關(guān)的CSS里的代碼粘貼到style.css里，并把相關(guān)的CSS-image也復(fù)制到主題目錄下，修改一下CSS里的圖片路徑就行了。
JS的整合方法則復(fù)雜點，要搞清楚那些腳本需要在對象加載前加載，否則是無效的，并且要注意不同插件的JS沖突問題。
整合完CSS和JS后，重返第一步，把插件里加載腳本和樣式的語句刪掉。

后記

經(jīng)過優(yōu)化以后，通過我自己測試，博客速度有了很大提升。Yslow的評分從70多上升到90多，用Google的Pagespeed和Load Impact測試頁面載入時間，已經(jīng)從5s以上縮短到2~3s。
在Google宣布今后將把網(wǎng)站打開速度納入PR評分基準(zhǔn)以后，我們應(yīng)該更加注重速度。另外從我的網(wǎng)站統(tǒng)計數(shù)據(jù)里可以看出（絕對真實，但暫不公開），經(jīng)過優(yōu)化以后，我博客的跳出率降至優(yōu)化前的一半。無論我們做網(wǎng)站的目的是什么，要做一個好網(wǎng)站，從前那個著名的5s理論還是不能忽視的。

相關(guān)文章

最新評論