大家都知道 Google 今年已将网站使用体验核心指标（Core Web Vitals）列为搜寻排序因素之一，也就是说管理者需要努力让网站三项指标：LCP、FID 和 CLS 维持在良好状态，因此除了速度也要考量到各种网页元件放置，透过不断修改调整和测试来使浏览者获得更好的体验，如果是 Cloudflare 使用者不妨开启「启用 Cloudflare Browser Insights 收集网站 Web Vitals 和效能指标」功能来分析数据，Google 自家提供的 PageSpeed Insights 也能在输入网址后进行检测并获得相关数据表现。
本文要推荐「WebPageTest」是一个相当知名的免费网站测速工具，我在「16 个免费网站测速工具，分析网页效能表现」一文有简单介绍，透过这项服务可从全球 30 个国家节点测试网站速度，而且可选择 25 种不同浏览器（包括智慧型手机、平板电脑），或是设定不同的连线速度、桌面浏览器尺寸、重新执行测试次数等等，当然更重要的是它还有检测 Web Vitals 功能，可以协助改善网站的体验核心指标分数。
WebPageTest 检测结果会将几个主要项目以英文和颜色评分，它显示资讯量相当庞大，例如在效能方面测试结果、以 CrUX（Chrome User Experience Report）测得 FCP、LCP、CLS 和 FID 状态、几次反覆检测的瀑布图等等，可能需要花点时间仔细研读、找出改善网站的方法。
对开发者来说在线测试工具确实解决了很多的问题，而且几乎是一站包办所有功能，非常实用。
WebPageTest
https://www.webpagetest.org/
使用教程
STEP 1
开启 WebPageTest 预设是选择进阶测试功能，输入要检测的网页网址即可测试，如果你只想简易测试或仅测试网页体验指标也有对应的选项。
STEP 2
从「Test Location」选择测试节点，节点遍及欧洲、非洲、中东、亚洲、大洋洲，大部分节点都是使用亚马逊 AWS EC2 或 Google GCE 主机，有些则是 Microsoft Azure 和腾讯主机，比较特别的是如果需要实体机器最底下也有 Mac mini 和 Android 装置可以选择。
预设情况下会使用桌面版 Chrome 浏览器进行测试，从选项选择其他的浏览器，像是 Firefox、Brave 或模拟为行动装置 Google Piexel、Nexus、Samsung Galaxy、iPhone、iPad 等等，此外，进阶设定里有连线频宽、桌面浏览器尺寸、测试次数和重複检视等选项，测试时有特殊需求就能自订项目。
STEP 3
将测试的页面网址贴上、点选「Start Test」按钮开始进行测试，测试时需要一段等待时间，预设情况会重複测试三次以获得不同的测试结果。
因为检查项目会显示的结果非常多，在这里就只简单介绍几个重点（或许是对我比较有用的部分）。
WebPageTest 会将各个测试项目以字母 F 至 A 评级，例如安全评分、FTTB、Keep-alive、压缩传输、图片压缩、快取静态内容和内容传递网络（CDN），就能从总览先找出得分较低的项目进行最佳化。
STEP 4
从 CrUX 得到的真实使用者资料可以反应出 FCP、LFP、CLS 和 FID 网站使用体验核心指标得分，下方瀑布图会有载入网页时每个元件网址、文件名称、时间和回应结果，有助于找出延迟载入速度或造成网页问题的元件。
点选每个元件会有详细资讯，这些纪录对于要找出问题、排除错误非常有帮助。
STEP 5
切换到「Web Vitals」分页会有 Google Web Vitals 三项指标的诊断资讯，如果出现绿色以外的得分表示结果不佳，可能需要花点时间好好检视一下，好处是 WebPageTest 也会在下方呈现相关结果，虽然不会明确提示网站开发者应该怎么解决，但还是能从网站提供的资讯线索找到可能的问题癥结点。
STEP 6
另一个内容项目会将网页的各种文件类型、请求数、大小列出，搭配底下的连线视图就能找出那些物件可能对网页开启速度造成影响（或是让页面容量变得太肥大），也是在最佳化网站时会用到的功能，或是以网域名称（Domains）列出网页的所有元件功能，会显示对于不同网址发送的请求数和文件大小，从上方选单列可以切换不同的检测项目结果，大家可以自己动手试试看。
值得一试的三个理由：
- 从全球 30 个国家节点测试网站速度，可选择 25 种不同浏览器
- 将主要检测项目以英文和颜色评分，也可测得网站使用体验核心指标分数
- 检测结果非常详细完整，有助于网站开发者找出问题、排除错误
还没有评论，来说两句吧...