Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

网站不使用延迟首次绘制的资源

为什么说此审查非常重要

快速的页面加载可提高对用户的吸引力、增加网页浏览量和提高转化率。

通过内联首次绘制所需的链接和脚本,并延迟首次绘制不需要的链接和脚本,您可以提升页面加载速度。

如何通过此审查

在您的报告中,Lighthouse 列出了其检测到的所有阻塞渲染的链接或脚本。 您的目标是减少这些链接或脚本的数量。

正如如何实现审查中所述,Lighthouse 标记三种类型的阻塞渲染的链接:脚本、样式表和 HTML 导入。如何进行优化取决于您正在使用的资源类型。

  • 对于关键脚本,考虑在您的 HTML 中内联它们。对于非关键脚本,考虑使用 asyncdefer 属性标记它们。请参阅使用 JavaScript 添加交互了解更多信息。
  • 对于样式表,考虑将您的样式分成不同的文件,按媒体查询进行组织,然后向每个样式表链接添加一个 media 属性。在加载页面时,浏览器仅阻止首次绘制以检索与用户的设备匹配的样式表。请参阅阻塞渲染的 CSS 了解更多信息。
  • 对于非关键的 HTML 导入,使用 async 属性标记它们。作为一般规则,async 应尽可能与 HTML 导入一起使用。

如何实现此审查

本部分介绍如何实现此审查,以便您可以了解计算此审查得分的方式。

Lighthouse 可标识三种类型的阻塞资源。

<script> 标记,其具有以下特征:

  • 位于文档的 <head> 中。
  • 没有 defer 属性。
  • 没有 async 属性。

<link rel="stylesheet"> 标记,其具有以下特征:

  • 没有 disabled 属性。如果具有此属性,则浏览器不会下载样式表。
  • 没有与用户的设备匹配的 media 属性。

<link rel="import"> 标记,其具有以下特征:

  • 没有 async 属性。