通过调试慢速网站来衡量页面速度很重要。
所有 Chrome 浏览器都有内置工具，可帮助解决页面运行缓慢且性能不佳的原因。
基于 Chrome 和 Firefox 的浏览器的伟大之处在于，它们可以通过工具进行扩展，使故障排除站点变得快速和容易。
Chrome 和 Firefox 都支持浏览器插件。
Firefox 将它们称为附加组件，在 Chrome 生态系统中，它们称为扩展。
浏览器扩展和附加组件以根据用户需求定制的方式扩展浏览器的功能。
为什么使用 Page Speed 浏览器扩展
像 Chrome Dev Tools 这样的基于浏览器的调试器是工具的集合，就像一个工具箱。
如果您只想要一个工具，那么您就不走运了，因为浏览器会一次性提供整个集合。
这意味着发布者需要首先学习如何浏览所有不同的菜单、选项卡和屏幕，其中许多提供的工具不一定是您可能想要的概述。
这就是为什么扩展是在浏览器中使用内置故障排除工具的有效替代方案。
您可以简单地选择您想要的确切工具并跳过学习曲线，以便在您需要它们时获得您真正需要的指标。
适用于 Chrome 和 Firefox 的 Google Lighthouse 扩展
Lighthouse 是一个很好的工具，可用于获得易于理解的网页性能概览，并可选择更深入地挖掘诊断反馈和建议以加快网页速度。
有一个独立的 Google Lighthouse 网页，但您必须复制要获取数据的页面的 URL，然后导航到 Lighthouse 工具。
使用 Lighthouse 扩展，只需单击一个按钮即可使用该工具的全部功能。
您只需单击扩展图标，然后单击蓝色的生成报告按钮。
Lighthouse 扩展将生成一个新的浏览器选项卡并生成完整的 Lighthouse 报告。
Google Lighthouse 浏览器扩展截图，2022 年 3 月
新网页将在 Lighthouse 生成报告时显示等待屏幕。
Google Lighthouse 等待屏幕截图，2022 年 3 月
Lighthouse 页面的顶部有网页的数字分数。
Google Lighthouse 概览截图，2022 年 3 月
而且，如果您向下滚动，您可以看到有助于诊断和解决问题的深入数据。
您所要做的就是点击链接以获取有关问题是什么的更多信息以及如何解决这些问题的建议。
2022 年 3 月 Google Lighthouse 整页报告的屏幕截图
Google 为 Chrome 和 Firefox 开发了 Lighthouse 版本。
页面加载时间浏览器扩展
适用于 Chrome 和 Firefox 的页面加载时间浏览器扩展提供了一个高度准确的页面加载指标，因为它使用了导航时间 API，该 API 在 Mozilla 开发人员页面上对导航时间 API 进行了描述。
该浏览器扩展已安装超过 100,000 次，并获得 258 次评分。
安装后，您所要做的就是访问一个页面并查看浏览器右上角的页面加载时间图标。
该图标会自动报告下载网页所需的时间。
页面加载时间浏览器扩展图标
单击该图标会显示有关各种因素的更多详细信息，这些因素可以更完整地说明页面下载速度如此之快或如此缓慢的原因。
页面加载时间浏览器扩展详细信息的屏幕截图，2022 年 3 月
正如您在上图中所见，页面加载时间浏览器扩展显示了以易于理解的格式组织的惊人数量的信息。
详细报告显示由重定向引起的延迟、DNS 的响应时间和连接时间。
该报告还计算从网页请求开始的响应时间以及到完成所经过的时间。
对于脚本执行的时间、内容的加载以及页面最终加载所用的时间，都有精确的测量。
这是以易于理解的方式显示的大量信息。
这是 Chrome 的页面加载时间扩展和 Firefox 的加载计时器插件。
性能分析器
Chrome 浏览器的性能分析器扩展类似于页面加载时间浏览器扩展，只是它在其涵盖的内容上更进一步。
它使用资源、导航和用户计时 API
此扩展程序生成彩色饼图，以提供各种指标的可视化表示，例如按域的请求，并在方便的瀑布图中提供导航时间 API 信息，以可视化呈现时间。
根据描述：
“Performance-Analyser（又名 Performance-Analyzer）有助于通过资源、导航和用户计时 API 分析当前页面——立即按类型、域、加载时间、标记等查看请求。”
页面大小检查器
Chrome 的页面大小检查器扩展特别有用，因为它提供了各种指标的快照，包括对字体提出了多少请求以及下载的未压缩大小是多少。
使此扩展程序脱颖而出的是易于理解的界面以及以下网页资源的字节大小：
- HTML
- JS
- CSS
- 图片
- 阿贾克斯
- 字体
Chrome 浏览器扩展程序还提供以秒为单位的下载时间，以便在页面上触手可及的快速方便地概览页面速度指标。
Checkbot：搜索引擎优化、网络速度和安全测试员
此扩展聚合了与 SEO 相关的多个工具。
这个扩展的有趣之处在于它提供的数据可以帮助更好地理解为什么网页的下载时间与下载时间一样长。
该插件报告以下变量：
- 文件缩小。
- 网络压缩信息。
- 文件缓存。
- 渲染阻塞 CSS 和 JavaScript。
- 重复的 CSS 和 JavaScript。
- 过多的内联 CSS 和 JavaScript。
- 重定向和链接重定向。
以上所有数据点对于理解可能需要修复的问题非常有用。
作为奖励，Chrome Checkbot: SEO, Web Speed & Security Tester 扩展还提供各种与 SEO 相关的数据，我最喜欢的一个是安全标头数据，它可以告诉您网站是否由于缺少安全标头而不安全。
Page Speed 浏览器扩展
页面速度浏览器扩展对出版商和开发人员非常有用。
它们可以帮助您立即快速识别问题，而无需打开另一个网页，然后将 URL 粘贴到另一个网站上。
页面速度诊断可以在您访问网站时自动或单击按钮进行。
