一般WordPress企業(yè)建站客戶需要花費大量的時間、精力和一定的技術(shù)來優(yōu)化你的網(wǎng)站。對于這些工作,其中之一比較容易達到的并且效果比較明顯的就是優(yōu)化你的博客的頁面加載速度。
為什么要優(yōu)化呢?第一,頁面加載速度快慢能夠反映你對博客的管理技術(shù),進而反映了整體博客內(nèi)容的質(zhì)量。其次,加載速度快的頁面將給讀者留下更好的印象,因為常識是幾乎沒有人愿意等待5秒鐘為了看一個不知內(nèi)容質(zhì)量的頁面,”網(wǎng)絡(luò)信息的競爭是激烈的”。第三,搜索引擎(谷歌)已經(jīng)把頁面加載速度列為衡量排序搜索結(jié)果的一個標準。基于這幾點考慮,優(yōu)化頁面加載速度是一項有形的工作,但卻有無形的回報。
基于我個人的經(jīng)驗并結(jié)合網(wǎng)絡(luò)所收集的資源,優(yōu)化頁面加載速度的主要目標是:減少http請求,減少數(shù)據(jù)庫讀取,優(yōu)化代碼,減少回應(yīng)內(nèi)容的帶寬,這些目標可以通過以下方式來達到。
1. 插件,插件,插件
在我第一次使用wordpress建博客的時候,我一次性裝了7,8個插件,而且很滿足我的成果,但是后來才感覺,我的博客主頁接近打不開了。也許你會覺得沒那么嚴重,但事實是插件確實會降低你的博客的運行速度。這里有很多原因,第一,插件太多,當(dāng)頁面載入時,你的博客服務(wù)器需要運行很多額外的功能函數(shù),有些插件需要連接到數(shù)據(jù)庫并讀取數(shù)據(jù)。這些會大大降低你的頁面載入速度。其次,你無法確定插件開發(fā)者的能力,差的開發(fā)者有時會成為頁面加載慢的根源。但是這不說明你要完整的拒絕所有插件,而要考慮使用最少量的插件。本博客只使用三個插件,Akismet(垃圾評論過濾),google xml site map和社交登錄。最后一個插件是本站自己開發(fā)的,自己開發(fā)這個插件的原因就是實在受不了有個同款插件里大量的冗余代碼。
2. 圖片
俗語說一圖道千言,使用圖片會有魔術(shù)般的效果吸引你的讀者,但是大量的使用圖片也將會大程度地拖慢你的頁面加載速度。其中主要有兩個原因: 第一,圖片一般都比文字大很多,下載一張圖片也許要大于下載一千個文字的量。第二,對于每個圖片,你的瀏覽器需要發(fā)送一個http請求。越多的http請求,你的頁面加載越慢。每個http的回應(yīng)速度取決于網(wǎng)絡(luò)的狀態(tài),和服務(wù)器的運行速度(如下圖),所以使用最少量的圖片是最有效的措施。
CSS sprite
如果你實在很想使用圖片的話,那么一定要使用CSS sprite. CSS sprite其實是一個很簡單的技巧,它是把多個圖片拼合在一起,組成一張圖片,然后運用CSS的background和position屬性來顯示大圖片的不同位置。這樣當(dāng)瀏覽器請求一個頁面時,對于圖片,它只需要發(fā)送一個Http請求,從而大大加快了速度 。網(wǎng)絡(luò)上有很多自動產(chǎn)生CSS sprite的網(wǎng)站,比如:http://www.wpdou.com/?你只需要上傳所有圖片,這個網(wǎng)站將會自動產(chǎn)生一個大圖片和相對應(yīng)的CSS。利用其中的CSS,你可以替換所有的網(wǎng)頁上的圖片。這個方法是所有大網(wǎng)站都強烈建議使用的包括Yahoo, google等等。
3.主題頭部優(yōu)化
在頁面載入是,幾乎所有的wordpress主題都要到數(shù)據(jù)庫讀取數(shù)據(jù),比如:
<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’); ?>
可以看到,上面的代碼幾乎進行了三次數(shù)據(jù)庫讀取,這些數(shù)據(jù)庫的讀取是根本沒必要的。你可以直接把上面的代碼替換為:
<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″?/>
主題開發(fā)者運用這些代碼是因為可以擴大主題的兼容性, 但是當(dāng)你確定要使用一個主題時,你可以毫不猶豫的把那些代碼改掉來加快頁面的載入速度。對于頭部header.php的其余部分,你可以做這些更改: 使用靜態(tài)CSS, Javascript, pingback,feed 地址和blog名字,blog描述, 常見的修改有:
<?php?bloginfo(‘html_type’); ?> : 文件Html類型
<?php?bloginfo(‘charset’); ?> : 網(wǎng)頁編碼
<?php?bloginfo(‘name’); ?> : 博客名
<?php?bloginfo(‘description’); ?> : 博客描述
<?php?bloginfo(‘stylesheet_url’); ?> : CSS文件路徑
<?php?bloginfo(‘pingback_url’); ?> : PingBack Url
<?php?bloginfo(‘version’); ?> : 可以刪除
<?php?bloginfo(‘a(chǎn)tom_url’); ?> : Atom Url
<?php?bloginfo(‘rss2_url’); ?> : RSS 2.o Url
<?php?bloginfo(‘url’); ?> : 博客 Url
4.數(shù)據(jù)庫讀取
如果你不是一個新手的編程人員,那你肯定知道數(shù)據(jù)庫讀取是耗時的。基于這點考慮,站長在建立博客時,應(yīng)盡量的避免數(shù)據(jù)庫直接讀取。比如你可以在function.php里添加一個函數(shù),這個函數(shù)將基于作者名稱為你取得其所有的文章。你可以寫一個SQL語句像:
Select?*?from?$wpdb->posts?where?post_author=….”
這種讀取方法照樣可以獲取你想要的文章,但是你可能沒有考慮到wordpress里已經(jīng)有了API query_posts() 可以做這樣的工作,運用已有的API將比自己寫的SQL更穩(wěn)定,快速。所有在搭建你的博客是應(yīng)盡量使用wordpress內(nèi)嵌的API來讀取數(shù)據(jù)。其次,使用wordpress內(nèi)嵌的API更快的原因是由于wordpress在運行時已經(jīng)把一些數(shù)據(jù)直接緩存在你的服務(wù)器的內(nèi)存里,如果你要讀取相應(yīng)的數(shù)據(jù),wordpress內(nèi)核將會從緩存里讀取已有的數(shù)據(jù)。
5.添加expire header
通常每個網(wǎng)站上都有靜態(tài)資源,這些靜態(tài)資源包括圖片,CSS, Javascirpt文件等。Expires header,就是過期時間的header報文。添加這個文件過期時間,其實就是通過header報文來指定特定類型的文件在瀏覽器中的緩存時間。有些文件(例如樣式表中調(diào)用的背景圖片和文章中調(diào)用的圖片)其實在很長一段時間內(nèi)我們都不會對它們有什么改變,這類文件當(dāng)?shù)谝淮伪幌螺d時,可以設(shè)置非常長的緩存時間,這樣以后瀏覽器就不需要再從服務(wù)器下載這些文件而直接從緩存中讀取,從而大大加速網(wǎng)站的載入速度。首次登錄的話并不能看出來有什么提升,但是當(dāng)瀏覽子頁面或者再次瀏覽的時候,就會發(fā)現(xiàn)速度較之前有很大改觀,服務(wù)器不會重新抓圖片、css、javascript這樣不常常跟新的文件(就是減少了HTTP請求次數(shù))。在wordpress中添加expire header的方法是在根目錄下的.htaccess里加上以下的設(shè)置:
# 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)。以上的設(shè)置將圖片,CSS,Javascript文件緩存在客戶端本地。當(dāng)客戶第二次登錄你的博客時,客戶端無需從服務(wù)器下載這些資源,而是直接從本地讀取。從而加快頁面加載速度。
6. 啟用GZIP
啟用GZIP的目的是減少文件傳輸?shù)膸?,一般的HtmL文件和CSS等其它文件都能夠在傳送之前進行壓縮,從而減少了傳輸數(shù)據(jù)量。最常用的兩種壓縮方法是Gzip和 deflate. 在wordpress里常用的是Gzip。 要啟用Gzip功能,需要在你的header.php的 頭部第一行加上:
<?php??ob_start(“ob_gzhandler”); ?>
這樣當(dāng)每個也被服務(wù)器發(fā)送之前都進行了壓縮。你可以測試你的博客是否啟用的壓縮功能。登錄http://www.gidnetwork.com/tools/gzip-test.php,輸入你的博客地址即可測出是否啟用Gzip。
7. 移除Etags
Yslow里推薦要移除Etags, 我不太清楚有什么好處,不過權(quán)威IT巨人Yahoo說的肯定不會錯了,所以就照做了。要移除Etags其實很簡單,在.htaccess里加上下面這行就解決了:
FileETag none
8. 手動壓縮Javascript和CSS文件
前面都解釋了很清楚了,我們需要減少文件的發(fā)送帶寬,所以手動壓縮javascript 和CSS文件有很大的幫助,不過要區(qū)別的是這個壓縮和Gzip的壓縮是不同層次的壓縮,手動壓縮時在文件上壓縮,而Gzip是在數(shù)據(jù)上壓縮。 兩種壓縮都是必須的。要壓縮Javascript,登錄這個網(wǎng)站http://jscompress.com/,復(fù)制你的javascript代碼到那個頁面,壓縮后再把代碼復(fù)制回來到原來的文件上,這樣你的Javascript就可以上傳到服務(wù)器使用了。 同樣的CSS文件也要在http://www.refresh-sf.com/yui/進行壓縮。所有壓縮完畢后可進行你的頁面測試。
最后建議在火狐瀏覽器上安裝Yslow或谷歌的page speed來測試你的頁面評分。我的主頁頁面在Yslow的評分是92,測試一下你的主頁并跟大家分享一下這些技巧是否有幫助你提高分數(shù)。