启用 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 相关操作、设定方式请参考以下教程：

Cloudflare 架站者必备免费 CDN、DNS 託管服务设定教程，网站载入加速、节省流量防止恶意攻击
Cloudflare 免费 WordPress 外挂教程，一键为网站快速套用最佳化设定
Cloudflare 注册最便宜网域不加价，整合免费 CDN 和 SSL 凭证

STEP 1

开启 Cloudflare 控制台「Speed」功能，点选「Browser Insights」就能在设定里将此工具启用。

Cloudflare Browser Insights

STEP 2

启用后 Cloudflare 会自动在网页里加入一段 JavaScript 程序码收集资料，使用者不用进行任何操作，预设情况下会在所有子网域、所有路径开启测量，如果你是 WordPress 使用者建议可以将 wp-admin 也就是网站控制台路径加入「规则」以排除测量（此功能需要付费用户才能使用）。

Cloudflare Browser Insights