Forrester Consulting的一項研究表明“ 47%的消費者希望網頁在兩秒鐘或更短的時間內載入”。可悲的是,許多站長沒有意識到載入緩慢的網站不僅使人們感到沮喪,而且還可能對網站搜尋排名產生負面影響,並影響網站收入!
好訊息是有一些方法可以加快網站的載入時間,本教程將詳細介紹如何配置目前較為主流的WordPress快取外掛WP ROCKET,以提升網站速度和效能。
本教程主要分為以下三大部分:
什麼是WP ROCKET?WP ROCKET是一款主流的WordPress快取外掛,對提升網站的載入時間非常有效。
WP Rocket計劃和定價:
- $49/年–一年的支援和更新(單網站).
- $99/年–一年的支援和更新(三網站).
- $249/年–一年的支援和更新(無限網站).
WP Rocket是作為眾多站長首選的WordPress高階快取外掛。WP Rocket入門非常容易,只需安裝一些建議的設定即可完成即插即用。
- 優點:最小配置/頁面快取/快取預載入/靜態檔案壓縮
- 缺點:對於國內站長來說,價格並不低。
不像大多數其他WordPress快取記憶體那樣,各種令人困惑的選項和設定。後續我們將會抽空介紹一下WP Rocket的最佳免費替代品.
一.下載和安裝WP ROCKET
首先,前往WP Rocket網站併購買WordPress外掛。
根據自身的需求選擇最適合付費套餐並完成下訂單所需的步驟。
接下來,wp-rocket.me將會向您的帳戶傳送一封包含登入資訊的電子郵件。點選附帶的連結登入網站,然後進入“My Account”即可找到下載連結,點選下載並將zip檔案儲存到您的計算機。
接下來,登入到您的WordPress網站並前往外掛–>安裝外掛–>上傳外掛。只需上傳外掛壓縮包即可安裝WP Rocket。
最後,去啟用WP Rocket,即完成外掛的最終安裝。
二. WP ROCKET最佳配置
下面我們一起來看看WP Rocket最佳配置,當然實際上,還需要站長根據自身情況而定。所謂最佳配置,更多是一個參考作用。
在WordPress網站管理後臺的設定–> WP Rocket,進入外掛設定頁面。您需要配置和調整以下10個標籤或部分的設定,及其他一些配置選項及說明:
- 我的帳戶(預設標籤頁)
- 快取設定
- CSS和JS檔案優化設定
- 媒體設定
- 預載入設定
- 高階規則設定
- 資料庫設定
- CDN設定
- 附加元件(Cloudflare)
- 工具
更多設定選項及說明:
1. WP ROCKET儀表盤
WP ROCKET儀表盤提供有關許可證及其到期時間等資訊。您也可以選擇加入Rocket Tester(beta測試計劃)和Rocket Analytics(允許WP Rocket匿名收集資料)。在這裡,您還可以找到有關WP Rocket的支援和常見問題的連結。
在儀表盤中,您可以Remove All Cached Files(刪除所有快取的檔案,建議您在配置WP Rocket設定後執行此操作),Start Cache Preloading(啟動快取預載入,為您的主頁和主頁上的所有內部連結生成快取)和Purge OPcache(清除OPcahce內容,以防止更新WP Rocket外掛時出現問題)。
2. WP ROCKET快取設定
2.1 Enable caching for mobile devices-為移動裝置啟用快取應該被啟用,因為它可以為移動裝置啟用快取,以提升您的網站移動裝置載入速度。
也選擇Separate cache files for mobile devices(為移動裝置分隔快取檔案)。因為WP Rocket移動快取在啟用這兩個選項的情況下最安全。如有疑問,請保留兩者。
2.2 Enable caching for logged in WordPress users-為WordPress登入使用者啟用快取,僅當擁有會員網站時才建議將其啟用,或者當使用者必須登入才能檢視內容時才建議啟用。
2.3 Cache lifespan-快取生命週期將自動設定為10小時,這意味著在重新建立快取檔案10小時後會自動將其刪除。如果您很少更新網站或者存在大量的靜態內容,可以嘗試設定更長的快取生命週期,具體因人而異。
最後務必儲存並測試!如果您發現網站存在問題,請停用設定。
3. CSS和JS檔案優化設定
Minifying files(檔案瘦身)減少檔案大小,可以縮短載入時間。Minification從靜態檔案中刪除空格和註釋,使瀏覽器和搜尋引擎能夠更快地處理HTML,CSS和JavaScript檔案。
Combining files(合併檔案)將多個檔案合併為一個更小的組,以確保主題/外掛相容性和更好的效能。但是,建議不要強制連線到單個檔案,因為與1到2個大檔案相比,瀏覽器可以更快地並行下載6個較小的檔案。
將CSS和JS合併成更少的檔案被認為是HTTP/1下的最佳實踐方案,而HTTP/2則不一定如此。如果您的站點在HTTP/2上執行,那麼以下是您應該考慮的事項為HTTP/2配置WP Rocket .
3.1 Minify HTML files-HTML檔案瘦身將刪除空格和註釋,以減少網站上的網頁大小。
3.2 Combine Google Fonts files-合併Google字型檔案將減少HTTP請求的數量(特別是如果您使用多種字型)。
3.3 Remove query strings-刪除查詢字串從靜態資源可以提高GT Metrix的效能等級。此設定從靜態檔案(例如style.css?ver=1.0)中刪除版本查詢字串,並將其編碼為檔名(例如style-1-0.css)。
3.4 Minify CSS files-CSS檔案瘦身將刪除空格和註釋以減少樣式表檔案大小。
3.5 Combine CSS files-合併CSS檔案將所有檔案合併為一個檔案,這將減少HTTP請求的數量。如果您的站點使用HTTP/2,則不推薦使用。
Tips:這可能導致網站外觀異常!如果您在啟用此設定後發現網站上有任何錯誤,請再次停用該設定,網站即恢復正常。
3.6 Optimize CSS delivery-優化CSS交付消除了網站上阻止渲染的CSS,以縮短感知載入時間。這意味著您的頁面無樣式直接開始載入,這是Google PageSpeed Insights在“計算”頁面速度時要考慮的因素。
關鍵路徑CSS意味著您的頁面將在沒有其所有CSS樣式的情況下開始載入。這意味著載入時片刻會有點奇怪。
這就是所謂的FOUC(無格式內容的閃現)。為避免這種情況,您必須使用所謂的Critical Path CSS。這意味著頁面頂部內容的CSS必須直接放在HTML中,以避免頁面載入時的FOUC。
要生成可以使用的關鍵路徑CSS,你可以使用關鍵路徑CSS生成器工具.
3.7 Minify JavaScript files-JavaScript檔案瘦身刪除空格和註釋以減小JS檔案的大小。
3.8 Combine JavaScript files-合併JavaScript檔案將合併您網站的JavaScript資訊,以更少的JS檔案,減少HTTP請求。如果您的站點使用HTTP/2,則不推薦使用。
Tips:這導致網站載入異常!如果您在啟用此設定後發現網站出現錯誤,請再次停用該設定,網站將恢復正常。
3.9 Load JavaScript deferred-JavaScript延遲載入消除了網站上阻止渲染的JS,這可以縮短載入時間。這是Google PageSpeed Insights在“評分”頁面速度時要考慮的因素。
3.10 Safe Mode for JQuery-JQuery的安全模式通過將jQuery作為渲染阻止指令碼放置文件頂部載入,確保支援來自主題和外掛的內聯jQuery引用。
重要提示:儲存並測試!如果您發現網站載入出現問題,停用或者修改設定,直到網站載入正常。
4. 媒體設定
4.1 Lazy load images-懶載入圖片意味著影象將僅在他們進入(或即將進入)訪客視野時載入,即僅在使用者向下滾動頁面時載入。懶載入減少了HTTP請求數可以改善頁面載入時間。
(我有時會禁用影象的延遲載入,只是因為當啟用延遲載入時,指向延遲載入影象下方位置的錨連結會滾動到網頁的錯誤位置)
4.2 Lazy load iframes and videos-延遲載入iframe和視訊意味著iframe和視訊將僅在他們進入(或即將進入)視野時載入,即僅在使用者向下滾動頁面時載入。延遲載入減少了HTTP請求數可以改善載入時間。
4.3 Replace YouTube iframe with preview image-用預覽圖片替換YouTube iframe。如果您在網頁上有很多YouTube視訊,則可以顯著縮短頁面載入時間。
可以在單個頁面/文章上關閉懶載入(您可以在文章/頁面側欄中找到此設定)
4.4 Disable Emoji-禁用表情符號。應該被禁用,因為應該使用訪問者瀏覽器的預設表情符號,而不是從WordPress.ORG。禁用表情符號快取可以減少HTTP請求的數量,從而可以縮短載入時間。
4.5 WordPress embeds-WordPress嵌入視訊應該被禁用,因為它可以防止其他人嵌入您網站中的內容,也可以阻止您嵌入其他網站中的內容,並刪除與WordPress嵌入相關的JS。
執行上述操作,應該儲存並測試!如果您發現網站載入異常,請停用設定。
5. 預載入設定
5.1 Sitemap preloading-站點地圖預載入當快取生命週期已過期且整個快取已清除時,使用XML站點地圖中的所有URL進行預載入。
5.2 Yoast SEO XML sitemap-Yoast SEO XML站點地圖。WP Rocket將自動檢測由Yoast SEO外掛生成的XML站點地圖,您可以選中預載入選項。
5.3 Preload bot-預載機器人應該只在效能良好的伺服器上啟用使用。啟用後,您在網站上新增或更新內容後會自動觸發。如果這導致高CPU使用率或效能問題,請更改為手動。
當您編寫或更新新文章或頁面時,WP Rocket會自動清除該特定內容的快取以及與其相關的任何其他內容。preload bot將抓取這些URL以立即重新生成快取。
5.4 Prefetch DNS requests-預取DNS請求允許域名解析與實際頁面內容的獲取並行(而不是序列)。
您可以指定要預取的外部主機(例如//fonts.googleapis.com和//maxcdn.bootstrapcdn.com),因為DNS預取可以使外部檔案的載入速度更快,尤其是在行動網路上。
最常見的預取URL是:
- //maxcdn.bootstrapcdn.com
- //platform.twitter.com
- //s3.amazonaws.com
- //ajax.googleapis.com
- //cdnjs.cloudflare.com
- //netdna.bootstrapcdn.com
- //fonts.googleapis.com
- //connect.facebook.net
- //www.google-analytics.com
- //www.googletagmanager.com
- //maps.google.com
儲存設定並測試!如發現網站異常,請停用設定或者逐個啟用進行測試。
6. 高階規則設定
這些設定用於高階快取管理,通常用於排除電子商務網站中的購物車和結帳頁面。
6.1 Never cache URL(s) -永遠不要快取網址允許您指定永遠不會快取的頁面或文章的URL。
6.2 Never cache cookies-永遠不要快取cookie允許您指定Cookie的ID,當在訪問者的瀏覽器中設定時,應該阻止頁面被快取。
6.3 Never cache user agents-永遠不要快取使用者代理允許您指定永遠不會看到快取頁面的使用者代理字串。
6.4 Always purge URL(s)-始終清除URL可讓您指定每次更新任何文章或頁面時始終希望從快取中清除的URL。
6.5 Cache query strings-快取查詢字串允許您為快取指定查詢字串。
同樣地,應該在儲存該項設定後進行測試!如果網站載入異常,停用相關設定或者逐個設定啟用進行測試可行性。
7. 資料庫設定
本部分包含一系列設定,以進行清理和優化WordPress.
7.1 Post cleanup-文章清理將刪除修訂,自動草稿和已刪除的文章和頁面。刪除這些,除非您有必要保留舊版本的文章(或刪除的文章)。
7.2 Comments cleanup-評論清理將刪除垃圾評論和回收站評論。
7.3 Transients cleanup-瞬態清理刪除類似社交計數的儲存資料,但有時當瞬態過期時,它們會保留在資料庫中但可以安全刪除。
7.4 Database cleanup-資料庫清理優化您的WordPress資料庫表格。
7.5 Automatic cleanup-自動清理。我通常會在臨時基礎上進行清理,但您也可以安排WP Rocket執行資料庫的自動清理。
理想情況下,應該在執行清理之前備份資料庫,因為一旦執行了資料庫優化,就無法撤消它。
8. CDN設定
使用內容傳送網路(CDN)意味著為您提供的CNAME(s),對所有靜態檔案的URL(CSS,JS,影象)重寫。
8.1 Enable CDN-啟用CDN。如果您使用的是CDN,請啟用此功能。WP Rocket與大多數CDN相容,例如Amazon Cloudfront,MaxCDN,KeyCDN等。詳細瞭解如何使用帶有CDN的WP Rocket
8.2 CDN CNAME(s)。複製CDN提供商提供給您的CNAME(域)並將其輸入CDN CNAME。這將重寫您網站上所有靜態檔案的URL。
8.3 Exclude files-排除檔案允許您指定不應通過CDN提供的檔案的URL,比如部分外掛的靜態檔案。
使用上述配置功能,應該執行充分的測試!如果在使用過程中發現網站載入存在問題,請停用設定。
9. 附加元件-CLOUDFLARE設定
WP Rocket使您可以將Cloudflare帳戶與其附加功能整合在一起。
9.1 Global API Key。您將在Cloudflare帳戶的右上角找到API金鑰。只需轉到您的個人資料並向下滾動,即可找到Global API Key,將其複製並貼上到WP Rocket中即可。
9.2 Account Email。這是您用於Cloudflare帳戶的電子郵件地址。
9.3 Domain。這是您的域名,例如yourdomain.com。
9.4 Development Mode。暫時啟用您網站上的開發模式。此設定將在3小時後自動關閉。當您對網站進行大量更改時,這非常有用。
9.5 Optimal Settings。自動增強Cloudflare配置,以提高速度,效能等級和相容性。此選項可啟用最佳Cloudflare設定。
9.6 Relative Protocol。僅應與Cloudflare的flexible SSL功能一起使用。靜態檔案(CSS,JS,影象)的URL將使用//重寫,而不是http://或https://。
10. WP Rocket工具
10.1 Export settings-匯出設定允許您匯出WP Rocket設定以在其他站點上使用。
10.2 Import settings-匯入設定允許您匯入預先配置的WP Rocket設定。
10.3 Rollback-回滾如果新版本的WP Rocket對您造成了任何問題,則此工具可讓您還原到以前的版本。
為HTTP/2配置WP ROCKET
HTTP/2是對1999以來管理Web伺服器和瀏覽器之間通訊的HTTP的升級。HTTP/2通過更好的資料壓縮,多路複用請求和其他速度改進為更快的頁面載入鋪平了道路。
許多伺服器和瀏覽器都支援HTTP/2,大多數Web主機,現在均支援HTTP/2。你可以使用HTTP/2線上檢測工具檢測您的網站是否能夠使用HTTP/2。
如果您的站點能夠使用HTTP/2,請按照以下方法為其配置WP Rocket。
將所有CSS和JS檔案連線(組合)到儘可能少的檔案中不是HTTP/2的最佳實踐和WP Rocket建議在檔案優化選項卡設定不啟用檔案串聯.
WP Rocket建議不要勾選上述截圖的兩個合併CSS和合並JS的選框。有關更多資訊,請參閱這篇關於WP Rocket的文章.
如何在KEYCDN下使用WP ROCKET
使用KeyCDN設定WP Rocket非常簡單。(FYI KeyCDN,海外站點熱門內容分發網路服務商)
首先在KeyCDN中建立一個pull zone。然後去WP ROCKET外掛的CDN標籤,勾選 Enable Content Delivery Network 選項。
現在,更新”the Replace site’s hostname with:“欄位,其中包含您從KeyCDN儀表盤獲得的URL(在您建立的pull zone的“Zones > Zone URL” 下。該URL看起來類似於:lorem -1c6b.kxcdn.com )
或者,推薦的選項,使用您選擇的URL的 CNAME(例如https://static.wbolt.com)
哪些WEB主機可以使用WP ROCKET?
WP Rocket幾乎與所有伺服器相容。但是有些特別管理WordPress主機,可能不適用於WP Rocket。如果您的網站託管服務提供商未在下面列出,這並不意味著它與WP Rocket不相容。百分百確定的最佳方法是與您的伺服器提供商聯絡並詢問(注:國內的獨立VPS伺服器,理論上應該都可以安裝使用WP Rocket)。
- Kinsta:Kinsta僅支援WP Rocket 3.0版及更高版本。WP Rocket的頁面快取會自動禁用,以防止與Kinsta內建快取發生衝突。Kinsta是WP ROCKET官方合作伙伴。
- WP Engine:WP Rocket是WP Engine上唯一允許的快取外掛。WP Engine也是WP Rocket官方合作伙伴。
- SiteGround:WP Rocket與SiteGround的靜態,動態和記憶體快取相容。SiteGround是WP Rocket官方合作伙伴。
- A2託管:WP Rocket與A2 Hosting完全相容。A2 Hosting是WP Rocket的官方合作伙伴。
- WebHostFace:WebHostFace支援(並且是WP Rocket官方合作伙伴)。
- Savvii:Savvii支援(也是WP Rocket官方合作伙伴)。
- FastComet:為WordPress和WP Rocket提供專門優化的軟體包。 FastComet 是 WP Rocket 的官方合作伙伴。
- Bluehost Managed WordPress plans:該伺服器的Varnish配置破壞了WP Rocket的minification,因此您必須關閉Bluehost的Varnish,或關閉WP Rocket的minification功能。
- Cloudways WordPress Hosting:將WP Rocket的minification與Cloudways的Varnish一起使用時,必須在Cloudways應用程式設定中為Varnish建立排除規則。
- Flywheel:您必須聯絡Flywheel支援並要求他們啟用WP Rocket。
- HostGator Managed WordPress plans:WP Rocket不相容。
- Synthesis:W3 Total Cache已預先安裝在Synthesis上,但可以刪除並替換為WP Rocket。
- WebSavers.ca:WebSavers.ca是WP Rocket的官方合作伙伴。
閱讀有關相容WP Rocket的Web主機的更多資訊https://docs.wp-rocket.me/article/670-hosting-compatibility .
下載我的WP ROCKET配置檔案
如果您懶得重新設定WP Rocket,您可以嘗試我們提供的WP Rocket配置。您只需要下載WP Rocket配置檔案然後通過WP Rocket外掛的“工具”將其匯入即可。
注:別人的WP ROCKET配置檔案未必適合您的網站,即使使用別人的配置檔案匯入,您也需要對網站進行測試。如遇到網站載入異常,應該對每個配置進行調整。個人建議,參照此教程,逐個操作更靠譜。
3. WP ROCKET幫助和官方文件
如果您出於某種原因遇到WP Rocket相關問題,您可以訪問WP Rocket網站知識文件獲得大量有用的資訊。再說,購買外掛官方提供一年的技術支援,使用谷歌翻譯或者百度翻譯與官方技術聯絡也是一種奇妙的經歷。
以下是WP Rocket官網提供的一些比較有用的教程列表:
評論留言