[分享] Cloudways WordPress 主機選擇、網站架設、與 Breeze 使用設定及網站快取效果之驗證教學

現在使用 WordPress 架設的獨立網站越來越多,網站架設完成之後,所遇到的第一個問題,便是優化網站的執行效能與速度。為什麼網站速度很重要呢?大家都知道這除了會影響網站給造訪者的瀏覽體驗之外,還有一個常被忽略的,即是網站速度也會影響到 Google 搜尋引擎對網站的 SEO (Search Engine Optimization) 排名。

[read more]

而影響到網站速度的兩個最主要因素則是網站所租用的虛擬主機效能,與使用網站快取外掛。筆者在架站前,特別在網路做了功課,這邊直接先講結論:建議新手架站直接選擇 Cloudways VPS 的 Linode 或 VULTR 主機。這兩個 Cloudways 主機的執行效能在網路評測結果都是數一數二的喔!!筆者在使用之後 (我是選 Cloudways Linode),不論在前台或後台的執行速度,都相當滿意!!相關的效能評測結果,可以參考下面兩篇文章:

文章一:2022 虛擬主機推薦-從 SiteGround 搬到 Cloudways 的 VPS,我回不去了!

文章二:6 個 WordPress 主機性能測速 + 價格完整評比 – 我只想推薦 – 2022 最新!

至於,租用 Cloudway 主機架設 WordPress 網站的教學,請參考下面網頁!!

文章三:如何在 Cloudways 上架設 WordPress 網站

依照上面步驟,網站架設完成之後,筆者在網站快取外掛的選擇,則是推薦使用同樣是 Cloudways 所推出的免費 WordPress 快取外掛 Breeze,畢竟,同樣是自家推出的快取外掛,在使用上,對自家主機的相容性與執行效能都相當不錯!!Breeze 的使用安裝與設定參考如下:

首先,在 WordPress 外掛頁籤,點選進入外掛安裝畫面。

在 WordPress 外掛頁籤,點選進入外掛安裝畫面
在 WordPress 外掛頁籤,點選進入外掛安裝畫面

請在搜尋欄位輸入 Breeze,搜尋 Breeze 並點選安裝快取外掛。

搜尋 Breeze 並點選安裝快取外掛
搜尋 Breeze 並點選安裝快取外掛

點選啟用及 Setting,進入 Breeze 設定畫面。

啟用並設定 Breeze 快取外掛
啟用並設定 Breeze 快取外掛

在基本設定中,開啟畫面中三個 Breeze 快取功能選項。

打開 Breeze 基本設定中的快取功能選項
打開 Breeze 基本設定中的快取功能選項

切換到檔案最佳化頁面,開啟畫面中五個 HTML 與 CSS 優化選項。

開啟 Breeze 檔案最佳化中的 HTML 及 CSS 優化選項
開啟 Breeze 檔案最佳化中的 HTML 及 CSS 優化選項

再進一步開啟螢幕下滑的三個 JavaScript 優化選項。

開啟 Breeze 檔案最佳化中的 JavaScript 優化選項
開啟 Breeze 檔案最佳化中的 JavaScript 優化選項

之後切換到 Varnish 頁面,打開 Varnish 自動清除功能。

打開 Vanish 選單中的自動清除功能
打開 Vanish 選單中的自動清除功能

離開 Breeze 設定畫面後,在 WorldPress 主畫面上方,下拉選單,點選畫面紅框處,可以完全清除 Breeze 的快取資料。(這個動作,在後面測速會用到)

註1圖:WordPress 畫面上方,可點選清除 Breeze 快取資料
註1圖:WordPress 畫面上方,可點選清除 Breeze 快取資料

接著,我們要確認一下 Breeze 快取外掛有無作動:請先依上面 “註1圖” 清除 Breeze 快取資料。

接著打開 Google Chrome 瀏覽器,點選螢幕右上角,打開無痕視窗,在無痕視窗輸入所要測試的首頁網址 (這邊是用 dr3c.net)。

點選瀏覽器右上方,開啟無痕模式頁面
點選瀏覽器右上方,開啟無痕模式頁面
在無痕模式下,打開要測試的首頁網址
在無痕模式下,打開要測試的首頁網址

在無痕視窗進入首頁後,按 F12 鍵,在 Element (元素頁面),程式碼最下方可以看到,在清除 Breeze 快取資料後 (見上方 “註1” 的圖),第一次開啟首頁時, Breeze 會針對首頁,進行靜態資料拍照成快取存在伺服器,並在程式碼最下方註解首頁快取資料的建立日期。

之後,如果有使用者再開啟相同首頁,系統則會將伺服器的快取資料直接傳給使用者,以加快網頁載入的速度。

按 F12 鍵,打開網頁程式碼監控畫面
按 F12 鍵,打開網頁程式碼監控畫面

接下來,我們就來實測一下網頁 “快取前後”,dr3c.net 這個首頁載入速度的差異。

首先,請先關閉所有已開啟的無痕網頁,接下來,再依照上方 “註1” 的圖,將 Breeze 快取資料再次完全清除乾淨。

再重新開一個新的無痕式頁面,之後,按 F12 鍵打開測試視窗,將測試視窗頁面切換到 Network (網路) 測試頁籤。準備進行首頁加載速度測試。

重新開啟無痕模式頁面,按 F12 鍵,切換到 Network (網路頁籤),打開測速監控畫面,準備測試網頁加載的速度
重新開啟無痕模式頁面,按 F12 鍵,切換到 Network (網路頁籤),打開測速監控畫面,準備測試網頁加載的速度

此時,在網址處輸入 dr3c.net,按下 Enter 鍵後,就會進行首頁資料加載,這時候,會同時看到 Network 速度監控頁面也同時進行加載速度監控。如下圖所示,由於這是清除 Breeze 快取後第一次載入首頁,所以,可看到下方紅框處顯示頁面的加載速度較慢 (耗費時間大於1秒)。(但於此同時,Breeze 已在伺服器建立首頁的快取拍照。)

測速畫面 1
測速畫面 1

接下來,我們再將剛剛已開啟的無痕頁面關閉。重新再開一個新的無痕頁面,同樣按 F12 打開 Network 監控頁面,在瀏覽器網址處輸入 dr3c.net,再次打開首頁並再次進行加載測速。這時候會發現,由於 Breeze 快取的作動 (由剛剛 “測速畫面 1” 伺服器產生的快取資料),所以,網頁加載速度大幅提升 (載入速度加快,時間小於 1秒)。

測速畫面 2
測速畫面 2

最後,同樣的動作,我們再重複確認一次。如下圖 “測速畫面 3” 與 “測速畫面 4” 所示,在 Breeze 快取前 vs. 快取後速度分別也是 >1 秒 及 <1 秒。 由此可見 Breeze 快取外掛對我們所架設網站的速度有明顯提升。

上面所使用到的測速手法,在我們對網站藉由外掛添加其他附加功能後,如果擔心影響到網站速度,都可以用同樣的手法進行確認。在此分享給大家!!

測速畫面 3
測速畫面 3
測速畫面 4
測速畫面 4

[/read]

Chenchzd

你好,我是3C博士,很高興有機會能在網路上與你分享3C產品、電腦網路應用,及生活理財資訊。

1 個回應

  1. 874表示:

    Every wweekend i userd to pay a vist tis web site,
    as i want enjoyment, since tgis this weeb site connations actually fastidioous funny
    dta too.

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *