如何使用lightHouse进行前端性能分析

Posted 2023-03-16

参考技术A

Lighthouse 是一个开源的自动化工具，用于改进网络应用的质量。只要为 Lighthouse 提供一个需要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面的性能报告。

三种安装方式

1. 安装命令：# 注意：Lighthouse需要 Node 10 LTS (10.13) 或更高的版本.

2. 运行Lighthouse：

3. 以百度为例，输入下面的命令即可：

完成后，可以查看html报告

这个意思就是某处文字背景色和文字颜色对比度不够，对于视障用户可能不好区分。

搜索引擎在索引网站内容时也需要知道网站适用的语言,从而更好地为用户返回搜索结果
改为：

当设置rel="noopener"时chrome会在独立的进程中打开新页面,同时会阻止window.opener，因此不存在跨窗口访问。

优化后

这是 Lighthouse 目的：它能识别和修复，影响我们网站的性能、可访问性和用户体验的常见问题。

面试官：如何提升应用的 Lighthouse 分数

Lighthouse 是用于测试网页性能工具最有用的技术之一。 它具备了自动化，并可以测量网站的可访问性和 SEO。 更重要的是，它目前是开源的并且可以免费使用。 同时，它可以用来测试渐进式 Web 应用程序。

今天，性能不仅仅是渲染应用程序所需的时间。 一些不良的体验带来的多米诺骨牌效应更会损害你的应用程序。

速度如何影响您的应用程序的性能？

你是否知道自 2010 年以来 Google 一直在关注网站的访问网络速度排名吗？

• 2010 年，Google 宣布将在桌面设备上的用户搜索排名算法中考虑页面访问速度。

• 2017 年 12 月，谷歌转向“移动优先”方案，然后在 2018 年 1 月，它开始使用页面访问速度作为移动搜索的排名因素。

• 2020 年 5 月，谷歌宣布他们将衡量整体页面体验，并将在其排名算法中使用它。 页面体验基于许多因素，包括：加载性能、交互性的首次输入延迟、用于视觉稳定性的累积布局移位（CLS）、移动友好性，HTTPS，是否含有侵入性的插页式广告。

同时，你是否知道应用程序的性能对用户体验，甚至收入的巨大影响吗？ 以下是谷歌给出的一些证据：

• 如果加载时间超过 3 秒，53% 的移动网站访问者会离开网站

• 在 5 秒内而不是 19 秒内加载的网站，可访问性提高了 25%

• 4 个顶级移动网站中有 3 个加载时间超过 10 秒

• 在 5 秒内而不是 19 秒内加载的网站的收入，增加了 2 倍

但别担心，我