如果您通过 Lighthouse 运行您的网站，您可能已经注意到删除渲染阻塞资源的建议。
通过延迟 JavaScript 和内联重要的 CSS 样式，您可以摆脱 WordPress 中会减慢渲染速度的资源。 大多数缓存插件、Autoptimize 和 Async JavaScript 都支持这一点。 Elementor和Divi都有内置的方法来摆脱阻止页面呈现的资源，使用延迟和内联 CSS。 删除不需要的 CSS、JavaScript 和第三方代码也有助于解决问题。
在本文中，我们将定义渲染阻塞资源并讨论从您的网站中删除它们的优势。 然后，我们将演示五种替代方法来为您摆脱它们。
什么是渲染阻塞资源 ?
在我们更仔细地研究渲染阻塞资源之前，了解典型的网站加载过程至关重要。 您网站的全部内容必须在访问者单击链接后由其浏览器呈现（或下载）。 它从上到下读取您网站上的所有 HTML、CSS 和 JavaScript。 在浏览器完成读取此脚本队列之前，访问者将看不到您的网站。 如果存在渲染阻塞资源，他们可能需要等待很长时间。 基本上，阻止浏览器在处理其他内容时加载其他内容的 CSS 或 JavaScript 文件是渲染阻塞资源。 这可能会停止呈现过程并使页面看起来未完成或空白。
创建令人惊叹的网站
使用最好的免费页面构建器 Elementor
现在开始当您的网站上存在阻止渲染的资源时，额外的文件会加载到代码的顶部。 在查看网站之前，用户必须等待处理这些文件。 渲染阻塞资源有可能影响多个网站性能指标。 例如，最大的内容绘制衡量页面主要内容加载所需的时间。 来自您站点的文档对象模型 (DOM) 的材料第一次由浏览器呈现被称为首次内容绘制。 Totalblockingtime 是第一次内容绘制和交互时间之间的时间（页面变得完全交互需要多长时间）。
尽管它们不是加载所必需的，但渲染阻塞资源会阻碍渲染。 您网站的用户体验可能因此受到影响 (UX)。 因此，摆脱这些以阻止访问者离开您的页面至关重要。
消除渲染阻塞资源的好处
互联网用户通常不喜欢等待网站加载。 一个快速的网站可以吸引用户浏览您的资料并阻止他们访问竞争对手。 通过删除渲染阻止元素，您可以有效地使您的网站代码尽可能地精简，这可能是提高页面速度的秘诀。 由于网站性能和用户参与度是 Google 等搜索引擎巨头在评估网站时考虑的两个因素，因此删除呈现阻止文件有助于提高您网站的搜索引擎排名。
如何消除 WordPress 中的渲染阻塞资源
既然您了解了如何在 WordPress 中发现它们，您可能想知道如何从您的网站中删除渲染阻止元素。 幸运的是，我们从最简单的方法开始，列出了您可以用来实现此目的的许多方法。
优化 CSS 加载
提高网站上 CSS 的加载速度是摆脱渲染阻塞资源的一种技术。 如前所述，浏览器从上到下加载您的网页。 当需要处理某些文件时，这可能会导致加载过程花费更长的时间。 请务必记住，只有一些 CSS 文件必须加载才能显示页面。 因此，您可以在优化 CSS 加载时优先显示最关键的文件。 可以手动删除阻止渲染的 CSS，但您也可以安装插件来简化操作。 您可以使用 Jetpack Boost 直接从您的 WordPress 控制面板优化您的网站。 这个插件使得实现延迟加载、延迟非必要的 JavaScript 和改进 CSS 加载变得简单。 在 WordPress 中摆脱渲染阻塞资源的最简单方法之一就是执行此操作。
首先在您的 WordPress 仪表板的“插件添加新”下搜索 Jetpack Boost。 安装并打开您网站上的插件。
如果您已经加载了 Jetpack，则可以转到 Jetpack My Jetpack。 寻找 Boost 并从 Jetpack 商品列表中选择激活。
激活插件后，单击 Jetpack Boost 选项卡并选择开始使用。
您的网站将立即收到 Jetpack 的性能评级。 您会在桌面和移动乐谱上看到字母评分以及信息。
然后，通过向下滚动到优化 CSS 加载来激活此功能。 激活后，Jetpack Boost 将为您的网站提升关键的 CSS，以便加载速度更快。
推迟非必要的 JavaScript
除了优化 CSS 加载之外，您还可以采取更多措施来摆脱 WordPress 中的渲染阻塞资源。 非必要的 JavaScript 也可以推迟，以进一步加快您网站的加载速度。 可以延迟非必要的 JavaScript 以延迟某些进程，直到您的内容加载完毕。 如果页面加载不需要 JavaScript 文件，您可以阻止浏览器执行这些文件。 幸运的是，使用 Jetpack Boost 插件可以直接做到这一点。 优化 CSS 加载过程后，您可以轻松推迟非必要的 JavaScript。 将 Defer Non-Essential JavaScript 区域的切换开关打开。 此部分位于优化 CSS 加载部分下方。
启用此设置后，该插件将更新其对页面整体性能的评估。 使用 Jetpack Boost 之前和之后的分数都会显示。
看看我们完成此过程之前和之后截取的屏幕截图中的分数。 您会注意到，提高页面速度是通过延迟非必要的 JavaScript 和更有效地加载 CSS 来实现的。 浏览器可以更快地加载您的内容，因为它们不必执行大型脚本。
延迟屏幕外图像
虽然图像不是阻止页面呈现的资源，但您可能需要考虑加快它们的加载时间。 网站经常有屏幕外的图片，这些图片在用户与页面交互（例如滚动）之前不会显示。 您可以使用延迟加载来推迟这些，因为它们不是加载网页所必需的。 只有访问者可以看到的图像才会以惰性方式加载。 一旦用户滚动，这些照片将在它们显示在页面上之前加载。 如果未启用延迟加载，浏览器将尝试一次加载页面上的每个图像。 您的材料加载时间越长，访问者离开您网站的可能性就越大。
如果访问者使用的是台式计算机，则定期加载可能不是问题。 另一方面，智能手机和平板电脑的屏幕更小，带宽也更少。 如果一次完全加载所有照片，您的网站可能会消耗更多带宽并需要更长的时间来加载手机用户。 此问题已通过延迟加载解决。
要在您的网站上启用延迟加载，请使用 Jetpack Boost。 只需寻找延迟图像加载选项并启用它。
如果您这样做，查看者只会在向下滚动页面时看到图像加载到您的网站上。 即使照片不是呈现块的资源，启用延迟加载也可以加快页面速度。
使用 Elementor/Divi 消除渲染阻塞资源
Elementor和Divi都包含用于移除渲染阻碍资源的选项。
在Elementor Experiments 设置中启用改进的 CSS 加载和内联字体，以内联加载 CSS 和字体，使它们不会呈现阻塞。 改进的资产加载消除了不需要的 CSS/JavaScript，从而以多种方式改进了基本的 web vitals。
通过应用关键 CSS、延迟 CSS/JavaScript 和内联加载字体， Divi的性能选项还可以减少渲染阻塞资源。
手动删除渲染阻塞 JavaScript
您也可以手动删除渲染阻塞资源，尽管安装优化插件是一个更容易的选择。 理想情况下，如果您是一位经验丰富的编码员，您应该只考虑这个选择。 如果您希望减少网站上的插件数量，此过程可能也会有所帮助。 你可以给你的文件一个 async 或 defer 属性来帮助 JavaScript 更有效地运行。 将指示浏览器通过标记非关键脚本来单独呈现非关键脚本。 这两个特性都可以用来加速 HTML 信息的加载。
HTML 文件以典型方式进行解析，直到它遇到脚本文件。 解析将在找到脚本时停止。 下载并运行后，解析继续。
在处理剩余的 HTML 时，浏览器可以下载 JavaScript，这要归功于异步功能。 下载后，它可以停止 HTML 处理并运行脚本。
defer 属性的工作方式类似，允许浏览器在解析 HTML 时下载脚本。 区别在于它还会延迟运行脚本，直到 HTML 解析完成。
您必须在 functions.php 文件中包含一段代码才能实现这些属性中的任何一个。 您必须首先找到渲染阻塞资源的 script> 标签。 以下作为异步属性：
<script src="resource.js" async></script>作为替代方案，请考虑使用 defer 属性时脚本的外观：
http://resource.js虽然插件可以为您处理这些属性，但您自己动手做可能更适合您的喜好。 如果是这样，了解何时应用每个属性至关重要。 对于依赖于另一个脚本的非必要脚本，您必须使用 defer 属性。 async 选项适用于任何其他脚本。
使用插件应用异步或延迟属性
如果您在手动编辑脚本时遇到问题，请使用 Async JavaScript 等插件。 借助此工具，您可以完全控制哪些脚本具有 async 或 defer 属性。
安装插件后，在设置异步 JavaScript 下选择启用异步 JavaScript。
接下来，转到标题为异步 JavaScript 方法的部分。 您可以在此处选择是否启用异步或延迟属性。
排除这些脚本是个好主意，因为许多插件都依赖于 jQuery。 将异步属性应用于 jQuery 可能会导致您的网站崩溃。
如有疑问，您可以使用 defer 属性，但最好的做法是完全排除 jQuery。
您现在可以指定要以异步或延迟方式运行的脚本。 您必须小心地将每个脚本放在适当的部分中。
您可以在“脚本排除”部分下列出要从此过程中排除的任何脚本。
页面底部还有用于排除插件和主题的选项。 您在此处提到的任何主题或插件的脚本都不适用于异步或延迟特性。
进行任何必要的调整后，您可以单击保存设置。 这种方法可能是手动更改脚本和使用插件为您处理任务之间的一种有用的折衷方案。 作为替代方案，您可以使用 Jetpack Boost 等一体化应用程序来消除这些额外步骤。
包起来
通过让访问者的浏览器在下载不是立即需要的资产时推迟呈现首屏内容，呈现阻塞资源会增加 WordPress 网站的感知页面加载时间。 您应该延迟加载不是立即需要的资源，以帮助访问者更快地加载页面的可视区域。 使用预制插件摆脱 WordPress 上的渲染阻塞资源。 您可以将 Autoptimize 和 Async JavaScript 这两个由同一开发人员创建的插件结合起来，以获得免费的解决方案。 您可以使用 WP Rocket，它提供与 Kinsta 的特定交互，并且可以帮助进行许多额外的 WordPress 性能调整，如果您准备为此付费的话。
