网站性能优化利器：LightHouse全面检查各项指标，多种优化方案可选

检查网站性能过程

全局安装 lighthouse

npm install -g lighthouse


然后输入你的页面

lighthouse https://example.com


lighthouse 会自动生成 HTML 报告&＃xff0c;你也可以使用 JSON 格式。

生成报告如下&＃xff1a;

解读各项指标含义&＃xff1a;

1. FCP (First Contentful Paint)&＃xff1a;渲染第一个元素(文本、图片、canvas…)的时间点
2. SI (Speed Index)&＃xff1a;首屏展现时间
3. LCP (Largest Contentful Paint)&＃xff1a;渲染可视区域内最大内容元素的时间点
4. TTI (Time to Interactive)&＃xff1a;页面资源加载成功并能响应用户交互的时间点
5. TBT (Total Blocking Time)&＃xff1a;FCP到TTI之间,主线程被long task(超过50ms)阻塞的时间之和
6. CLS (Cumulative Layout Shift)&＃xff1a;累计布局偏移值

三个维度进行评估:

• [加载情况] : LCP
• [交互性] : FID
• [视觉稳定性] : CLS

改善建议&＃xff1a;

优化方案

主要以性能指标作为维度,主要分为以下几个点:

• 视觉稳定性 (Cumulative Layout Shift)
• 加载情况 (Largest Contentful Paint)
• TTI (Time to Interactive)
• TBT (Total Blocking Time)
• FCP (First Contentful Paint)

优化过程

1、自定义字体文件加载期间保持可见状态

斜体样式改善建议里提到使用CSS font-display属性确保自定义字体文件在加载期间可见.

这是因为网站下载自定义字体文件需要一段时间,而不同浏览器此时的行为是不同的.一些浏览器在加载自定义字体时会隐藏文字,这种称之为FOIT(Flash Of Invisible Text).而一些浏览器会显示降级字体,这种情况称之为FOUT(Flash Of Unstyled Tex).这两种行为会导致"字体闪烁问题",影响视觉稳定性 (CLS).

我的处理方法是直接设置font-display:swap;这个属性能确保字体在加载时间可见.虽然还是会引发FOUT,但是相比FOIT,FOUT对视觉稳定性的影响会小一些.

&＃64;font-face {font-family: &＃39;ping-fang&＃39;;src: url(&＃39;../font/Hello-World.otf&＃39;) format(&＃39;OpenType&＃39;);/* swap&＃xff1a;如果设定的字体还未可用&＃xff0c;浏览器将首先使用备用字体显示&＃xff0c;当设定的字体加载完成后替换备用字体 */font-display:swap;}


2、避免使用document.write()

使用document.write()会使页面内容的显示延迟数十秒&＃xff0c;这对于连接速度较慢的用户而言尤其成问题。因此&＃xff0c;Chromedocument.write()在很多情况下都会阻止执行&＃xff0c;这意味着不能依赖它。

我的办法是删除代码中document.write()的所有用法。如果用于注入第三方脚本&＃xff0c;请尝试使用异步加载。

3、最小化主线程工作

浏览器的渲染器过程将代码转换为用户可以与之交互的网页。默认情况下&＃xff0c;渲染器进程的主线程通常处理大多数代码&＃xff1a;它解析HTML并构建DOM&＃xff0c;解析CSS并应用指定的样式&＃xff0c;并解析&＃xff0c;评估并执行Javascript。

如上图所示&＃xff0c;Lighthouse标记了在加载期间使主线程保持忙于4秒钟以上的页面

我们的目标就在如何最大限度地减少主线程的工作&＃xff0c;可以从以下几个方面进行优化&＃xff1a;

脚本评估

• 优化第三方Javascript
• 消除输入处理程序
• 使用web workers

样式和布局

• 减少样式计算的范围和复杂性
• 避免大型&＃xff0c;复杂的布局

解析HTML和CSS

• 提取关键CSS
• 缩小CSS
• 推迟非关键CSS

脚本解析和编译

• 通过代码拆分减少Javascript负载
• 删除未使用的代码

垃圾收集

• 使用measureMemory()监视网页的总内存使用情况

4、避免大量的网络负载

大型网络有效负载与较长的加载时间高度相关。它们也使用户花钱&＃xff1b;例如&＃xff0c;用户可能需要为更多的蜂窝数据付费。因此&＃xff0c;减少页面的网络请求的总规模有利于你的用户在网站上的经验和自己的钱包。

Lighthouse显示页面请求的所有资源的总大小&＃xff08;以kib为单位&＃xff09;。

根据HTTP存档数据&＃xff0c;网络有效负载的中位数在1,700到1,900 KiB之间。为了帮助显示最高的有效负载&＃xff0c;Lighthouse标记了总网络请求超过5,000 KiB的页面。

降低有效负载大小目的&＃xff1a;
使总字节大小<1,600 KiB。此目标基于理论上可以在3G连接上下载的数据量&＃xff0c;同时仍实现10秒钟或更短的交互时间。

方法如下&＃xff1a;
1、将请求推迟到需要时再发送。有关一种可能的方法&＃xff0c;请参阅PRPL模式。
2、优化请求以使其尽可能小。
可能的技术包括&＃xff1a;最小化和压缩网络负载、对图像使用WebP而不是JPEG或PNG、将JPEG图像的压缩级别设置为85。
3、缓存请求&＃xff0c;以使页面在重复访问时不会重新下载资源。

5、减少Javascript执行时间

当Javascript执行时间超过2秒时&＃xff0c;Lighthouse将显示警告。执行时间超过3.5秒时&＃xff0c;审核将失败&＃xff1a;

如何加快Javascript执行 &＃xff1a;
1、 仅通过实现代码拆分来发送用户所需的代码。
2、缩小并压缩代码。
3、删除未使用的代码。
4、通过使用PRPL模式缓存代码来减少网络旅行。

6、避免链接关键请求

链的长度越大&＃xff0c;下载大小越大&＃xff0c;对页面加载性能的影响就越大。

Lighthouse报告了具有较高优先级的关键请求&＃xff1a;

如何降低关键的请求链的对性能的影响
1、尽量减少关键资源的数量&＃xff1a;消除它们&＃xff0c;推迟其下载&＃xff0c;将其标记为async&＃xff0c;依此类推。
2、优化关键字节的数量以减少下载时间&＃xff08;往返次数&＃xff09;。
3、优化剩余关键资源的加载顺序&＃xff1a;尽早下载所有关键资产&＃xff0c;以缩短关键路径的长度。