wordpress博客怎么優(yōu)化

wordpress博客怎么優(yōu)化

wordpress博客怎么優(yōu)化?

我的優(yōu)化步驟是:

1.壓縮cssJS文件,并修改一部分插件,優(yōu)化頁面的載入進程

一般需要另外加載JS或者CSS的插件都會存在add_action(”wp_head”,”xxxx”)或者add_action(”wp_footer”,”xxxx”)這兩句代碼,目的是把自己的腳本或者樣式插入到主題的wp_head()和wp_footer()處,使插件可以正常工作(那些反映說插件激活了但看不到效果的人注意了,我觀察到相當(dāng)一部分人所使用的主題不能正常加載插件的腳本,缺的就是這兩個函數(shù)了)。

下面轉(zhuǎn)回正題。我們需要優(yōu)化載入進程,也就是流量整形,把CSS文件移到head里(這點100%的插件都能做到,不用擔(dān)心),把JS文件放在頁面最后。我們可以把add_action(xxxx)這句刪掉,然后手工把所需的文件插入到主題模板里。

推薦:《WordPress教程

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)容如下:

代碼如下:

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傳輸,如果主機有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*/',?'/[	  ]/',?'//*.+?*//'),?array('1',?'',''),?$cssdata);//清除注釋和換行符等 echo?$cssdata;//輸出代碼

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

代碼如下:

<link>/style.css.php"?type="text/css"?media="all"?/&gt; 

當(dāng)然JS文件也可以用PHP進行優(yōu)化,但由于通常情況下加載的JS文件比較多,我通過另一個文件來間接加載JS。建立一個名為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',?'&gt;=')?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文件:

代碼如下:

<script>/js.php?src=library.js"></script>

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

代碼如下:

<ifmodule> 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后,重返第一步,把插件里加載腳本和樣式的語句刪掉。

以上就是

? 版權(quán)聲明
THE END
喜歡就支持一下吧
點贊10 分享