lighthouse项目地址 https://github.com/GoogleChrome/lighthouse
最近在做chromium相关开发，整理下开发者工具中lighthouse的规则信息，mark一下。
PS: 编译devtool的bundle文件，要注意chromium中的lighthouse版本，check相同版本后在编译。
Catalog | Item | Describe | Remark |
指标 Metrics | First Contentful Paint (FCP) | 首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。 | |
Time to Interactive（TTI) | TTI 指标测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。 | ||
Speed Index（SI） | 速度指数 （SI）是一个页面加载性能指标，它可以显示页面内容的可见填充速度。这是显示页面可见部分的平均时间。以毫秒表示，取决于视口的大小，分数越低越好。 | ||
Total Blocking Time（TBT） | 总阻塞时间 (TBT) 指标测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。 | ||
Largest Contentful Paint（LCP） | 最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。 | ||
Cumulative Layout Shift (CLS) | 累积布局偏移 (CLS) 是测量视觉稳定性的一个以用户为中心的重要指标。 CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。 | ||
性能 Performance | 预加载 LCP 元素所用图片 | 请预加载 Largest Contentful Paint (LCP) 元素所用的图片，以缩短您的 LCP 用时。 | |
减少未使用的 JavaScript | 请减少未使用的 JavaScript，并等到需要使用时再加载脚本，以减少网络活动耗用的字节数。 | ||
采用新一代格式提供图片 | WebP 和 AVIF 等图片格式的压缩效果通常优于 PNG 或 JPEG，因而下载速度更快，消耗的数据流量更少。 | ||
对图片进行高效编码 | 如果图片经过了优化，则加载速度会更快，且消耗的移动数据网络流量会更少。 | ||
使用 HTTP/2 | HTTP/2 提供了许多优于 HTTP/1.1 的益处，包括二进制标头和多路复用。 | ||
移除阻塞渲染的资源 | 资源阻止了系统对您网页的首次渲染。建议以内嵌方式提供关键的 JS/CSS，并推迟提供所有非关键的 JS/样式。 | FCP LCP | |
启用文本压缩 | 对于文本资源，应先压缩（gzip、deflate 或 brotli），然后再提供，以最大限度地减少网络活动消耗的字节总数。 | FCP LCP | |
减少未使用的 CSS | 请从样式表中减少未使用的规则，并延迟加载首屏内容未用到的 CSS，以减少网络活动耗用的字节数。 | FCP LCP | |
适当调整图片大小 | 提供大小合适的图片可节省移动数据网络流量并缩短加载用时。 | ||
预先连接到必要的来源 | 建议添加 `preconnect` 或 `dns-prefetch` 资源提示，以尽早与重要的第三方来源建立连接。 | ||
缩减 JavaScript | 如果缩减 JavaScript 文件大小，则既能缩减负载规模，又能缩短脚本解析用时。 | ||
采用高效的缓存策略提供静态资源 | 延长缓存期限可加快重访您网页的速度。 | ||
确保文本在网页字体加载期间保持可见状态 | 利用 font-display 这项 CSS 功能，确保文本在网页字体加载期间始终对用户可见。 | ||
未使用被动式监听器来提高滚动性能 | 建议您将触摸和滚轮事件监听器标记为 `passive`，以提高页面的滚动性能。 | ||
避免使用 document.write() | 对于连接速度较慢的用户，通过 `document.write()` 动态注入的外部脚本可将网页加载延迟数十秒。 | ||
图片元素没有明确的width和height | 请为图片元素设置明确的宽度值和高度值，以减少布局偏移并改善 CLS | ||
避免网络负载过大 | 网络负载过大不仅会让用户付出真金白银，还极有可能会延长加载用时。 | ||
避免 DOM 规模过大 | 大型 DOM 会增加内存使用量、导致样式计算用时延长，并产生高昂的布局重排成本。 | ||
最大限度地减少主线程工作 | 建议您减少为解析、编译和执行 JS 而花费的时间。您可能会发现，提供较小的 JS 负载有助于实现此目标。 | ||
避免链接关键请求 | 请考虑缩短链长、缩减资源的下载文件大小，或者推迟下载不必要的资源，从而提高网页加载速度。 | ||
请保持较低的请求数量和较小的传输大小 | 若要设置页面资源数量和大小的预算，请添加 budget.json 文件。 | ||
最大内容渲染时间元素 | 此视口内渲染的最大内容元素。 | ||
请避免出现大幅度的布局偏移 | 这些 DOM 元素对该网页的 CLS 影响最大。 | ||
应避免出现长时间运行的主线程任务 | 列出了主线程中运行时间最长的任务，有助于识别出导致输入延迟的最主要原因。 | ||
推迟加载屏幕外图片 | 建议您在所有关键资源加载完毕后推迟加载屏幕外图片和处于隐藏状态的图片，从而缩短可交互前的耗时。 | ||
缩减 CSS | 缩减 CSS 文件大小可缩减网络负载规模。 | ||
初始服务器响应用时较短 | 请确保服务器响应主文档的用时较短，因为这会影响到所有其他请求的响应时间。 | ||
避免多次网页重定向 | 重定向会在网页可加载前引入更多延迟。 | ||
预加载关键请求 | 建议使用 `<link rel=preload>` 来优先提取当前在网页加载后期请求的资源。 | ||
使用视频格式提供动画内容 | 使用大型 GIF 提供动画内容会导致效率低下。建议您改用 MPEG4/WebM 视频（来提供动画）和 PNG/WebP（来提供静态图片）以减少网络活动消耗的字节数。 | ||
请移除 JavaScript 软件包中的重复模块 | 从软件包中移除重复的大型 JavaScript 模块可减少网络传输时不必要的流量消耗。 | ||
应避免向新型浏览器提供旧版 JavaScript | Polyfill 和 transform 让旧版浏览器能够使用新的 JavaScript 功能。不过，其中的很多函数对新型浏览器而言并非必需。对于捆绑的 JavaScript，请采用现代脚本部署策略，以便利用 module/nomodule 功能检测机制来减少传送到新型浏览器的代码量，同时保留对旧版浏览器的支持。 | ||
User Timing 标记和测量结果 | 建议使用 User Timing API 检测您的应用，从而衡量应用在关键用户体验中的实际性能。 | ||
JavaScript 执行用时 | 建议您减少为解析、编译和执行 JS 而花费的时间。您可能会发现，提供较小的 JS 负载有助于实现此目标。 | ||
尽量减少第三方使用 | 第三方代码可能会显著影响加载性能。请限制冗余第三方提供商的数量，并尝试在页面完成主要加载后再加载第三方代码。 | ||
使用 Facade 延迟加载第三方资源 | 您可以延迟加载某些第三方嵌入代码。不妨考虑使用 Facade 替换这些代码，直到您需要使用它们为止。 | ||
Largest Contentful Paint 所对应的图片未被延迟加载 | 被延迟加载的首屏图片会在页面生命周期内的较晚时间呈现，这可能会致使系统延迟渲染最大内容元素。 | ||
避免使用未合成的动画 | 未合成的动画可能会卡顿并增加 CLS。 | ||
具有包含 width 或 initial-scale 的 <meta name="viewport"> 标记 | `<meta name="viewport">` 不仅会针对移动设备屏幕尺寸优化您的应用，还会阻止系统在响应用户输入前出现 300 毫秒的延迟。 | ||
避免使用“unload”事件监听器 | “`unload`”事件不会可靠地触发，而且监听该事件可能会妨碍系统实施“往返缓存”之类的浏览器优化策略。请改用“`pagehide`”或“`visibilitychange`”事件。 | ||
无障碍 Accessibility | 按钮缺少可供访问的名称 | 当某个按钮没有可供访问的名称时，屏幕阅读器会将它读为“按钮”，这会导致依赖屏幕阅读器的用户无法使用它。 | |
图片元素缺少 [alt] 属性 | 说明性元素应力求使用简短的描述性替代文字。未指定 alt 属性的装饰性元素可被忽略。 | ||
表单元素不具备关联的标签 | 标签可确保辅助技术（如屏幕阅读器）正确读出表单控件。 | ||
链接缺少可识别的名称 | 请确保链接文字（以及用作链接的图片替代文字）可识别、独一无二且可成为焦点，这样做会提升屏幕阅读器用户的导航体验。 | ||
<meta name="viewport"> 元素中使用了 [user-scalable="no"]，或者 [maximum-scale] 属性小于 5。 | 对于必须依靠放大屏幕才能清晰看到网页内容的弱视用户而言，停用缩放功能会给他们带来问题。 | ||
背景色和前景色没有足够高的对比度。 | 对于许多用户而言，对比度低的文字都是难以阅读或无法阅读的。 | ||
处于活动状态的可聚焦元素的 [id] 属性不是独一无二的 | 所有可聚焦的元素都必须具有独一无二的 `id`，以确保能被辅助技术识别。 | ||
<html> 元素缺少 [lang] 属性 | 如果页面未指定 lang 属性，屏幕阅读器便会假定该页面采用的是用户在设置屏幕阅读器时选择的默认语言。如果该页面实际上并未采用默认语言，则屏幕阅读器可能无法正确读出该页面中的文字。 | 国际化和本地化 | |
The page has a logical tab order | Tabbing through the page follows the visual layout. Users cannot focus elements that are offscreen. | 待手动检查的其他项 | |
Interactive controls are keyboard focusable | Custom interactive controls are keyboard focusable and display a focus indicator. | 待手动检查的其他项 | |
Interactive elements indicate their purpose and state | nteractive elements, such as links and buttons, should indicate their state and be distinguishable from non-interactive elements. | 待手动检查的其他项 | |
The user's focus is directed to new content added to the page | If new content, such as a dialog, is added to the page, the user's focus is directed to it. | 待手动检查的其他项 | |
User focus is not accidentally trapped in a region | A user can tab into and out of any control or region without accidentally trapping their focus. | 待手动检查的其他项 | |
Custom controls have associated labels | Custom interactive controls have associated labels, provided by aria-label or aria-labelledby. | 待手动检查的其他项 | |
Custom controls have ARIA roles | Custom interactive controls have appropriate ARIA roles. | 待手动检查的其他项 | |
Visual order on the page follows DOM order | DOM order matches the visual order, improving navigation for assistive technology | 待手动检查的其他项 | |
Offscreen content is hidden from assistive technology | Offscreen content is hidden with display: none or aria-hidden=true. | 待手动检查的其他项 | |
HTML5 landmark elements are used to improve navigation | Landmark elements (<main>, <nav>, etc.) are used to improve the keyboard navigation of the page for assistive technology. | 待手动检查的其他项 | |
文档 <body> 中没有 [aria-hidden="true"] | 在文档 `<body>` 上设置 `aria-hidden="true"` 后，辅助技术（如屏幕阅读器）的工作方式不一致。 | ||
[aria-hidden="true"] 元素都不含可聚焦的下级元素 | 有一个 `[aria-hidden="true"]` 元素包含可聚焦的下级元素，导致这些交互式元素都无法被辅助技术（如屏幕阅读器）用户使用。 | ||
该页面包含一个标题、跳过链接或地标区域 | 添加用于绕过重复内容的方式有助于键盘用户更高效地浏览页面。 | ||
文档包含 <title> 元素 | 屏幕阅读器用户可借助标题来大致了解某个页面的内容，搜索引擎用户则非常依赖标题来确定某个页面是否与其搜索相关 | ||
列表只包含 <li> 元素和脚本支持元素（<script> 和 <template>）。 | 屏幕阅读器会采用特定的方法来读出列表内容。确保列表结构正确有助于屏幕阅读器顺利读出相应内容。 | ||
列表项 (<li>) 包含在 <ul> 或 <ol> 父元素中 | 屏幕阅读器要求列表项 (`<li>`) 必须包含在父 `<ul>` 或 `<ol>` 中，这样才能正确读出它们。 | ||
标题元素按降序显示 | 未跳过任何等级且排序正确的标题会准确传达页面的语义结构，从而使得相应页面在使用辅助技术时更易于浏览和理解。 | ||
“[accesskey]”值是独一无二的 | 快捷键可让用户快速转到页面的某个部分。为确保正确进行导航，每个快捷键都必须是独一无二的。 | 部分网站不适用 | |
[aria-*] 属性与其角色匹配 | 每个 ARIA“`role`”都支持一部分特定的“`aria-*`”属性。如果这些项不匹配，会导致“`aria-*`”属性无效。 | 部分网站不适用 | |
button、link 和 menuitem 元素都有可供访问的名称 | 如果某个元素没有无障碍名称，屏幕阅读器会将它读为通用名称，这会导致依赖屏幕阅读器的用户无法使用它。 | 部分网站不适用 | |
ARIA 输入字段都有可供访问的名称 | 当某个输入字段没有可供访问的名称时，屏幕阅读器会将它读为通用名称，这会导致依赖屏幕阅读器的用户无法使用它。 | 部分网站不适用 | |
ARIA meter 元素都有可供访问的名称 | 如果某个元素没有无障碍名称，屏幕阅读器会将它读为通用名称，这会导致依赖屏幕阅读器的用户无法使用它。 | 部分网站不适用 | |
ARIA progressbar 元素都有可供访问的名称 | 如果某个 `progressbar` 元素没有无障碍名称，屏幕阅读器会将它读为通用名称，这会导致依赖屏幕阅读器的用户无法使用它。 | 部分网站不适用 | |
[role] 具备所有必需的 [aria-*] 属性 | 一些 ARIA 角色有必需属性，这些属性向屏幕阅读器描述了相应元素的状态。 | 部分网站不适用 | |
具有 ARIA [role]且要求子元素必须包含特定[role]的元素包含全部必需子元素。 | 一些 ARIA 父角色必须包含特定子角色，才能执行它们的预期无障碍功能。 | 部分网站不适用 | |
[role] 包含在其必需的父元素中 | 一些 ARIA 子角色必须包含在特定的父角色中，才能正确执行它们的预期无障碍功能。 | 部分网站不适用 | |
[role] 值有效 | ARIA 角色必须具备有效值，才能执行它们的预期无障碍功能。 | 部分网站不适用 | |
ARIA 切换字段都有可供访问的名称 | 当某个切换字段没有可供访问的名称时，屏幕阅读器会将它读为通用名称，这会导致依赖屏幕阅读器的用户无法使用它。 | 部分网站不适用 | |
ARIA tooltip 元素都有可供访问的名称 | 如果某个元素没有无障碍名称，屏幕阅读器会将它读为通用名称，这会导致依赖屏幕阅读器的用户无法使用它。 | 部分网站不适用 | |
ARIA treeitem 元素都有可供访问的名称 | 如果某个元素没有无障碍名称，屏幕阅读器会将它读为通用名称，这会导致依赖屏幕阅读器的用户无法使用它。 | 部分网站不适用 | |
[aria-*] 属性具备有效值 | 辅助技术（如屏幕阅读器）无法解读值无效的 ARIA 属性。 | 部分网站不适用 | |
[aria-*] 属性有效且拼写正确 | 辅助技术（如屏幕阅读器）无法解读名称无效的 ARIA 属性。 | 部分网站不适用 | |
<dl> 只包含经过适当排序的 <dt> 和 <dd> 组及 <script>、<template> 或 <div> 元素。 | 如果未正确标记定义列表，屏幕阅读器可能会读出令人困惑或不准确的内容。 | 部分网站不适用 | |
定义列表项已封装在 <dl> 元素中 | 定义列表项 (`<dt>` 和 `<dd>`) 必须封装在父 `<dl>` 元素中，以确保屏幕阅读器可以正确地读出它们。 | 部分网站不适用 | |
ARIA ID 都是独一无二的 | ARIA ID 的值必须独一无二，才能防止其他实例被辅助技术忽略。 | 部分网站不适用 | |
表单字段都没有多个标签 | 有多个标签的表单字段可能会被辅助技术（如屏幕阅读器）以令人困惑的方式播报出来，因为这些辅助技术可能会使用第一个标签或最后一个标签，也可能会使用所有标签。 | 部分网站不适用 | |
<frame> 或 <iframe> 元素有标题 | 屏幕阅读器用户依靠框架标题来描述框架的内容。 | 部分网站不适用 | |
<html> 元素的 [lang] 属性具备有效值 | 指定有效的 BCP 47 语言有助于屏幕阅读器正确读出文字。 | 部分网站不适用 | |
<input type="image"> 元素有对应的 [alt] 文字 | 将图片用作 `<input>` 按钮时，提供替代文字有助于屏幕阅读器用户了解该按钮的用途。 | 部分网站不适用 | |
文档未使用 <meta http-equiv="refresh"> | 用户并不希望网页自动刷新，因为自动刷新会不断地将焦点移回到页面顶部。这可能会让用户感到沮丧或困惑。 | 部分网站不适用 | |
<object> 元素有对应的替代文字 | 屏幕阅读器无法转换非文字内容。向 `<object>` 元素添加替代文字可帮助屏幕阅读器将含义传达给用户。 | 部分网站不适用 | |
所有元素的 [tabindex] 值都不大于 0 | 值大于 0 意味着明确的导航顺序。尽管这在技术上可行，但往往会让依赖辅助技术的用户感到沮丧。 | 部分网站不适用 | |
<table> 元素中使用 [headers] 属性的单元格引用的是同一表格中的单元格。 | 屏幕阅读器提供了更便于用户浏览表格内容的功能。请确保那些使用 `[headers]` 属性的 `<td>` 单元格仅引用同一个表格中的其他单元格，这样做可提升屏幕阅读器用户的体验。 | 部分网站不适用 | |
<th> 元素和 [role="columnheader"/"rowheader"] 的元素具备它们所描述的数据单元格。 | 屏幕阅读器提供了更便于用户浏览表格内容的功能。确保表格标头始终引用特定一组单元格可以提升屏幕阅读器用户的体验。 | 部分网站不适用 | |
[lang] 属性的值有效 | 为元素指定有效的 BCP 47 语言有助于确保屏幕阅读器正确读出文字。 | 部分网站不适用 | |
<video> 元素包含带 [kind="captions"] 的 <track> 元素 | 如果视频提供了字幕，失聪用户和听障用户便能更轻松地获取此视频中的信息。 | 部分网站不适用 | |
最佳做法 Best Practices | 未使用 HTTPS | 所有网站都应该通过 HTTPS 来保护，即使网站不处理敏感数据也应如此。这包括要避免使用混合内容（即：通过 HTTPS 实现初始请求，但却通过 HTTP 加载某些资源）。HTTPS 可防止入侵程序篡改或被动地监听您的应用与用户之间的通信，它是 HTTP/2 和许多新的网络平台 API 的先决条件。 | |
请确保 CSP 能够有效地抵御 XSS 攻击 | 强有力的内容安全政策 (CSP) 可显著降低遭遇跨站脚本攻击 (XSS) 的风险。 | ||
显示的图像宽高比不正确 | 图像显示尺寸应与自然宽高比相匹配。 | ||
所提供的部分图片采用了较低的分辨率 | 图片的自然尺寸应与显示屏大小及像素比成正比，这样才能令图片达到最清晰的显示效果。 | ||
控制台日志中已记录浏览器错误 | 控制台中记录的错误表明有未解决的问题。导致这些错误的可能原因是网络请求失败和其他浏览器问题。 | ||
问题记录在 Chrome Devtools 的“Issues”面板中 | Chrome Devtools 的“`Issues`”面板中记录的问题表明有未解决的问题。这些问题的起因可能是网络请求失败、安全控件不足和其他浏览器问题。如需详细了解每个问题，请打开 Chrome Devtools 的“Issues”面板。 | ||
已检测到的 JavaScript 库 | 页面上检测到的所有前端 JavaScript 库。 | ||
大型第一方 JavaScript 缺少源代码映射 | 源代码映射会将缩减了大小的代码转换成原始源代码。这有助于开发者在正式版中调试。此外，Lighthouse 还能提供进一步的数据分析。您不妨考虑部署源代码映射以充分利用这些好处 | ||
已预加载使用 font-display: optional 的字体 | 请预加载 `optional` 字体以方便初访者使用 | ||
避免在网页加载时请求地理定位权限 | 如果网站在缺少上下文的情况下请求位置，会导致用户不信任网站或感到困惑。建议将请求与用户操作进行绑定。 | ||
避免在网页加载时请求通知权限 | 如果网站在缺少上下文的情况下请求发送通知，会导致用户不信任网站或感到困惑。建议将请求与用户手势进行绑定。 | ||
避免使用含已知安全漏洞的前端 JavaScript 库 | 某些第三方脚本可能包含已知的安全漏洞，攻击者很容易识别和利用这些漏洞。 | ||
允许用户粘贴内容到密码字段 | 阻止密码粘贴，会破坏良好的安全政策。 | ||
页面包含 HTML DOCTYPE | 指定 DOCTYPE 会阻止浏览器切换到怪异模式。 | ||
正确地设定了字符集 | 必须声明字符编码。您可以在 HTML 的前 1024 个字节中使用 `<meta>` 标记来声明，也可以在 HTTP 响应标头 Content-Type 中进行声明。 | ||
请勿使用已弃用的 API | 已弃用的的 API 最终将从浏览器中移除。 | ||
搜索引擎优化 SEO | 文档缺少 meta 描述 | 元描述可能会被包含在搜索结果中，以简要概括网页内容。 | 基本的搜索引擎优化建议 |
图片元素缺少 [alt] 属性 | 说明性元素应力求使用简短的描述性替代文字。未指定 alt 属性的装饰性元素可被忽略。 | ||
有无法抓取的链接 | 搜索引擎可能会使用链接中的 `href` 属性来抓取网站。请确保锚元素的 `href` 属性链接到合适的目标网站，以便搜索引擎发现该网站上的更多网页。 | ||
点按目标的大小不合适 | 交互式元素（例如按钮和链接）应足够大 (48x48px)，且其周围应有足够的空间，以便用户轻松点按且避免遮挡其他元素。 | 适合移动设备 | |
结构化数据有效 | 运行结构化数据测试工具 和 Structured Data Linter 可验证结构化数据。 | 手动检查 | |
文档的 rel=canonical 有效 | 规范链接用于建议应在搜索结果中显示哪个网址。 | ||
具有包含 width 或 initial-scale 的 <meta name="viewport"> 标记 | `<meta name="viewport">` 不仅会针对移动设备屏幕尺寸优化您的应用，还会阻止系统在响应用户输入前出现 300 毫秒的延迟。了解详情。 | ||
文档包含 <title> 元素 | 屏幕阅读器用户可借助标题来大致了解某个页面的内容，搜索引擎用户则非常依赖标题来确定某个页面是否与其搜索相关。了解详情。 | ||
页面返回了有效的 HTTP 状态代码 | 返回无效 HTTP 状态代码的页面可能无法被正确编入索引。了解详情。 | ||
链接有描述性文字 | 描述性链接文字有助于搜索引擎理解您的内容。了解详情。 | ||
页面未被屏蔽，可编入索引 | 如果搜索引擎无权抓取您的网页，则无法将它们添加到搜索结果中。了解详情。 | ||
robots.txt 有效 | 如果 robots.txt 文件的格式不正确，抓取工具可能无法理解您希望以何种方式抓取网站内容或将其编入索引。了解详情。 | ||
文档的 hreflang 有效 | hreflang 链接用于告知搜索引擎应在特定语言或地区的搜索结果中显示哪种版本的网页。了解详情。 | ||
文档所用的字体大小清晰可辨 99.78% 清晰可辨的文字 | 12px 以下的字体过小，会导致用户无法辨认；此外，这样的字体需要移动设备访问者“张合双指进行缩放”才能阅读。请尽量让 60% 以上的页面文字不小于 12px。 | ||
文档中没有插件 | 搜索引擎无法将插件内容编入索引，而且许多设备都限制或不支持使用插件。 |
