啟用 Cloudflare Browser Insights 收集網站 Web Vitals 和效能指標

啟用 Cloudflare Browser Insights 收集網站 Web Vitals 和效能指標

為了讓網站往好的方向成長,平常就要持續實驗、調整然後分析來找出可以最佳化的項目,維持網站內容新鮮度也很重要,就我的經驗來說我和大部分站長一樣都會透過 Google PageSpeed Insights 檢測網站評分,參考結果提供的說明進行調整,或是使用 Google 「Web.dev」協助開發者打造出更現代化網頁,其實追求分數高低沒有什麼實質意義,反而是解決網站已知問題較有幫助,畢竟每個案例都大不相同,對其它網站有用的最佳化方式也不一定適合自己。

會提到網站最佳化是因為接下來要介紹 Cloudflare 的「Browser Insights」功能,這是 Cloudflare 在去年生日週活動(Birthday Week)推出的工具,免費提供給 Cloudflare 所有方案使用者,簡單來說,從控制台開啟此功能後會自動在每個 HTML 頁面加入一段 JavaScript 程式碼,Browser Insights 就會開始收集即時資訊,以圖表方式顯示出網頁在真實世界的效能指標。

Browser Insights 其實我很早以前就在網站啟用,會想寫這篇文章大力推薦的原因在於近期更新讓這項功能可以分析 Google 的 Core Web Vitals 相關指標,包括:最大內容繪製(Largest Contentful Paint,LCP)、首次輸入延遲(First Input Delay,FID)和累積版面配置轉移(Cumulative Layout Shift,CLS),對於要改善網站來說很有幫助。

Google 宣布最快在 2021 年就會將 Core Web Vitals 列入搜尋排名因素,也是少數 Google 對外公開說明的演算法走向,重要性不言可喻,使用者透過 Browser Insights 就能收集、分析網站上的指標分數,如果想進行網站最佳化的朋友記得善用這項功能(當然前提是你必須使用 Cloudflare 服務),有助於找出網站問題。

順帶一提,之前我介紹過 Simple Ops 網站效能監測服務也可監測 Web Vitals 相關數值,不過有些項目必須付費升級才能使用,也是一個相當不錯的選擇。如果想知道網站的「網站使用體驗核心指標」表現也可開啟 Google Search Console ,目前已經可以查看相關報表。

Cloudflare
https://www.cloudflare.com/

Introducing Browser Insights
https://blog.cloudflare.com/introducing-browser-insights/

使用教學

關於 Cloudflare 相關操作、設定方式請參考以下教學:

STEP 1

開啟 Cloudflare 控制台「Speed」功能,點選「Browser Insights」就能在設定裡將此工具啟用。

Cloudflare Browser Insights

STEP 2

啟用後 Cloudflare 會自動在網頁裡加入一段 JavaScript 程式碼收集資料,使用者不用進行任何操作,預設情況下會在所有子網域、所有路徑開啟測量,如果你是 WordPress 使用者建議可以將 wp-admin 也就是網站控制台路徑加入「規則」以排除測量(此功能需要付費用戶才能使用)。

Cloudflare Browser Insights

STEP 3

依照說明 Browser Insights 只會顯示頁面載入量 10% 的資料,如果一開始收集的資料量不足,可能要稍候回來才看得到報告。

從 Browser Insights 的「Core Web Vitals」就能看到最大內容繪製(LCP)、首次輸入延遲(FID)和累積版面配置轉移(CLS)相關資訊,會分為三種等級:良好、需要改善和不良,分別反應在那些網址上。

Cloudflare Browser Insights

STEP 4

從右上角選擇要呈現的資料時間區間,預設為最近 24 小時,可調整為最近 30 分、6 小時、12 小時、最近一週或最近一個月,也能依照需要自定顯示的時間區段。

Cloudflare Browser Insights

也可以設定要顯示多少個項目。

Cloudflare Browser Insights

STEP 5

除了以網址顯示 Core Web Vitals 狀態,也能選擇瀏覽器、作業系統或國家,利用「篩選條件」方式加入特定國家或網址就能快速交叉比對找出問題,整體來說操作彈性很大,當然這些資訊在收集上也很輕鬆,不需額外手動設定。

Cloudflare Browser Insights
Cloudflare Browser Insights

STEP 6

另一項 Browser Insights 原有功能「Page Metrics」會收集網頁指標,以圖表顯示載入時間、解析時間、執行 JavaScript 所花費的時間等等,還能依照網頁載入量顯示熱門國家,就能得知網頁在特定國家載入速度是否提供好的使用者體驗。

Cloudflare Browser Insights

值得一試的三個理由:

  1. Cloudflare 提供 Browser Insights 功能收集網站效能資訊
  2. 自動在網頁加入 JavaScript,可自訂測量規則
  3. 收集分析網站使用體驗核心指標(Core Web Vitals)
分享本文