Google Lighthouse已成为许多网站使用单一分数衡量其性能的事实上的工具：Lighthouse性能分数。 新版本Lighthouse 6.0现已在Chrome Canary，PageSpeed Insights和GSC Console中的NPM上提供。 到7月中旬，Lighthouse 6.0将在Chrome 84中向Chrome用户全面推出。 现在是时候通过Lighthouse 6.0分数审核确保您的站点为新版本做好准备了。
Lighthouse 6.0附带了新的和折旧的指标，以及用于计算性能得分的新加权公式。 这一新版本以及Google Page体验更新中宣布核心Web指标将被添加到Google的排名算法中,这些都是搜索巨头强调感知速度的明确迹象,即用户感知页面加载的速度。 用户认为您的网站加载的速度越快,您的排名就越高,您收到的转化率就越高。
您需要优化的六个Lighthouse指标
Google关心用户如何体验Web。 两个网站可能会完全同时完成加载，但根据内容在页面上的显示方式，其中一个网站的加载速度可能会更快。 虽然这两个网站同时完成加载，但谷歌将倾向于后者，即性能更快的网站。
Lighthouse 6.0得分基于六个以用户为中心的速度指标的加权平均值。 First Contentful Paint (FCP)，Speed Index (SI)和Maximum Contentful Paint (LCP)可测量感知的加载速度,并在网站第6版的Lighthouse得分中保持55%的总重量。 另外40%的得分是基于测量响应度的指标，这是影响用户对速度感知的另一个方面。 其中包括总阻塞时间(TBT)和交互时间(TTI)。 得分的最后5%基于测量视觉稳定性的指标，称为累积布局偏移(CLS)。
Lighthouse 5.7分数中的First Imingful Paint (FMP)和First CPU Idle (FCI)被更好的指标所取代，以用户为中心的角度衡量速度。 这些是Lighthouse 6.0中最大的Contentful Paint (LCP)和Total Blocking Time (TBT)。
| 灯塔5.7 | 重量 | 灯塔6.0 | 重量 |
|---|---|---|---|
| 第一个连续油漆(FCP) | 20% | 第一个连续油漆(FCP) | 15% |
| 速度指数(SI) | 27% | 速度指数(SI) | 15% |
| 第一个有意义的油漆(FMP) | 7% | 最大内容绘制 (LCP) | 25% |
| 第一个CPU空闲(FCI) | 13% | 总阻塞时间(TBT) | 25% |
| 交互时间(TTI) | 33% | 交互时间(TTI) | 15% |
| - | - | 累计布局偏移 (CLS) | 5% |
以下是审核网站以准备Lighthouse 6.0时应关注的六速度指标。 指标按页面加载时测量的顺序排列。
本文底部提供了一份简化的清单，其中包括您应力求实现的速度和每项指标的优化技术。
第一个完整的油漆
FCP标记用户可以在屏幕上看到任何页面内容的第一个点。 此内容包括文本，图像，图形或SVG文件。 FCP在Lighthouse 5.7中的体重为20%，但仅比Lighthouse 6.0分数高15%。
在上面的胶片中，第一页加载的FCP在0.6秒时测量。 这是内容首次出现在TheTieBar.com的主页上的时候,但你会注意到并非所有内容都可见。 这是第一个和最大的内容丰富的油漆之间的一个重要区别。 当显示以上折叠内容时，LCP在0.9秒时测量。
当您通过Lighthouse 6.0分数审核时,请确保您的页面平均FCPs为2秒或更少,因为这是指标的第75百分位数的阈值,谷歌认为这是快速的。 2到4秒之间的FCP被认为是中等速度，超过4秒的FCP下降到第50百分位数以下，被归类为慢速。
如果发现FCP加载太慢，可能是由于以下一个或多个原因造成的：
- 渲染阻止资源太多
- 大型CSS文件
- 缺少与第三方源站的安全连接
- 服务器响应时间长
- 多个页面重定向
- 未缓存的静态资源
- DOM大小过大
要优化您的FCP，请考虑以下事项：
- 内联关键资源，延迟非关键资源以及删除任何未使用的资源，以降低呈现阻止URL的影响。
- 从CSS中删除所有不必要的字符以缩小文件大小。
- 使用预连接建立与重要第三方来源的早期连接。
- 通过优化服务器的应用程序逻辑或升级服务器硬件以获得更多内存来缩短服务器响应时间。
- 避免超过1页的重定向。
- 使用HTTP缓存缓存静态资源。
- 总共少于1,500个节点，深度少于32个节点，父节点少于60个子节点，以减小DOM大小。
速度指数
SI测量页面加载的视觉进度，并计算绘制内容的速度的整体分数。 在Lighthouse 5.7中，SI的权重比网站的性能得分高27%。 在Lighthouse 6.0中，这是半降低的，影响了页面性能得分的15%。 谷歌仍然认为这是一个关键的感知指标,因为一个图像显示缓慢的页面可以被认为是杂乱的。
Lighthouse通过捕获浏览器中加载的页面的胶片并逐帧分析视觉进度来测量SI。 显示页面可见部分的平均时间决定SI。 此指标将因设备屏幕尺寸而异。
当您通过Lighthouse 6.0分数审核时，目标是4.3秒或更低的SI。 这一速度排在第75百分位数,被谷歌认为速度快。 SI在4.3至5.8秒之间的页面一般，而低于5.8秒的SI低于第50百分位数，被认为速度较慢。
SI时间较慢往往源于以下原因：
- 主线程上的加载时间超过4秒
- JavaScript执行时间超过3.5秒
- 较大的字体文件会导致不可见文本(FOIT)闪烁。
要缩短SI时间，请考虑以下因素：
- 实现代码拆分，删除未使用的代码并压缩代码，以减少主线程的负载和JavaScript执行时间。
- 确保文本在Webfont加载期间保持可见，以避免FOIT。
最大的连续油漆
LCP是Lighthouse 6.0中新增的一项新指标，在站点的性能得分中获得25%的权重。 LCP取代了Lighthouse 5.7的第一个有意义涂料(FMP)。 尽管这两个指标都衡量最大内容元素的显示时间，但FMP因产生不一致的结果而闻名，只能在某些Web浏览器中标准化。
LCP测量最大内容元素在屏幕上完全可见的时间。 测量的内容元素包括块级元素，图像(包括SVG文件中的图像)和视频。 对于电子商务网站来说，这是一个极为重要的指标，因为它标志着大多数用户认为页面已满负荷且更有可能购买的时间点。
在上例中，当主图像完全绘制时，LCP为0.9秒。 此指标捕获用户察觉页面已满载，但内容可能仍加载到折页下方的一个截然不同的时刻。
性能一流的网站，如Layer0 (现为Edgio)上的网站，可在1秒内交付LCP。 长达2.5秒的LCP被认为是快速的，在该指标中排在第75百分位数中。 2.5秒到4秒之间的LCP被认为是中等的,需要改进,超过4秒的LCP低于第50百分位数,被Google认为速度较慢。
慢速LCP通常源自以下一个或多个原因：
- 服务器响应时间慢
- JavaScript 和 CSS 的渲染阻塞
- 资源加载时间长
- 客户端呈现问题
如果在Lighthouse 6.0分数审核过程中发现LCP的速度低于所需的LCP，请考虑以下事项：
- 通过将流量路由到最近的可用CDN，缓存资产，提供HTML页面缓存优先服务以及及早建立第三方连接，优化服务器响应时间。
- 通过删除不必要的CSS，推迟非关键CSS和内联关键CSS来减少CSS。 通过压缩JavaScript文件缩短JavaScript阻止时间。
- 减少资源加载时间，优化和压缩图像和文本文件以及预加载重要资源。
- 通过使用服务器端渲染和预渲染优化客户端渲染。
总阻塞时间
三丁基锡化合物取代了Lighthouse 5.7的FCI，后者曾承受13%的重量。 在Lighthouse 6.0中，TBT测量页面响应速度，将占性能得分的25%。 TBT测量页面在实现可靠交互之前非交互性的严重性。
你知道这些痛苦的实例:你在等待页面加载,然后,它看起来已经准备就绪。 点击要查看的产品，但没有任何反应。 是否再次点击？ 这一等待期是众所周知的字面上造成的压力在消费者。 本质上，TBT是指消费者因页面非交互性而感到压力的时间长度。
资料来源：web.dev
通过计算显示的第一个内容元素(FCP)与用户可以完全与页面交互(TTI)之间的”阻止”时间总和(超过50毫秒的任务)来衡量此指标。 例如，在上图中，主线程中有五个任务正在执行，但其中只有三个任务超过50ms。 第一个是200毫秒，第二个是40毫秒，第三个是105毫秒。 TBT为(200+40+105) 345毫秒。
耗时超过50毫秒的任务将足以让用户注意到并感觉到页面迟缓或更糟，处于非活动状态，并导致用户离开。 为了避免这种情况，应将300ms以下的三丁基锡化合物(TBT)视为快速。300ms至600ms之间的TBT被认为是中等速度，需要改进。 慢于600毫秒的三丁基锡化合物下降到第50百分位数以下，被认为是缓慢的。
较长的任务通常由以下一个或多个原因引起：
- 阻止主线程250ms或更长时间的第三方代码
- JavaScript执行时间超过3.5秒
- 在加载期间，主线程正忙超过4秒
- 大量网络请求和大型传输规模
要改进此指标，请考虑以下几点：
- 使用脚本标记上的异步或延迟属性高效加载第三方JavaScript，建立与重要第三方源站的早期连接并使用延迟加载。
- 要加速JavaScript执行并减少主线程上的负载，请实现代码拆分，删除未使用的代码并压缩代码。
- 优化CSS和JavaScript以减少资源计数和传输大小。
交互时间
TTI是Lighthouse 5.7的第三个指标,但Google在Lighthouse 6.0中将其重量从33%降至15 %。 TTI是TBT的配套指标，用于衡量页面实现可靠或完全交互所需的时间。 当第一个内容元素显示，初始脚本(如果有)已加载时，Lighthouse认为页面具有可靠的交互性，并且可以在50毫秒内响应用户输入。
对于用户而言，缓慢的TTI可能会感觉页面处于非活动状态或损坏状态。 虽然页面看起来是交互式的,但实际上并不是因为主线程被阻塞(由TBT测量)。 当您对Lighthouse 6.0的网站进行审核时，请在5.2秒或更短的时间内将TTI视为快速。 5.2至7.3秒之间的TTI被视为中等速度，而低于7.3秒的TTI被视为缓慢，并将影响消费者留在现场的意愿。
如果您的Lighthouse 6.0得分审核显示TTI速度较差，则可能是由于以下一个或多个原因造成的：
- 有效负载大小较大，脚本解析时间较长
- 资源加载时间长
- 第三方代码阻止主线程250ms或更长时间
- 关键请求链
- 降低主线程速度和JavaScript执行时间
- 高资源计数或大传输大小
可以通过优化JavaScript来缩短TTI时间。 这包括：
- 减少和压缩JavaScript文件以减少有效负载大小和脚本解析时间。
- 预加载请求和/或添加预连接以缩短加载时间。
- 通过使用脚本标记上的异步或延迟属性以及使用延迟加载来高效加载第三方JavaScript。
- 通过减少关键资源的数量和优化剩余资源的加载顺序，降低关键请求链对性能的影响。
- 实现代码拆分，删除未使用的代码并压缩代码，以减少主线程的负载和JavaScript执行时间。
- 优化CSS和JavaScript以减少资源计数和传输大小。
累积布局偏移
CLS是Lighthouse 6.0中引入的第三个新指标，也是唯一一个没有取代Lighthouse 5.7中的任何指标的指标。 CLS占Lighthouse 6.0分数的最后5%，它测量视觉稳定性。
此指标衡量用户遇到意外布局偏移的频率。 您之前已经经历过这种情况：您即将点击一个产品，然后突然，您点击了页面上的其他内容，因为元素发生了变化。 这些体验可能相当烦人,并被认为是令人讨厌的用户。
CLS由页面整个生命周期内发生的每个意外版式偏移的所有单个版式偏移得分总和来衡量。良好的CLS低于0.1，在性能方面排名第75百分位数。 在0.1到0.25之间的CLS被认为是中等的,任何大于0.25的测量值都会低于第50百分位数,并且被谷歌认为是缓慢的。
如果您在Lighthouse 6.0分数审核过程中发现CLS不佳，可能是由于以下原因之一：
- 图像或视频会自动调整大小
- 延迟加载并显示大于或小于预期的字体
要改进此指标，请考虑以下几点：
- 在图像和视频元素上包括确切尺寸
- 避免弹出式广告或横幅
- 避免导致FOIT/FOUT的字体
灯塔得分显示Google对您网站的看法
页面的灯塔性能得分表示Google如何从速度角度看待页面。 Lighthouse 6.0中的每个指标都反映了Google在衡量用户对速度的感知方面的最佳尝试。 如果得分低于标准，则会被认为是缓慢的—不仅是用户，而且是搜索巨头本身，从而对收入和搜索引擎优化造成负面影响。
谷歌在搜索引擎结果页面上排名更快,排名更高。 除了搜索引擎优化，网站速度已被发现显著影响转化率和收入。 例如,亚马逊发现页面加载延迟1秒可能使公司每年损失160亿美元。
底线
这个最新版本的灯塔展示了搜索巨头对感知速度指标的重视。 Lighthouse 6.0中的评分指标尝试衡量访问者认为您的页面已满载的速度(即使它仍在后台运行进程)。
三个指标：第一个连续涂料，速度指数和最大连续涂料，衡量感知的加载速度，占您的性能得分的55%。 目标是2秒的FCP，2.5秒的LCP和4.3秒或更短的SI。
另有40%的性能得分基于衡量页面响应速度的感知指标。 其中包括总阻塞时间和交互时间。 快速的Lighthouse 6.0分数审核将显示TBT在300毫秒以内，TTI在5.2秒以内，或者用户会认为您的网站干燥。
最后,没有人喜欢文本或图像跳进和跳出屏幕。 累积布局偏移是Lighthouse 6.0审核中的第六个指标。 针对低于0.1的CLS测量值，您将获得其在绩效分数中体重的全部5%。
要获得一份简单的检查表，其中涵盖您在Lighthouse 6.0分数审核中应实现的速度，以及每个指标的优化技术，请填写以下表格。
