概述
消除阻塞渲染的资源是一个重要的网页优化策略，它的目标是移除或推迟那些阻碍网页首次绘制的资源。通常来说，这些资源包括某些JavaScript脚本和CSS样式表。当这些资源在HTML文档的头部加载时，它们会阻塞浏览器渲染页面的过程，从而导致用户看到的页面加载延迟。通过内联关键资源，推迟非关键资源，以及移除未使用的内容，我们可以有效地减少这些资源对页面加载速度的影响，从而提升用户体验和网站性能。
解决方案
哪些URL被标记为阻塞渲染的资源?
阻塞渲染的URL：脚本和样式表
<script>标签：
位于文档的<head>中。
没有defer属性。
没有async属性。
<link rel="stylesheet">标签：
没有disabled属性，当此属性存在时，浏览器不下载样式表。
没有特别匹配用户设备的media属性，media="all"被认为可阻塞渲染。
如何识别关键资源
减少阻塞渲染资源影响的第一步是识别什么是关键资源。使用Chrome DevTools中的覆盖率标签来识别非关键的CSS和JS。当您加载或运行一个页面时，该标签告诉您使用了多少代码：
通过只加载您需要的代码和样式，您可以减小页面大小。点击URL以在Sources面板中检查该文件。CSS文件中的样式和JavaScript文件中的代码被标记为两种颜色：
绿色（关键）：用于首次绘制所需的样式；对页面核心功能至关重要的代码。
红色（非关键）：应用于内容不立即可见的样式；未被用在页面核心功能中的代码。
如何消除阻塞渲染的脚本
一旦您识别出关键代码，将该代码从阻塞渲染的URL，移动到HTML页面的内联脚本标签中。当页面加载时，它将具备处理页面核心功能所需的资源。
如果阻塞渲染的URL中有非关键的代码，您可以将其保留在URL中，然后用async或defer属性标记URL（参阅使用 JavaScript 添加交互性）。
完全没有被使用的代码应该被移除（见移除未使用的代码）。
如何消除阻塞渲染的样式表
与<script>标签中内联代码类似，将首次绘制所需的关键样式内联在HTML页面<head>下的<style>模块中，然后使用预加载链接异步加载其余样式（参阅Defer non-critical CSS）。
考虑使用Critical 工具自动提取和内联首屏的CSS代码。
消除阻塞渲染样式的另一种方法是将这些样式分割到不同的文件中，并按媒体查询进行组织，然后为每个样式表链接添加一个media属性。当加载加载页面时，浏览器仅阻止第一次绘制以检索与用户设备匹配的样式表（请参阅阻塞渲染的 CSS）。
最后，您需要缩小 CSS 以删除任何额外的空格或字符（请参阅缩减 CSS）。这可确保您向用户发送尽可能小的捆绑包。
针对特定技术栈的指导
#AMP
使用AMP Optimizer等工具在服务器端渲染 AMP 布局。
#Drupal
考虑使用一个模块来内联关键的CSS和JavaScript，或可能通过JavaScript异步加载资源，如高级CSS/JS聚合模块。
#Joomla
有一些Joomla插件可以帮助你内联关键资源或推迟较不重要的资源。
#WordPress
有一些WordPress插件可以帮助你内联关键资源或推迟较不重要的资源。
资源