說到WordPress網站的優化快取,很多人會第一個想到或說到的應該是「WP SUPER CACHE」,但裴瑞今天要提出一個不同的「答案」,其中一個在目前市面上的WordPress優化教學甚至「很少」被提到,但效果卻是「驚人」的!今天裴瑞不藏私,大方地分享給大家,並附上親自安裝的「優化過程」,讓各位看官們比較一下前後的差異,不多說,這就開始吧!

WordPress優化神器:Autoptimize安裝與測試

優化前網站速度與跑分

在進行優化之前先進行一次網站「測速」,藉以跟「優化之後」的結果做比較,第一次測試的成績如下:

Chrome開發工具網站載入時間測試
Chrome開發工具載入測試,最下方的載入資訊分別為42Requests、8.3MB網頁大小、各種讀取時間。
GTmetrix網站測速工具測試
網站尚未優化時只有評等D,但其實大多項目都得了九十幾分,只是幾個高優先級的分數低所導致。

在沒「優化」的情況之下,Chrome開發工具;以及GTmetrix的測試結果,兩邊的載入時間都算一致,約為3.8秒,但在GTmetrix「評分」的部分就不太好看了,不管是在「PageSpeed Scores」、「YSlow」都只得到「D」的評等,另外可以注意一下「Requests」為45(後面的綠色箭頭向上,代表分數高於多數網站平均值。)

WordPress優化開始:安裝Autoptimize

WordPress優化神器Autoptimize

此款外掛的主要功能是,「合併」你網站的css以及js檔案,透過合併來「減少」訪客連入網頁時需要的「Request數目」,很多人對這個詞可能有點陌生,它是請求的意思,多少Requests代表「訪客端」需要跟你的伺服器「拿」多少檔案,才能正常運作與顯示你的網頁。

事實上每個網站都是由非常多的程式 (js)、以及外觀設定(css)所組成,每個「外掛」及每個功能都含有「各自」的外觀CSS以及程式js,加上「主題Theme」本身也帶了不少的CSS及js,因此一個網站常常動輒是「100」起跳的「Requests」,而因為我的網站還很新,很多功能還沒開發完成,加上本身有在控制這方面的數目,因此上面測試時Requests只有45,儘管如此還是來測試看看優化會帶來什麼變化。

Autoptimize優化設定

WordPress優化神器Autoptimize設定
Autoptimize設定頁面,優化:HTML、Javascript、CSS都勾選。
WordPress優化神器Autoptimize設定2
勾選取消WordPress內建表情符號

進入到Autoptimize設定頁面,把三個選項:優化HTML、優化程式Javascript、優化外觀檔CSS都打勾。再進入Extra選項,這邊可以自己「考量一下」,WordPress其實是有「內建」支援「emojis表情符號」的,如前面所說「任何功能」都有它「各自」的檔案。

而我的網站風格及內容並不會用到,因此我勾選了第一項,也就是移除表情符號的內建功能,減少我的檔案Requests。但如果你的網站有用到表情符號的內建功能的話,就保留著別勾選取消,否則可能會看到魔法消失,本來有使用的表情符號變回一堆標點符號。

可以看到畫面下面還有一個Google Fonts的選項,如果你是使用國外的主題Theme常常會內建很多你用不到的英文字型,可以勾選Remove Google Fonts,或者也可以合併這些字型為一個檔案就勾選三、四。

WordPress優化神器Autoptimize狀態

然後你在WordPress上方的AdminBar(就是你登入才會出現的那條黑黑的),就可以看到Autoptimize優化你的WordPress網站的狀況,可以看到我剛安裝目前是0%,要怎麼讓他優化呢?那就是進入你自己的網站,「到處逛逛」,他就會依照訪客來訪時所請求的實際檔案下去做優化,之後再回頭看這個數值,就會有跳動了。

Autoptimize優化後測速

進行了上述優化後,再來進行一次網站測試,結果如下:

Chrome開發工具網站載入時間測試2
檔案請求數降低、載入時間也變快了一點
GTmetrix網站測速工具測試2
檔案請求數降低,評等也提升,但載入速度降低

WordPress在優化後——Requests在Chrome中減少為29,Loading的時間也有變快一點;但在GTmetrix上Requests為31,讀取速度部分「反而變慢」,但在評分部分直接「提升為C等。」很明顯Automtimiz所帶來的最大好處就是將檔案合併後降低Requests數,但因為我的Requests本身不多所以優勢還沒有很明顯,之前我在一個破百Requests的WordPress上優化後直接剩下50幾個,優化了50%以上,那就差很多了。

Autoptimize最佳搭配組合HyperCache

Autoptimize官方建議搭配的快取

WordPress優化神器Autoptimize說明頁面
是一個極好評、又頻繁更新的外掛,官方有建議的搭配快取外掛。

接著我們安裝快取Cache外掛,搭配Autoptimize來做測試。在Autoptimize的外掛說明頁面中,就有建議搭配一起使用的快取外掛。赫赫有名的WP Super Cache就在第一個!也是很多人的選擇,但這邊我要使用的是我認為「效率奇佳」、又「輕量」的HyperCache

為什麼選擇HyperCache?

之前有幫一個網站「非常笨重」的客戶處理WordPress問題的,發現它使用了此款快取Cache外掛,在處理問題的過程中,因為某些原因把「快取」先關掉,忘記開啟的情況下⋯⋯我回到她的網站測試剛剛新增的功能,結果——超級——無敵——慢!我差點以為首頁「當掉」了開不起來!後來再「開啟」Cache後,天阿!這速度也太天差地遠了吧!

在那時我就對這個「快取程式」留下了一個深刻印象,後來又常看到其他有提到這款的部落客們對這款的「評價」都是非常的好(只要搜尋一下HyperCache就會發現每個有測試到此款的,評價都是很好的),但以它的「下載量」來說真的是不太熱門。而這次我將選擇此款Cache來做我WordPress的網頁端快取。

HyperCache初始設置

WordPress 輕量 高效 快取 HyperCache 設定

安裝完成並啟用後,你會看到HyperCache設定頁面的上方跳出此行紅色警告,是告知你要到WordPress根目錄的wp-config.php中去,加入此行程式:

define( 'WP_CACHE', true);

WordPress 輕量 高效 快取 HyperCache 設定2

實際打開WordPress根目錄的wp-config.php後,發現本來就有此行程式,但是被註解掉了,把前面的註解去掉,變成如上圖一樣即可。如果沒找到此行自己找一個空白的地方輸入即可。

WordPress 輕量 高效 快取 HyperCache 設定3
啟用後就已經自動開啟快取功能,這邊可看自己需求加選所需功能。

接著是HyperCache的設定頁面,基本上「外掛啟用」後就會自動開始快取了,設定頁面我只有再勾選Enable Compression。然後記得要逛逛網站才會讓各頁產生快取,還有一點算是HyperCache貼心的地方,只要你是登入管理者的狀態,去瀏覽網站都是沒有快取的,一方面方便你在修改程式或功能時,可以準確的看到新的變化,而不是被快取住的頁面。也因此,如果要測試「快取後」的速度,要開無痕視窗、或開另一個沒登入的瀏覽器來測試,任何方法⋯⋯只要記得「登出」的狀態來測試才是準確的喔!

找到網頁下方被標注,就表示此頁面已經快取,將大幅降低載入時間(記得不能登入狀態)

Autoptimize + HyperCache優化後測試

GTmetrix網站測速工具測試6
各方面都大幅進步,但檔案大小劣於大多網站平均

可以看到裝了Cache後直接在讀取時間上有了大幅的進步,並且提升到87%-B級的評等。而YSlow上雖然只有76%,但因為Yslow將網站有沒有做CDN列為重點評分,而在台灣我試過幾個CDN效果都不佳,不如不做,效果比較好的都需要付費,不像國外很多資源可用,只能說國情不同,還是得依實際狀況考量。

另外可以看到所有標準旁邊都有一個箭頭,如果你的表現優於所有網站的平均,箭頭就會是綠色向上,造九頑五網站在檔案大小上是大於平均的,查看原因後發現是由於Google Font太大,因此這邊我再進一步,把字體都改為內建的,捨棄所有Google Font的字體來測試。

GTmetrix網站測速工具測試5
更進一步取得A、載入更快、Requests減少、最重要的是檔案大小剩1MB不到

評等提升至A,整頁所需的檔案大小變為只需要644KB,讀取時間和Requests也有更好的表現,但到底「網頁」是用來「使用」的,不是用來「跑分」的,使用Google字體的網站我認為是比較易於閱讀,並能統一Windows和Mac的使用者體驗,因此我還是把Google字體給加了回去。

快取優化測試總結

如果你用「GTmetrix」去測試一些你常逛的網站⋯⋯你會驚訝的發現,用Autoptimize搭配Heypercache的表現,已經優於大部分你在逛的網站了,很多網站雖然有做「快取的優化」,卻忽略了「Requests數」的優化,因此「爆高的Requests」會是你常常看到的,如果你看到這邊⋯⋯那還不趕快替你的「WordPress」裝上「Autoptimize」,他會很好的搭配你「現有」的快取外掛,不管是「HeyperCache」還是「WP Super Cache!」

Chrome開發工具網站載入時間測試3
寫下這篇文章時的最近測試,雖然檔案大小有6.2MB,但配合快取載入表現的不錯。

最後附上我在寫這篇文時做的測試,已經比上面剛安裝優化時期,又多了不少外掛和程式,依然把讀取時間和Requests數控制得很好!是一款很優異的外掛呢!