小時
分鐘
Cloudways 主機獨家優惠:贈金20$+3個月7折,點此前往註冊,才可獲取贈金
專注於企業網站架設,分享WordPress教學和Elementor教學

如何使用WP Rocket加速WordPress網站

更新日期:2023-05-15
加入讀者學習群
我用的頁面編輯器
讓我的客戶網站GTmetrix測分A\A的主機Cloudways
獨家優惠前3個月7折,戳上方按鈕註冊即可自動帶入優惠碼LOYSEO
所贈主題外掛價值多為$49+
主機送Astra Pro不限站點1年
用Gmail郵箱,註冊易通過
遇到問題,聯繫我
來開通SEO工具20+

WP Rocket外掛是提升WordPress網站速度的易用且有效的最佳選擇。本文將介紹如何使用wp rocket加速網站,在開篇,我將直接介紹優化後的數據比較,這也是我為什麼選擇使用wp rocket的原因。

緩存外掛優化網站的測速數據對比

我對本站的B2B模板站https://b2bdemo.loyseo.com/展開了緩存外掛的優化測試:

  • 測試工具:https://gtmetrix.com/
  • 測試位置:香港(網站服務器在siteground新加坡服務器)
  • 測試次數:3次;
  • 網站條件:已經做了圖片優化,禁用了谷歌字體,安裝了GA,未開啟cloudflare CDN

測試結果如下:點擊表格中的鏈接可以看到每次的測試報告

使用的緩存外掛PageSpeed ScoreYSlow ScoreFully Loaded TimeTotal Page SizeRequests
未使用緩存外掛C/73%B/84%2.4s/2.7s/3.1s1.58M74
SG optimizerA/94%A/92%2.3s/2.6s/3.0s1.01M18
wp rocketA/96%A/94%1.3s/1.4s/2.5s1.02M18
b2b模板站最初是studyingseo.com,現已更換網域到b2bdemo.loyseo.com

結論是WP rocket明顯勝出了Siteground開發的sg optimizer。

此外,我曾經在比較緩存外掛時,試過了W3 Total Cache、WP Fastest Cache、WP Super Cache等多款外掛,這些外掛都有免費版,但都沒有純付費的WP rocket的操作簡單、學習成本低,並且有些外掛的設置甚至會破壞站點,於是最后買了付費的wp rocket,一用之下確實很棒。

如何使用WP Rocket加速WordPress網站
上圖是我的wp rocket購買記錄。

從安全角度而言,保持外掛更新是必要的,只有按年續費才能保持更新,若不更新的話,可能無法修復一些漏洞,不更新外掛也依舊能用,這方面需自己權衡,譬如站點收入較多,能夠覆蓋這方面成本的時候,就可以買付費,最低價格是49美元單站點/年,點此前往查看更多wp rocket價格套餐

也可以聯繫我購買,90元2年/單站點,我會逐年續費。

接下來,我們講解wp rocket如何使用及配置,這些配置正運用於上文所述的測試站點中。

設置WP Rocket

安裝並啟用wp rocket,啟用後wp rocket就開始按照默認設置發揮作用

我們需要對它進一步設置,點擊wordpress後台頂部的wp rocket》設置,即可進入設置頁面

如何使用WP Rocket加速WordPress網站

接下來按照下列組圖框選的選項進行配置,此外:wp rocket外掛自帶中文,只要你把後台的用戶語言設置為中文即可。

儀錶盤

在儀錶盤中,你可以看到賬戶的授權類型以及過期時間,通常這個頁面裡你不需要做什麼事情。

如何使用WP Rocket加速WordPress網站

緩存

按下圖所選進行啟用即可,其他的保持不動。注意,移動端不需要單獨緩存。只有當你正在使用移動端專用的主題或外掛時才建議開啟移動端緩存功能。

如何使用WP Rocket加速WordPress網站

文件優化

在文件優化這一頁,下面圖中是我的常用配置。

注意,勾選合併CSS和JavaScript文件能讓測速工具的評分有所提升,但是,你可以自己體驗一下勾選前後的區別,通過無痕瀏覽器或者其他瀏覽器(不要登錄網站)進行對比。

當選擇CSS或JS合併時,會在打開頁面的瞬間察覺明顯的樣式扭曲狀態(因為合併後文件比較大,無法較快輸出,而非合併情況下,大多都是小文件,能夠較快輸出),所以,通常不推薦網頁的css或js超過50KB的情況下合併它們,並且官方也說,不推薦用於HTTP/2的站點,點擊圖中的更多信息你可以測試自己的站點是否已經使用HTTP/2。通常,用我推薦的Cloudways主機就是HTTP/2的。

如何使用WP Rocket加速WordPress網站

而CSS遞送優化,雖然官方推薦使用移除未使用CSS的選項,但出問題的概率比較大;所以,我通常選擇異步加載CSS,不過此項經觀察也偶爾會出現打開頁面時的樣式閃爍,所以,你需要結合自己的接納程度選擇了。

如何使用WP Rocket加速WordPress網站

javascript異步加載是將js文件放到了頁腳,而延遲執行是在交互時才觸發,通常延遲執行引起頁面問題的概率大一點,有些主題會為你提供wp rocket的理想配置,但並非所有主題都支持,這個延遲執行的功能,如果沒有專業知識、或可靠的設置、或耐心的測試,否則不推薦啟用。

媒體

按下圖所選進行啟用,通常我們要啟用懶加載,讓圖片在進入可查看區域時才加載,降低頁面加載時間。但懶加載會導致前台看到圖片時出現卡頓。

所以,我更喜歡perfmatters外掛(可聯繫我優惠購買)的媒體設置,它允許你設置前N張圖片不用懶加載,同時,預先加載即將看到的N像素的內容的圖片,這樣就能將懶加載與用戶體驗更好的結合了。

如何使用WP Rocket加速WordPress網站

預緩存

在下圖中,預緩存要開啟。如果你的網站已經上線,啟用了rank math seo等SEO外掛,這裡還能勾選按照站點地圖(sitemap)進行預緩存。

此外,啟用鏈接預取功能也很棒,當你把鼠標停留在鏈接之上時,對應頁面就已經預先加載一部分內容了,這樣會提升用戶的體驗,讓用戶感覺打開網頁很快。

如何使用WP Rocket加速WordPress網站

接下來,有一欄DNS預讀取功能,它是針對外部文件的優化,譬如穀歌字體、主題字體,能夠優化移動端速度。

wprocket設置教學-8

你可以通過https://gtmetrix.com/的檢測結果查看你的網站是否有第三方資源,如下圖所示,在waterfall中查看domain列,如有非本站網域內容,則為第三方資源

gtmetrix檢測網站第三方文件
gtmetrix檢測網站第三方文件-2

將第三方網域複製後,在DNS與讀取中中填入://第三方網域,譬如://fonts.googleapis.com

接下來是預加載字體功能,此處用於填入網站本地的字體(而非谷歌等第三方字體),如果用Google pagespeed insight測速,配置好預加載字體後,測試得分將有明顯的提升。

如何使用WP Rocket加速WordPress網站

高級規則、數據庫

這兩項保持默認即可。

CDN

若按本站架設網站教學使用的cloudflare cdn,則此處不用設置。

心跳監測

降低心跳監測頻率可節省部分服務器資源,一般都選中。

如何使用WP Rocket加速WordPress網站

擴展功能

擴展功能裡是對第三方功能的支持,請按需選擇,通常,我都保持不動。

接下來的圖片優化功能也是安裝一個外掛IMAGIFY來實現,我一般不用這個外掛,具體請查看這篇圖片壓縮教學

以上設置完畢後,我們可以先用新瀏覽器或無痕瀏覽器查看網站是否有異常需要改正,若正常,則使用工具https://gtmetrix.com/進行測試查看成果。

以後,若修改內容或設計發現用戶端不能生效時,記得在頂部wp rocket菜單下,點擊Clear and preload Cach,如果修改了設計樣式,且無痕瀏覽發現樣式不生效,那還需要點擊一下Regenerate Critical Path CSS/重新生成關鍵路徑CSS。必要時也可以禁用wp rocket排查問題。

如何使用WP Rocket加速WordPress網站

好了,本篇wp rocket網站速度優化教學到此結束。

查看更多WordPress教學

點贊
0 / 5 5

Your page rank:

Bonnie
Bonnie

Bonnie是LOYSEO的創始人,熱愛能將想法變為現實的WordPress,更是Elementor的忠實用戶~

3 回复

  1. 您好! 按照您的教程自建了自己的网站, ASTRA主题有个自带的插件litespeed cache, 请问这个插件有用吗? 还是直接删掉? 另外有免费版给网站加速的插件吗? WP rocket全是付费的。 谢谢!

    1. litespeed不是主题带的,是主机带的。
      litespeed和wp rocket选一个装,当然后者更容易用,前者配置项太多,我没有深究过,我自己用的litespeed主机,我会找主机客服来配置litespeed(前提是主机说明可以提供配置服务的前提下)

發表回复

您的電子郵箱地址不會被公開。 必填項已用*標註

架設網站學習交流群