1. 程式人生 > >WordPress首頁載入速度--簡單優化&顯著效果

WordPress首頁載入速度--簡單優化&顯著效果

用了昨晚大概兩個小時,進行了個人站點首頁的優化,首頁載入時間提升數倍(百度分析:網通從8秒優化到2秒,電信從20秒以上優化到3秒以內),其實僅僅是針對首頁進行了簡單的處理,但是效果確實非常明顯。現在記錄下來,很多新手建站也會面臨首頁載入慢的問題,可以參考一下,也許你的站點就能得到些許優化。

個人wp站點IT老五搭建很久了,其他部落格的文章也同步在個人站點上更新。由於主要是給自己用,也沒想過啥推廣、seo、效能等問題,能正常記錄文字就行。但是前幾天突然在百度統計中看到有一項網站速度診斷,點選分析後,瞬間發現自己的網站是多麼的慢(其實之前開啟也感覺到需要等很久,但是沒有時間量化)。

背景

1 使用香港虛擬空間,非獨立ip,1G記憶體,免備案
2 採用WordPress搭建的個人部落格IT老五
3 雖然搭建完成將近一年了,但是主要是同步自己在其他平臺的文章及自己看到的想要留作備用的文章,也沒考慮過什麼優化之類,所以算是新建未優化過的部落格站

優化效果

以百度統計中的網站速度分析功能對站點的分析結果為依據:

優化前,網通載入首頁3次以上,均在7-10秒之間;電信載入首頁3次以上,最低29秒,最高超過60秒...
優化後,網通載入首頁3次以上,均在1.9-2.7秒之間;電信載入首頁3次以上,最低1.94秒,最高3.9秒...

下面兩張圖,分別是優化到中途,以及優化的最終結果圖(最開始的記錄忘記截圖了,百度分析記錄只能儲存最近10次分析,所以也看不到之前的時間了)


9166166-5044470ad5864e5c.jpg 優化一半效果 ITlao5-speed1.jpg 9166166-bf87fbe02df52a04.jpg 優化最終效果 ITlao5-speed2.jpg

優化過程

雖然建了不少站了,但沒怎麼思考過流量與站點優化等,這是第一個wp站點,優化也是剛開始考慮。所以一切都算是剛開始,只有根據百度分析後的建議進行。

資源優化

1 gzip壓縮
百度分析結果中發現首頁下載的資源達到了1.2M,建議進行gzip壓縮。於是去找gzip壓縮的方法,首先找到一篇文章說可以在index中設定,不過感覺這樣有點太麻煩,後來找到了其他幾種方法,其中一種非常簡單,也適合我的情況,原來,在cpanel中是可以開啟gzip壓縮的。
方法很簡單,在cpanel介面,軟體->優化網站中,有gzip壓縮選項,預設禁止壓縮,可以選擇開啟全站壓縮或者根據mine進行壓縮。在這裡開啟即可。
gzip開啟後的效果是:首頁減少了400kb
2

站點背景圖片
剛建站時,只考慮效果,沒有多想,直接弄了一張大圖,將近300kb的圖片。這張圖片是可以進行壓縮的,最後處理的效果是壓縮到只有20kb,由於背景是重複圖片,所以幾乎無影響。
站點背景圖片裁剪及壓縮的效果是:資源減少了280kb
3 其他靜態資源壓縮及尺寸縮減
這一項包括比較多,包括圖片尺寸優化,字型優化,js優化等

減少外部資源引用

由於外部資源載入速度無法確定,而且我們也無法對相應資源進行優化,所以需要儘量減少不合理外部資源的引用。
1 替換google相關資源引用
由於國內對google的限制,所以google的大部分內容都很難正常訪問,如地圖、字型、圖片等。移除或者替換為映象可以起到不錯的效果。這裡我使用了Disable Google Fonts外掛
2 圖片、js、css或者其他資源
將外部資源換到自己站點,原因是1. 其他站點的訪問情況不明確,可能會訪問較慢,此時如果處理不巧當,會影響到自己站點的載入;2. 其他站點資源可能較大,無法壓縮,或者資源可能隨時移除。

資源延遲載入

主要是圖片資源,這一部分最明顯,圖片延遲載入,我使用的是一款外掛a3 Lazy Load,在wp外掛中搜索安裝即可,可以讓圖片在需要展示的時候才去載入。
針對我的站點,這款外掛還有一個很大的作用,移除了avatar,因為我這裡僅僅是評論頭像使用到了avatar,而評論頭像不會一開始就展示。百度分析中avatar對載入速度的影響還是很大的。

停用非必須外掛

因為大部分外掛都有獨立的js,css等,甚至很多外掛還需要http訪問其他地址,這樣嚴重影響了頁面的載入速度,所以儘量減少非必須外掛的使用,一些簡單外掛也可以使用編碼去實現。

總結

經過上面的優化,最終首頁載入時僅下載253kb資源(其實還可以減少一些),相對於之前的1.2M,可以說僅僅剩下尾數了。
總的來說我做的主要是以下幾點:

  1. 開啟Gzip
  2. 背景圖優化
  3. a3 Lazy Load外掛,對圖片延時載入
  4. Disable Google Fonts外掛
  5. 關閉非必須外掛

原文:簡書ThinkinLiu 部落格: IT老五

當然,我站點首頁還有很多需要優化的,比如:js合併,css合併,圖片尺寸宣告,js優化等都有很多的優化空間。不過,上述操作確實在最短時間、最小工作量的基礎上做到了非常大的載入速度提升、起到了很顯著的效果。