分析网站加载性能各项指标、Lighthouse工具的使用

        分析网站首次加载的性能可以通过查看多个关键指标来实现。以下是一些常见的性能指标以及如何分析它们：

如何分析网站首次加载的性能各项指标

1. 首次内容绘制（First Paint）：

   • 定义： 首次内容绘制是指浏览器第一次将像素呈现到屏幕上的时间。
   • 分析方法： 在 Chrome DevTools 或类似的开发者工具中，通过 "Performance" 面板查看时间轴。首次内容绘制通常在时间轴上显示为 "First Paint" 事件。

2. 首次有效绘制（First Meaningful Paint）：

   • 定义： 首次有效绘制是指页面的主要内容首次呈现给用户的时间。
   • 分析方法： 在开发者工具中查看时间轴，首次有效绘制通常会有对应的事件。Lighthouse 测试也会提供有关首次有效绘制的信息。

3. 首次字节时间（First Byte Time）：

   • 定义： 首次字节时间是指浏览器首次收到来自服务器的响应的时间。
   • 分析方法： 在网络面板（Network）中查看请求的时间线，找到第一个请求的起始时间。

4. 首次交互（First Interactive）：

   • 定义： 首次交互是指页面变得可交互的时间，用户可以与页面进行交互。
   • 分析方法： Lighthouse 测试报告中通常会提供有关首次交互的信息。在开发者工具的 "Performance" 面板中，查看时间轴并找到与首次交互相关的事件。

5. DOMContentLoaded 时间：

   • 定义： DOMContentLoaded 事件表示 HTML 文档完全加载和解析完成的时间。
   • 分析方法： 在开发者工具的 "Network" 面板或 "Performance" 面板中查看时间轴，DOMContentLoaded 通常在时间轴上有对应的事件。

6. 页面完全加载时间（Load Time）：

   • 定义： 页面完全加载时间表示页面上所有资源都加载完成的时间。
   • 分析方法： 在开发者工具的 "Network" 面板查看所有资源加载完成的时间，或者在 "Performance" 面板查看时间轴的结束时间。

7. 资源加载顺序：

   • 定义： 查看资源加载的顺序，了解哪些资源在首次加载时优先加载，哪些资源是异步加载的。
   • 分析方法： 在 "Network" 面板查看资源加载的时间线，并注意资源的加载顺序。

8. 白屏时间（白屏率）：

   • 定义： 白屏时间是页面开始加载到首次有像素呈现在屏幕上的时间。
   • 分析方法： 使用性能分析工具或 Lighthouse 测试报告中通常会提供关于白屏时间的信息。

通过综合分析这些性能指标，你可以更全面地了解网站首次加载性能的表现，并识别可能需要优化的方面。使用开发者工具、性能测试工具和分析工具，能够帮助你深入挖掘性能问题并进行相应的优化。

Lighthouse使用:

        Lighthouse 是一个由 Google 提供的开源工具，用于评估网站的性能、可访问性、最佳实践等方面。你可以通过 Chrome 浏览器的开发者工具或命令行使用 Lighthouse。以下是使用 Lighthouse 的简要步骤：

使用 Chrome 浏览器开发者工具：

1. 打开 Chrome 浏览器：

   • 打开你要测试的网页。

2. 打开开发者工具：

   • 右键点击页面上的任何位置，选择 "检查" 或使用快捷键 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（Mac）打开开发者工具。

3. 进入 Lighthouse 面板：

   • 在开发者工具中，切换到 "Audits" 面板。

4. 运行 Lighthouse：

   • 在 "Audits" 面板中，你会看到一个 "Run audits" 按钮。点击它，或选择需要测试的选项后点击 "Generate report"。

5. 查看报告：

   • Lighthouse 将执行一系列测试，并在报告中显示有关性能、可访问性、最佳实践等方面的分数和建议。

使用命令行：

1. 安装 Node.js：

   • 确保你的计算机上安装了 Node.js。你可以在 Node.js 官方网站 下载并安装。

2. 安装 Lighthouse：

   • 打开终端或命令提示符，运行以下命令安装 Lighthouse：

     npm install -g lighthouse

3. 运行 Lighthouse：

   • 在终端中运行以下命令以测试你的网站：

     lighthouse https://www.baidu.com

4. 查看报告：

   • Lighthouse 将执行测试，并在终端中输出结果，也会生成一个 HTML 报告文件。你可以在终端中查看输出，或者打开生成的 HTML 报告文件。

        Lighthouse 提供了详细的性能报告，包括各种指标、建议的改进措施以及对网站性能的评分。你可以根据报告中的建议进行优化，以提升网站的性能和用户体验。