当我们厌倦了又一个又一个需求的发展时，很容易忘记注意网站的性能。当我们到达某个节点时，我们突然发现，随着越来越多的代码积累，网站变得越来越慢。
本文始于此背景，并开始优化网站的前端性能，并总结了一系列开发习惯，以便我们可以在日常开发期间保持高性能，而不是回顾并再次优化性能。
让我们首先看一下优化结果，评级的总得分增加了279％：
估计指标名称之前和之后
分数
29
81
279％
FCP（第一个内容图）
0.7s
0.7s
LCP（最大内容图）
6.2s
2.5s
248％
TTI（交互式时间的时间）
10.1s
2.1
480％
（速度指数）
5.6s
1.8
311％
TBT（时间总阻止时间）
683％
优化前后的比较：
2。优化之前
接下来，让我们介绍在优化之前需要做的事件：
了解性能指标和测量工具
分析需要优化的位置
1。了解测量工具和性能指标
一开始，我们只是觉得网站的白色屏幕时间很长一段时间，而且性能相对较差。那么应该关注哪些具体的性能指标？
在这里，我正在使用内置，这是一种开源自动化工具，用于提高Web应用程序的质量。
网页将在一系列测试中运行，例如不同尺寸的设备和不同的网络速度。它还可以检查页面的一致性，即可访问性指南，例如颜色对比和ARIA最佳实践。
打开并使用。
这样的报告可以在相对较短的时间内给出。
本报告分析了5个方面的页面：性能，可访问性，最佳实践，搜索引擎优化和PWA。在绩效方面，将提供一些常见的耗时统计数据。
1.1
分数统计数据包括以下指标：
1.1.1 FCP
FCP测量浏览器在用户导航到页面后渲染第一个DOM内容所需的时间。页面上的图像，非白色元素和SVG被视为DOM内容。什么都不包含。
1.1.2 LCP
当在屏幕上呈现视口上最大的内容元素时，LCP测量。这类似于用户可见页面的主要内容的时间。
应该注意的是，LCP计算是一个动态过程，下图中的最后一张图片是该页面中最大内容绘制的元素。
1.1.3 TTI
TTI衡量页面完全交互所需的时间。
TTI如何计算？下图表明，时间轴首先扩展到搜索一个安静的窗口，其向前时间至少为5秒钟（安静的窗口是指不超过两个网络获取请求的时间），然后在沿时间线反向安静的窗口之前搜索最后一个长的任务。如果找不到长时间的任务，则执行将在FCP步骤中停止。 TTI是安静窗口之前最后一项漫长任务的结束时间。如果找不到长时间的任务，它将与FCP值相同。
1.1.4
衡量页面加载过程中直观显示内容的速度。首先，捕获浏览器中页面加载的视频，并计算帧之间的视觉进度。
1.1.5 TBT
TBT测量该页面无法响应用户输入的总时间（例如，鼠标点击，屏幕点击或键盘按下）。
通过在时间和时间之间添加所有长任务的阻止部分来计算总和。任何需要超过50毫秒的任务都是一项漫长的任务。
50毫秒后的时间是阻塞部分。例如，如果检测到70毫秒长的任务，则阻塞部分将为20毫秒。
下图中浅红色区域中的时间之和是此页面的TBT分数。
1.2最佳实践
用于检测Web应用程序的整体代码健康，包括是否包括文档类型，图像纵横比是否正确，等等。
1.3 SEO
用于检测搜索引擎对网页内容的理解水平。
2。分析需要优化的内容
了解关键性能指标后，您可以衡量当前网站的性能。
上面的综合分数非常低，我就在哪里开始优化提出了建议。