Breeze:功能強大、設定快速的 WordPress 快取外掛 [安裝教學]

前言:關於 Breeze 快取外掛

Breeze 由知名的雲端託管服務商 Cloudways 團隊所開發,是個輕巧、功能強大且方便使用的 WordPress 快取外掛。設定簡單容易上手,而且不僅支援 WordPress 之外,也支援 WooCommerce 購物車、或是多站台環境,功能非常強大。而介面也完全正體中文化了,在安裝使用上也沒有太大的語言門檻。

現在的 Breeze 版本 (2.0.31),無論你的網站在 Cloudways 或是其他家主機商,都可以放心安裝,所以不用擔心是否限定主機商的問題;而兩者最大的差距在於:如果你是 Cloudways 的用戶,Breeze 支援已預先安裝好的 Varnish 快取加速器,你可以得到更好的快取效能。

而黑洋自己使用起來的體驗,效能加速的確非常傑出,也正式在某些客戶案例的環境上,取代了過去常用的 LiteSpeed Cache 或是前陣子也覺得相當優秀的「WP Super Cache + Jetpack Boost」組合;重點在於 Breeze 目前仍是免費提供給大家使用,暫時沒有付費切割版本功能的計畫,光是這點就可以推薦大家安裝了。

話不多說,馬上進行設定上的說明。

Brezze

Cloudways

Breeze

由知名主機供應商 Cloudways 開發的快取
▲安裝數:超過30萬

1.基本設定

快取系統

【啟用】啟用之後,Breeze 才會正式生效,快取你的網站。

Gzip 壓縮、瀏覽器快取、跨站安全連結

【啟用】這三個項目,都建議啟用。

圖片延遲載入

【視需求決定】這就是圖片的 Lazy loading 功能。如果你的網站圖片很多 (例如攝影作品集),啟用「圖片延遲載入」功能後,當使用者捲動網頁到圖片所在的部分,圖片才會被讀取;因為使用者還沒看到的圖片不會被讀取,所以也能加快網頁載入的速度,並節省使用者和伺服器雙方的網路流量。

但用在網路頻寬、反應速度不佳的網站時,Lazy loading 很可能會造成使用者不耐等候而跳出網站,反而得不償失。所以請視你的網站速度、以及圖片的數量跟重要性,決定是否開啟本功能。

注意:當你啟用「圖片延遲載入」時,請移除相同功能的外掛,減少系統資源浪費、避免預期外的錯誤發生。

清除快取時間間隔、為已登入使用者進行快取

【維持預設值】沒有特別需求的話,請保持預設值就可以。

2.檔案最佳化

HTML設定 🞂 HTML最小化/壓縮

【啟用】啟用此功能,會移除網頁 HTML 碼內不必要的空白字元、跳位符號或是註解等,以減少檔案大小。這是最基本的加速要求,如果你的佈景主題在啟用「HTML 最小化/壓縮」後,發生版位錯亂的狀態,請先檢查佈景主題、相依的 Add-on 是否已經更新到最新版本。

但如果你的佈景主題已經超過半年以上沒有更新的話,在資安以及後續新功能支援的考量上,會建議你更換為其它持續更新中的佈景主題。

CSS設定 🞂 CSS最小化/壓縮

【啟用】同「HTML 最小化/壓縮」,這是最基本的加速要求;移除 CSS 碼內不必要的空白字元、跳位符號或是註解,以減少檔案大小,加快載入速度。

CSS設定 🞂 包含內嵌CSS

【建議啟用】基本上 CSS 都應該獨立於 HTML 網頁外,寫在專屬的 CSS 檔案中,以外部連結的方式供所有網頁取用;但在一些特殊的情形下,開發者會寫在網頁的 <head> 區段內,成為該網頁專用的 CSS。啟用「包含內嵌 CSS」會把 <head> 區段內的 CSS 碼壓縮,並成為外部連結的 CSS 檔。

但在某些佈景主題、外掛,或是你自己加入到 header.php 的 CSS,在啟用「包含內嵌 CSS」之後,可能會造成破版或是失效;如果發生以上問題,請用消去法、個別啟用/關閉進行除錯。

CSS設定 🞂 合併CSS

【建議啟用】啟用這個功能,會把全部已最小化/壓縮的 CSS 檔案合併為單一檔案,以減少 HTTP 要求,加速網頁開啟速度。

同「包含內嵌 CSS」,在啟用「合併 CSS」之後,可能會造成破版或是失效;如果發生以上問題,請用消去法、個別啟用/關閉進行除錯。

CSS設定 🞂 排除CSS

【視需求決定】把指定的 CSS 檔案從 [最小化] 及 [合併檔案] 這兩項功能中排除。這個功能在你找到於「最小化/壓縮、包含內嵌、合併」中發生錯誤的 CSS 檔案,可以優先排除,使其獨立存在後,就可能順利啟用上述的功能了。

JS設定 🞂 JS最小化/壓縮

【啟用】同「HTML、CSS 最小化/壓縮」,這是最基本的加速要求;移除 JavaScript 碼內不必要的空白字元、跳位符號或是註解,以減少檔案大小,加快載入速度。

JS設定 🞂 包含內嵌JS

【建議啟用】同「包含內嵌 CSS」。如果遇到破版或是特效失效,請用消去法、個別啟用/關閉進行除錯。

JS設定 🞂 合併JS

【建議啟用】同「合併 CSS」。如果遇到破版或是特效失效,請用消去法、個別啟用/關閉進行除錯。

JS設定 🞂 排除JS

【視需求決定】跟「排除 CSS」一樣,把不需要被「最小化/壓縮、包含內嵌、合併」的 JS 檔案優先排除。

JS設定 🞂 延遲內嵌JS指令碼、延遲載入全部 JavaScript

【視需求決定】用意也在於減少 HTTP 要求,用不到的 JS 檔就晚點下載。但 JS 的用途很多,無論是前台會員登入、到各種效果,都可能會用到 JavaScript 檔;建議每開啟一項設定,都要測試網站各項功能、版面是否正常。

3.預先載入

預先載入網頁字型

【維持預設值】沒有特別需求的話,請保持預設值就可以。

預先載入連結

【啟用】當使用者的滑鼠游標停在連結上一陣子,網站便會提前建立快取,會讓使用者點擊連結後開啟頁面更加快速。

DNS 要求預先擷取

【視需求決定】如果你有埋入 Google Analytics、Google Tag Manager、Google Fonts、Facebook 像素的話,可以預先解析這些分析碼的網域,加速網站開啟;但不要把所有第三方資源的網址提前解析,這樣會無端增加太多流量負載。我有使用 GA、Google Font、GTM,所以會輸入這三個:

//www.googletagmanager.com
//fonts.gstatic.com
//analytics.google.com

4.進階設定

永不進行快取的網址、快取查詢字串

【維持預設值】沒有特別需求的話,請保持預設值就可以。

停用 Emoji 表情符號

【建議啟用】只要你不使用 WordPress 預設的顏文字 Emoji 符號的話,可以停用 Emoji,減少無謂的資源導入。

伺服器本機代管

【視需求決定】啟用這個選項,你可以選擇地把:Google Fonts、Google Analytics、Facebook Pixel、Gravatars 的資源檔案下載到你的網站伺服器 (預設儲存目錄:uploads/breeze/service-name/ ),以後網站開啟這些資源的時候,就是從你的伺服器存取、而不是從 Google 或是 Facebook 存取。

如果沒有特別需求的話,建議先不要開。

5.HEARTBEAT API

控管Heartbeat

【啟用】允許 Heartbeat 受到控管,可以節省一些伺服器資源。

Heartbeat前端

【啟用】設定為每 3 分鐘。

Heartbeat內容編輯器、Heartbeat後端

【啟用】設定為每 5 分鐘。

6.資料庫設定

這邊提供了資料庫清理的功能,可以針對以下的項目進行資料庫最佳化:

  • 自動儲存的草稿:從資料庫移除全部文章/頁面的自動草稿。
  • 全部暫時性選項:從資料庫刪除到期及使用中的選項暫存資料。
  • 到期的暫時性選項:從 WordPress 資料庫刪除到期的暫存性選項。
  • 文章中繼資料中的 oEmbed:從資料庫的文章中繼資料中移除 oEmbed 快取。
  • 最佳化資料庫:嘗試最佳化網站資料庫中的全部資料表。
  • 文章內容修訂:從資料庫移除全部文章/頁面的內容修訂。

7.CDN

啟用 CDN

【視需求決定】Breeze 也支援 CDN,如果你有以下的 CDN,可以考慮啟用這個功能:

  • MaxCDN
  • KeyCDN
  • Amazon CloudFront

8.Varnish

自動清除 Varnish 快取

【視需求決定】如果你的主機供應商不是 Cloudways,請關閉此功能。

如果你的網站架在 Cloudways (全線產品預設支援 Varnish);或是有 VPS 主機或是自架伺服器,安裝並成功啟用 Varnish ,就可以啟用它。

參考資料

How to Use Varnish at Cloudways

本知識庫文章介紹如何在 Cloudways 平台上安裝和設定 Varnish 作為最佳化堆疊的一部分。
https://support.cloudways.com/en/articles/5496342-how-to-use-varnish-at-cloudways
Scroll to Top