实践指南-前端性能提升 270% | 京东云技术团队

一、背景

当我们疲于开发一个接一个的需求时，很容易忘记去关注网站的性能，到了某一个节点，猛地发现，随着越来越多代码的堆积，网站变得越来越慢。

本文就是从这样的一个背景出发，着手优化网站的前端性能，并总结出一套开发习惯，让我们在日常开发时，也保持高性能，而不是又一次回过头来优化性能。

指标名称	优化前	优化后	提升
Lighthouse Performance 评分	29	81	279%
FCP（First Contentful Paint 首次内容绘制）	0.7s	0.7s
LCP（Largest Contentful Paint 最大内容绘制）	6.2s	2.5s	248%
TTI（Time to Interactive 可交互时间）	10.1s	2.1s	480%
Speed Index（速度指数）	5.6s	1.8	311%
TBT（Total Blocking Time 总阻塞时间）	820ms	120ms	683%

优化前后对比：

二、优化前

接下来就是介绍下优化前我们要做哪些事件：

1. 了解性能指标及测量工具

2. 分析需要优化的地方

1. 了解测量工具及性能指标

一开始我们只是感受到网站的页面打开时白屏时间较长，感觉性能是比较差的，那么具体有哪些性能指标需要去关注呢？

这里我使用的是 Chrome devtools 内置的Lighthouse，Lighthouse 是一种开源的自动化工具，用于提高 Web 应用程序的质量。

Lighthouse 会在一系列的测试下运行网页，比如不同尺寸的设备和不同的网络速度。它还会检查页面对辅助功能指南的一致性，例如颜色对比度和 ARIA 最佳实践。

打开 Chrome devtools Lighthouse 即可使用。

在比较短的时间内，Lighthouse 可以给出这样一份报告。

这份报告从 5 个方面来分析页面： 性能、辅助功能、最佳实践、搜索引擎优化和 PWA。像性能方面，会给出一些常见的耗时统计。