为什么说此审查非常重要
快速的页面加载可提高对用户的吸引力、增加网页浏览量和提高转化率。
通过内联首次绘制所需的链接和脚本,并延迟首次绘制不需要的链接和脚本,您可以提升页面加载速度。
如何通过此审查
在您的报告中,Lighthouse 列出了其检测到的所有阻塞渲染的链接或脚本。 您的目标是减少这些链接或脚本的数量。
正如如何实现审查中所述,Lighthouse 标记三种类型的阻塞渲染的链接:脚本、样式表和 HTML 导入。如何进行优化取决于您正在使用的资源类型。
- 对于关键脚本,考虑在您的 HTML 中内联它们。对于非关键脚本,考虑使用
async
或defer
属性标记它们。请参阅使用 JavaScript 添加交互了解更多信息。 - 对于样式表,考虑将您的样式分成不同的文件,按媒体查询进行组织,然后向每个样式表链接添加一个
media
属性。在加载页面时,浏览器仅阻止首次绘制以检索与用户的设备匹配的样式表。请参阅阻塞渲染的 CSS 了解更多信息。 - 对于非关键的 HTML 导入,使用
async
属性标记它们。作为一般规则,async
应尽可能与 HTML 导入一起使用。
如何实现此审查
本部分介绍如何实现此审查,以便您可以了解计算此审查得分的方式。
Lighthouse 可标识三种类型的阻塞资源。
<script>
标记,其具有以下特征:
- 位于文档的
<head>
中。 - 没有
defer
属性。 - 没有
async
属性。
<link rel="stylesheet">
标记,其具有以下特征:
- 没有
disabled
属性。如果具有此属性,则浏览器不会下载样式表。 - 没有与用户的设备匹配的
media
属性。
<link rel="import">
标记,其具有以下特征:
- 没有
async
属性。