啟用 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」就能在設定裡將此工具啟用。

STEP 2

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