Home Blogs Lighthouse 6.0评分审核:准备网站的清单
Applications

Lighthouse 6.0评分审核:准备网站的清单

About The Author

Outline

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 Experience更新中的Google排名算法中将添加Core Web Metrics的公告 ,都是搜索巨头强调感知速度的明显标志——用户感知页面加载的速度。 用户对您的网站加载的感知越快,您的排名越高,您将获得的转化率也越高。

您需要优化的六个Lighthouse指标

Google关注用户如何体验Web。 两个网站可能同时完成加载,但一个网站的加载速度可能会更快,具体取决于页面上的内容显示方式。 当两个网站同时完成加载时,Google会青睐后者——一个具有更快感知性能的网站。

Lighthouse 6.0分数基于六个以用户为中心的速度度量标准的加权平均值 。 First Contentful Paint (FCP),Speed Index (SI)和最大Contentful Paint (LCP)测量感知的负载速度,并在版本6中的网站Lighthouse得分中保持55%的总重量。 另外40%的分数基于衡量响应度的指标,这是影响用户速度感知的另一个方面。 其中包括(TBT)的总阻止时间和交互(TTI)的时间。 最后5%的分数基于测量视觉稳定性的指标,称为累积版式偏移(CLS)。

Lighthouse 5.7的First有意义的Paint (FMP)和First CPU Idle (FCI)分数被更好的指标取代,以用户为中心的角度来衡量速度。 这是Lighthouse 6.0中最大的Contentful Paint (LCP)和Total Blocking Time (TBT)。

灯塔5.7 重量 灯塔6.0 重量
First Contentful Paint (FCP) 20% First Contentful Paint (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百分位数的指标阈值,并且被Google快速考虑。 2到4秒之间的FCPS被认为是中等速度,超过4秒的FCPS下降到低于第50百分位数,被归类为慢。

如果您发现FCPS加载速度太慢,可能是由于以下一个或多个原因:

  1. 渲染阻止资源过多
  2. 大型CSS文件
  3. 缺少与第三方源站的安全连接
  4. 服务器响应时间长
  5. 多页重定向
  6. 未缓存的静态资源
  7. DOM大小过大

要优化您的FCP,请考虑以下事项:

  1. 内联关键资源,延迟非关键资源并删除任何未使用的内容,以减少呈现阻止URL的影响。
  2. 从CSS中删除所有不必要的字符以缩小文件的大小。
  3. 使用预连接建立与重要的第三方源站的早期连接。
  4. 通过优化服务器的应用程序逻辑或升级服务器硬件以获得更多内存来缩短服务器响应时间。
  5. 避免超过一页的重定向。
  6. 使用HTTP缓存来缓存静态资源。
  7. 总计少于1,500个节点,少于32个节点的深度以及少于60个子节点的父节点以减小DOM大小。

速度指数

SI测量页面加载的视觉进度,并计算内容绘制速度的总分。 在Lighthouse 5.7中,SI的权重比网站的性能得分高27%。 在Lighthouse 6.0中,这是半减的,影响了页面15%的性能分数。 谷歌仍然认为这是一个关键的感知度量,因为图像显示缓慢的页面可以被视为janky。

Lighthouse通过捕获页面在浏览器中加载时的电影条并逐帧分析可视化进展来测量SI。 显示页面可见部分的平均时间决定了SI。 此指标因设备屏幕尺寸而异。

当您通过Lighthouse 6.0评分审核时,目标为 4.3秒或更低的SI。 这一速度排名第75百分位,被谷歌认为很快。 SI介于4.3和5.8秒之间的页面属于中等,低于5.8秒的SI会下降到第50百分位数以下并被视为缓慢。

较慢的SI时间往往源于以下原因:

  1. 主线程上的加载时间超过4秒
  2. JavaScript执行时间超过3.5秒
  3. 大字体文件会导致不可见的文本(FOIT)闪烁。

要缩短SI时间,请考虑以下事项:

  1. 实现代码分割,删除未使用的代码并压缩代码以减少主线程的负载和JavaScript执行时间。
  2. 确保在Webfont加载过程中文本保持可见,以避免FOIT。

最大的内容画

LCP是Lighthouse 6.0中添加的一个新指标,在站点的性能得分中占25%的权重。 LCP取代Lighthouse 5.7中的First有意义的Paint (FMP)。 虽然这两个指标都衡量最大内容元素的显示时间,但FMP因产生不一致的结果而臭名昭著,只能在某些Web浏览器中标准化。

LCP测量最大内容元素在屏幕上完全可见的时间。 测量的内容元素包括块级元素,图像(包括SVG文件中的图像)和视频。 这对于电子商务网站来说是一个非常重要的指标,因为它标志着大多数用户认为页面已完全加载并更有可能进行购买的时间点。

在上面的示例中,LCP为0.9秒—当主图像完全涂刷时。 此指标捕捉当用户看到页面已完全加载,但内容可能仍在折叠下方加载时的独特时刻

性能一流的网站,如Layer0 (现在的Edgio)上的网站,在不到1秒的时间内交付NCP。 最长 2.5秒的持续 时间被认为是快速的,在该指标的第75百分位中排名。 2.5秒到4秒之间的持续时间被认为是中等,需要改进,超过4秒的持续时间低于第50百分位数,被Google认为是缓慢的。

缓慢的NCP通常源于以下一个或多个原因:

  1. 服务器响应时间较慢
  2. JavaScript 和 CSS 的渲染阻塞
  3. 资源加载时间长
  4. 客户端呈现问题

如果您在Lighthouse 6.0评分审核期间发现链接速度慢于所需的LCP,请考虑以下事项:

  1. 通过将流量路由到最近的可用CDN,缓存资产,先缓存HTML页面并尽早建立第三方连接,优化服务器响应时间。
  2. 通过删除不必要的CSS,延迟非关键CSS和内联关键CSS来减少CSS。 通过压缩JavaScript文件减少JavaScript阻止时间。
  3. 要缩短资源加载时间,请优化和压缩图像和文本文件,并预加载重要资源。
  4. 通过使用服务器端渲染和预渲染优化客户端渲染。

    计划1-Racio演示立即安排咨询对话,了解Layer0 (现称-1)如何帮助您实现次秒级页面加载。 单击此处!

总阻塞时间

TBT取代了Lighthouse 5.7中的FCI,后者曾经拥有13%的重量。 在Lighthouse 6.0中,TBT测量页面响应速度,占性能分数的25%。 TBT测量页面在实现可靠交互之前的非交互性的严重程度。

你知道这些痛苦的情况:你正在等待页面加载,然后最后,它看起来准备好了。 您点击要查看的产品,但没有任何反应。 是否再次点击? 这一等待期是已知的 字面上造成压力的消费者. 本质上,TBT是消费者感受到由于页面的非交互性而造成的压力的时间长度。

资料来源: web.dev.

衡量此指标的方法是计算(FCP)显示的第一个内容元素与用户可以与(TTI)页面完全交互之间的”阻止”时间(耗时超过50毫秒的任务)的总和。 例如,在上图中,主线程中有五个任务,但只有三个任务超过50ms。 第一个是200ms,第二个是40ms,第三个是105ms。 TBT为(200+40+105) 345ms。

一个超过50毫秒的任务将足够长,让用户注意到并认为页面缓慢,或更糟,不活动,并导致他们离开。 为避免这种情况,将300毫秒以下的TBT视为快速。 300毫秒到600毫秒之间的BTT 被认为是中等速度,需要改进。 低于600毫秒的BTs低于第50百分位数,被视为缓慢。

长时间任务通常由以下一项或多项导致:

  1. 阻止主线程250毫秒或更长时间的第三方代码
  2. JavaScript执行时间超过3.5秒
  3. 在加载过程中,主线程忙的时间超过4秒
  4. 大量网络请求和大量传输

要改进此指标,请考虑以下事项:

  1. 使用脚本标记上的异步或延迟属性高效加载第三方JavaScript,建立与重要第三方源站的早期连接并使用延迟加载。
  2. 要加快JavaScript执行并减少主线程的负载,请实施代码分割,删除未使用的代码并压缩代码。
  3. 优化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速度较差,可能是由于以下一个或多个原因:

  1. 大型有效负载和较长的脚本解析时间
  2. 资源加载时间长
  3. 第三方代码阻止主线程250毫秒或更长时间
  4. 关键请求链
  5. 主线程速度和JavaScript执行时间较慢
  6. 大量资源或大量传输

可以通过优化JavaScript来缩短TTI时间。 这包括:

  1. 减少和压缩JavaScript文件以减少负载大小和脚本解析时间。
  2. 预加载请求和/或添加预连接以缩短加载时间。
  3. 通过使用脚本标记上的异步或延迟属性和延迟加载,高效加载第三方JavaScript。
  4. 通过减少关键资源的数量和优化剩余资源的加载顺序,减少关键请求链对性能的影响。
  5. 实现代码分割,删除未使用的代码并压缩代码以减少主线程的负载和JavaScript执行时间。
  6. 优化CSS和JavaScript以减少资源计数和传输大小。

累积版式偏移

CLS是Lighthouse 6.0中引入的第三个新指标,也是唯一一个未取代Lighthouse 5.7中任何指标的指标。 CLS占您的Lighthouse 6.0分数的最后5%,它测量视觉稳定性。

此指标衡量用户遇到意外布局变化的频率。 您之前已经经历过这种情况:您即将点击某个产品,突然,您点击页面上的其他内容,因为元素发生了变化。 这些体验可以是相当恼人的,并被视为janky用户.

CLS通过在页面的整个生命周期内发生的每个意外布局偏移的所有单独布局偏移得分的总和来衡量。 良好的CLS低于0.1 ,在性能方面排名第75百分位。 0.1到0.25之间的CLS被认为是中等的,任何大于0.25的测量值都低于第50百分位数,并且被Google认为是缓慢的。

如果您在Lighthouse 6.0评分审核期间发现一个较差的CLS,可能是由于以下原因之一:

  1. 图像或视频会自动调整大小
  2. 加载较晚且显示大于或小于预期的字体

要改进此指标,请考虑以下事项:

  1. 在您的图像和视频元素上包括准确的尺寸
  2. 避免弹出广告或横幅广告
  3. 避免字体导致FOIT/FOUT

灯塔得分向您展示Google对您网站的看法

一个页面的Lighthouse Performance Score表示Google在速度方面如何感知该页面。 Lighthouse 6.0中的每一个指标都反映了Google在衡量用户如何感知速度方面的最佳尝试。 如果分数低于标准,就会被视为速度缓慢—不仅是用户,也是搜索巨头本身,从而对收入和SEO产生负面影响。

Google在搜索引擎结果页面上对网站的排名越来越快。 除了SEO之外,网站速度还会显著影响转化率和收入。 亚马逊,例如,发现一个1秒滞后页面加载可能会花费公司 每年1.60亿美元损失.

底线

这一最新版本的Lighthouse展示了搜索巨头对感知速度指标的重视。 Lighthouse 6.0中的评分指标尝试测量访问者将您的页面视为已完全加载的速度(即使它仍在后台运行进程)。

三个指标(第一个内容画图,速度指数和最大的内容画图)测量感知的负载速度,占您的性能得分的55%。 目标为2秒的FCP, 2.5秒的LCP,以及4.3秒或更短的SI。

另外40%的绩效分数基于感知度量指标,用于衡量页面的响应速度。 其中包括总阻止时间和交互时间。 一个快速的Lighthouse 6.0评分审核将显示TBT在300ms以下,TTI在5.2秒内,或者用户将您的网站视为janky。

最后,没有人喜欢文本或图像跳跃在屏幕上。 累积版式偏移是Lighthouse 6.0审计中要考虑的第六个指标。 定位于小于0.1的CLS测量值,您将收到其在您的绩效分数中所占重量的全部5%。

要获得一份简单的清单,涵盖您在Lighthouse 6.0评分审核中应实现的交付速度,以及每个指标的优化技术,请填写以下表格。