Lighthouse性能指标的技术SEO指南

了解如何使用Lighthouse测试性能，哪些指标构成Lighthouse的性能得分，以及这些指标的含义。

也许您在这里是因为您是性能指标的忠实拥护者。或者，也许您不知道灯塔是什么，并且太害怕问了。

两者都是很好的选择。欢迎！

为了使开发人员文档神秘化，我招募了技术SEO和Google Data Studio的书呆子Rachel Anderson。

总之，我们希望您的绩效改善工作从“使所有数字 变为绿色”到一些清晰而有意义的行动项目。

我们来看看：

• 灯塔到底是什么？（以防您不知道并且不敢问。）
• 更新了性能得分的计算方式（版本6和7）。
• 如何使用Lighthouse测试性能。
• 哪些指标构成了Lighthouse的绩效得分。
• 这些指标是什么意思。
• 如何改善它们。

什么是灯塔？

Lighthouse是一个开放源代码审核工具，可在五个方面提供标准化分数：

• 性能。
• 渐进式Web应用程序。
• 最佳做法。
• 辅助功能。
• SEO。

出于本文的目的，我们将使用名称Lighthouse来指代共享Github存储库执行的一系列测试，而与执行方法无关。

Lighthouse使用模拟数据（也称为实验室数据）运行性能测试。

这是在具有预定义设备和网络设置的受控环境中收集的性能数据。

实验室数据有助于调试性能问题。这并不意味着在受控环境中在本地计算机上的体验代表了野外真实人类的体验。

灯塔更新：Web核心生命

2020年5月5日，Chromium项目宣布了一套三个指标，由Google支持的开源浏览器将以此指标衡量性能。

这些指标称为Web Vitals，是Google计划的一部分，旨在为质量信号提供统一的指导。

这些指标的目标是以用户为中心的方式衡量Web性能。

在两周内，Lighthouse v6在更新的中心发布了Web Core Vitals的修改版本。

2020年7月，随着Chrome 84的发布，Lighthouse v6的统一指标在所有Google产品中采用。

Chrome DevTools审核面板已重命名为Lighthouse。Pagespeed见解和Google Search Console也引用了这些统一指标。

“网络核心生命”占Lighthouse加权绩效得分的55％。重点的改变设定了新的，更完善的目标。

总体而言，大多数页面看到的影响很小，有83.32％的测试在转换到v6时得分降低了10分或更少。

第7版目前已在Github上发布，并计划于2021年3月推出稳定的Chrome 89进行大规模推广。

如何使用Lighthouse测试性能

方法学问题

开箱即用，Lighthouse一次审核一个页面。

单页得分并不代表您的网站，快速的首页并不意味着快速的网站。

在您的网站中测试多种页面类型。

确定您的主要页面类型，模板和目标转换点（注册，订阅和结帐页面）。

示例页面测试清单

在开始优化之前，请在每个示例页面上运行Lighthouse并保存报告数据。

记录您的分数和改进的待办事项清单。

通过保存JSON结果并 在需要详细的结果信息时利用Lighthouse Viewer来防止数据丢失。

使用ROI获取待办事项

很难将开发资源用于SEO建议。

内部SEO可以通过为每个积压票证的生日准备一个生日蛋糕来破坏其胰腺。或至少学会讨厌蛋糕。

根据我作为内部企业SEO的经验，优先考虑绩效计划的技巧是获得支持该投资的数字。

这些原始数据将成为美元符号，可以证明和奖励开发工作。

在测试期间，您可能会标记多个区域。没关系！

如果您想知道哪些变化会带来最大的收益，请查看Lighthouse Scoring Calculator。

如何进行灯塔测试

这是通往奥兹省的许多道路的案例。当然，某些稻草人对某种阴影的砖块可能会特别响亮，但这与您的目标有关。

希望将SEO测试集成到发布过程中？是时候学习一些NPM了。

有不到五分钟的时间为准客户会议做准备？一些一次性报告应该可以解决问题。

无论执行哪种方式，除非您有台式机的特殊用例，否则默认为移动方式。

对于一次性报告：Chrome Devtools

使用Chrome DevTools中的Lighthouse面板一次测试一页。由于该报告将模拟用户使用浏览器的体验，因此请使用具有所有扩展名的隐身实例，并禁用浏览器的缓存。

专家提示：创建用于测试的Chrome配置文件。使其保持本地状态（不启用同步，保存密码或与现有Google帐户关联），并且不为用户安装扩展程序。

如何使用Chrome DevTools运行测试灯塔

1. 1. 打开Chrome的隐身实例。
   2. 导航到Chrome开发者工具的“网络”面板（在Mac上为Command + Option + I，在Windows和Linux上为Control + Shift + I）。
   3. 勾选该框以禁用缓存。
   4. 导航到Lighthouse面板。
   5. 单击生成报告。
   6. 保存文件。

从DevTools运行Lighthouse的优点

• 您可以测试本地版本和经过身份验证的页面。
• 可以使用Lighthouse CI Diff工具比较保存的报告。

从DevTools运行Lighthouse的缺点

• 一次一份报告。
• 需要您手动保存结果。

用于频繁测试同一页面：web.dev

就像DevTools一样，但是您不必记住禁用所有讨厌的扩展！

1. 访问web.dev/measure/。
2. 使用您的Google帐户登录。
3. 输入您的URL。
4. 单击运行审核。

从web.dev运行灯塔的优点

• 捕获结果的漂亮时间表！（只要您已登录）。

• 快速指南以改进问题。
• 可以使用Lighthouse CI Diff工具比较保存的报告。

从web.dev运行灯塔的缺点

• 一次一份报告。
• 您需要记住一段时间后要跟踪的URL。

对于大规模（健全性）测试：Node命令行

1. 安装npm。
   （Mac Pro技巧：使用自制软件来避免令人讨厌的依赖问题。）
2. 安装灯塔节点模块具有

   npm install -g lighthouse

3. 与运行单个文本

   lighthouse <url>

4. 通过以编程方式运行测试，在使用列表上运行测试。

从节点运行灯塔的优点

• 可以一次运行许多报告。
• 可以设置为自动运行以跟踪随时间的变化。

从节点运行灯塔的缺点

• 需要一些编码知识。
• 更耗时的设置。

灯塔性能指标解释

在版本6和7中，Lighthouse的性能得分由七个指标组成，每个指标占总性能得分的百分比。

第一输入延迟（等同于TBT的现场数据）具有不同的阈值。

长任务和总阻止时间

TBT可测量较长的任务-耗时超过50毫秒的任务。

当浏览器加载您的站点时，实际上只有一行脚本等待执行。

用户的任何输入都必须进入相同的队列。

当浏览器由于正在执行其他任务而无法响应用户输入时，用户会将其视为滞后。

本质上，漫长的任务就像您最喜欢的咖啡店的那个人花太长时间订购一杯饮料。

就像订购2％venti四泵香草，五泵摩卡咖啡全脂泡沫的人一样，漫长的工作也是不良经历的主要原因。

是什么导致您的页面上的TBT高？

繁重的JavaScript。

而已。

如何使用Chrome Devtools查看TBT

1. 在Chrome中打开页面。
2. 导航到开发工具的“性能”面板（在Mac上为Command + Option + I，在Windows和Linux上为Control + Shift + I）。
3. 单击重新加载按钮以开始性能跟踪。
4. 在任务的右上角查找红色标记。这些表明耗时超过50毫秒的长时间任务。

如何解决不良的TBT

• 分解长任务。
• 优化页面以进行交互准备。
• 使用网络工作者。
• 减少JavaScript执行时间。

改善技术性贸易壁垒的资源

• 首次输入延迟（FID）web.dev。
• 总阻塞时间（TBT）web.dev。
• 优化第一输入延迟web.dev。
• 灯塔：总封锁时间web.dev。

首次合格涂料（FCP）

它代表什么： FCP标记绘制第一个文本或图像（可见）的时间。

灯塔性能得分比重： 15％

它可以衡量什么：我看到我请求的页面的时间正在响应。我的拇指可以停止悬停在后退按钮上。

度量方式：通过比较页面的FCP与FCP时间（由HTTP存档存储的真实网站数据），来衡量Lighthouse中的FCP得分。如果FCP比HTTP存档中的其他页面快，则FCP会增加。

First Contentful Paint是至关重要的Web核心吗？ 没有

FCP得分

目标：在2秒内达到FCP。

FCP可以包含哪些元素？

将第一个可见元素呈现到DOM所需的时间是FCP。在将非白色内容呈现到页面的元素（不包括iframe）之前发生的所有事情都计入FCP。

由于iframe不被视为FCP的一部分，因此，如果它们是要呈现的第一个内容，则FCP将继续计数，直到第一个非iframe内容加载完毕，但iframe加载时间不会计入FCP。

有关FCP的文档还指出了通常受字体加载时间影响的问题，并且有一些改善字体加载的技巧。

如何使用Chrome Devtools定义FCP

1. 在Chrome中打开页面。
2. 导航到开发工具的“性能”面板（在Mac上为Command + Option + I，在Windows和Linux上为Control + Shift + I）。
3. 单击“时序”部分中的FCP标记。
4. 摘要选项卡带有FCP的时间戳，以ms为单位。

如何提高FCP

为了将内容显示给用户，浏览器必须先下载，解析和处理它遇到的所有外部样式表，然后才能将任何内容显示或呈现到用户的屏幕上。

绕过外部资源延迟的最快方法是对首屏内容使用内联样式。

为了使您的网站具有可持续的可扩展性，请使用 自动化工具， 例如penthouse和Apache的mod_pagespeed。这些解决方案将对功能进行一些限制，需要进行测试，可能并不适合所有人。

普遍来说，我们都可以通过减少样式计算的范围和复杂度来缩短网站使用“第一内容涂料”的时间。

如果未使用样式，则将其删除。您可以使用Chrome Dev Tool的内置代码覆盖功能来识别未使用的CSS  。

使用更好的数据做出更好的决策。

与TTI相似，您可以 使用Google Analytics（分析）为FCP捕获真实的用户指标， 从而将改进与KPI相关联。

速度指数

它代表什么：在加载期间一次可见多少。

灯塔性能得分比重： 15％

它测量的是： “速度索引”是显示页面可见部分的平均时间。

如何测量： Lighthouse的Speed Index测量来自名为Speedline的节点模块。

您必须在webpagetest.org上向友善的向导询问具体细节，但是粗略地讲，Speedline分数随视口（读取为设备屏幕）的大小而变化，并且具有用于计算每个帧的完整性的算法。

速度索引是否对Web至关重要？ 没有

SI计分

目标：在不到4.3秒的时间内达到SI。

如何提高SI

速度得分反映了您网站的关键渲染路径。“关键”资源意味着该资源是第一次绘画所必需的，或者对于页面的核心功能至关重要。

路径越长越密集，提供可视页面的网站速度就越慢。如果您的路径得到优化，则可以为用户提供更快的内容，并在“速度指数”上得分更高。

关键路径如何影响渲染

通常与缓慢的“关键渲染路径”相关的Lighthouse建议包括：

• 最小化主线程工作。
• 减少JavaScript执行时间。
• 最小化关键请求深度。
• 消除渲染阻止资源。
• 延迟屏幕外图像。

互动时间

它代表什么：负载响应能力；识别页面在哪里响应，但尚未响应。

灯塔性能得分比重： 15％

它测量的是：从页面开始加载到页面的主要资源已加载并能够响应用户输入的时间。

测量方式：  TTI测量页面完全 互动所花费的时间 。在以下情况下，页面被认为是完全交互式的：

• 该页面显示有用的内容，该内容由First Contentful Paint测量 。
• 已为大多数可见的页面元素注册了事件处理程序。
• 该页面在50毫秒内响应用户交互。

Web核心互动时间到了吗？ 没有

TTI得分

目标：达到TTI分数少于3.8秒。

累积版式移位（CLS）

它代表的是：用户对页面视觉稳定性的感知。

灯塔性能得分比重： 5％*

*期望CLS在解决错误时会增加权重。智能投注说2021年第四季度

它测量的是：它量化在页面加载结束之前转移的页面元素。

度量方式： 与其他指标不同，CLS不能及时度量。相反，它是根据元素移动的帧数和元素移动的总距离（以像素为单位）计算得出的指标。

CLS评分

目标：CLS得分低于0.1。

哪些元素可以成为CLS的一部分？

在负载中某个点出现在折叠上方的任何可视元素。

没错-如果您先加载页脚，然后再加载页面的英雄内容，则CLS将会受到损害。

CLS不良的原因

• 图片无尺寸。
• 没有尺寸的广告，嵌入和iframe。
• 动态注入的内容。
• Web字体导致FOIT / FOUT。
• 在更新DOM之前等待网络响应的操作。

如何使用Chrome Devtools定义CLS

1. 在Chrome中打开页面。
2. 导航到开发工具的“性能”面板（在Mac上为Command + Option + I，在Windows和Linux上为Control + Shift + I）。
3. 将鼠标悬停并在负载的屏幕快照上从左向右移动（确保选中了屏幕快照复选框）。
4. 观察在第一次油漆后反弹的元素，以识别引起CLS的元素。

如何改善CLS

一旦确定了错误的元素，就需要在页面加载期间对其进行更新以使其稳定。

例如，如果加载缓慢的广告导致CLS得分较高，则您可能希望使用与加载广告时相同大小的占位符图像来填充该空间，以防止页面移动。

改善CLS的一些常见方法包括：

• 始终在图像和视频元素上包括width和height size属性。
• 为广告位留出空间（不要折叠它）。
• 避免在现有内容之上插入新内容。
• 在视口顶部附近放置非粘性广告时，请务必小心。
• 预加载字体。

CLS资源

• 优化累积布局转换web.dev。
• 累积版式移位（CLS）web.dev。
• AMP中的累积布局偏移（CLS）– AMP博客。
• 累积版式移位（CLS）计算器。

结论

性能指标的复杂性反映了所有站点面临的挑战。

我们将性能指标用作用户体验的代理-这意味着要考虑一些独角兽。

诸如Google的“测试我的网站”之类的工具  以及 “我的网站费用”是什么？ 可以帮助您进行转化和以客户为中心的参数，以说明绩效为何如此重要。

希望，一旦您的项目具有吸引力，这些定义将帮助您将Lighthouse的单一性能指标转化为技术熟练和协作工程团队的行动证明。

跟踪数据并从屋顶喊出来。

尽管Google努力量化质量体验，但SEO专业人员和开发人员必须解码如何将概念转化为代码。

测试，迭代和分享您学到的东西！我期待看到您的能力，美丽的独角兽。