Lighthouse 报告的“优化建议”部分会列出阻止对网页进行首次渲染的所有网址。我们的目标是通过内嵌关键资源、推迟非关键资源并移除任何未使用的资源来减少这些阻止呈现的网址的影响。
哪些网址会被标记为阻止呈现的资源？
Lighthouse 会标记两种类型的阻塞渲染网址：脚本和样式表。
具有如下功能的 <script> 标记：
- 在文档的
<head>中。 - 没有
defer属性。 - 没有
async属性。
具有如下功能的 <link rel="stylesheet"> 标记：
- 没有
disabled属性。如果具有此属性，浏览器不会下载样式表。 - 没有具体与用户设备匹配的
media属性。media="all"被视为阻塞渲染。
如何识别关键资源
为减少阻塞渲染的资源的影响，第一步是确定哪些资源至关重要，哪些资源不重要。使用 Chrome 开发者工具中的“Coverage”标签页来识别非关键 CSS 和 JS。 在加载或运行网页时，该标签页会向您显示使用的代码量，而非加载的代码量：
您可以只提供所需的代码和样式，从而缩减页面大小。点击某个网址即可在“Source”面板中检查相应文件。 CSS 文件中的样式和 JavaScript 文件中的代码以两种颜色标记：
- 绿色（关键）：首次绘制所需的样式；对页面核心功能至关重要的代码。
- 红色（非关键）：应用于内容的样式不会立即可见；代码没有用于网页核心功能。
如何消除阻塞渲染的脚本
确定关键代码后，请将该代码从阻止呈现的网址移到 HTML 网页中的内嵌 script 标记。网页加载时，该网页将具备处理网页核心功能所需的数据。
如果阻止呈现的网址中包含不重要的代码，您可以将其保留在网址中，然后使用 async 或 defer 属性标记该网址（另请参阅使用 JavaScript 添加互动）。
应移除完全未使用的代码（请参阅移除未使用的代码）。
如何消除阻塞渲染的样式表
与 <script> 标记中的内嵌代码类似，在 HTML 页面 head 的 <style> 代码块内，首次绘制所需的内嵌关键样式。然后，使用 preload 链接异步加载其余样式（请参阅推迟未使用的 CSS）。
请考虑使用关键工具自动执行提取和内嵌“首屏”CSS 的过程。
另一种消除阻塞渲染的样式的方法是将这些样式拆分成不同的文件，按媒体查询进行整理。然后为每个样式表链接添加媒体属性。 加载网页时，浏览器只会阻止首次绘制以检索与用户的设备匹配的样式表（请参阅阻塞渲染的 CSS）。
最后，您需要缩减 CSS 的大小，以移除所有多余的空格或字符（请参阅缩减 CSS 大小）。 这可确保向用户发送最小的 bundle。
针对特定堆栈的指南
AMP
使用 AMP 优化工具等工具在服务器端呈现 AMP 布局。
Drupal
请考虑使用模块来内嵌关键的 CSS 和 JavaScript，或者可以通过 JavaScript（例如高级 CSS/JS 聚合模块）异步加载资源。
Joomla
有许多 Joomla 插件可以帮助您内嵌关键资源或推迟不太重要的资源。
WordPress
有很多 WordPress 插件可帮助您内嵌关键资源或推迟加载不太重要的资源。