如果您曾经使用 Google Page Insights 分析过您的网站，那么您可能已经看到过一条警告，提示您应消除阻止渲染的脚本。也许这就是您阅读本文的原因。什么是阻止渲染的脚本？如何消除它们？以下是您可能正在问自己的问题，我们将在本文的其余部分中回答这些问题。
什么是阻止渲染的脚本？
阻止脚本是网站文件中的代码部分，通常是 CSS 和 JavaScript，它们会阻止网页快速加载。这些资源需要相对较长的时间才能被浏览器处理，但对于用户的即时体验而言可能并非必需。可以删除或延迟阻止渲染的脚本，直到浏览器需要处理它们为止。
不要误会我的意思：CSS 和 JavaScript 很棒。没有 CSS，网站看起来就像文本块。没有 JavaScript，我们将无法向我们的网站添加动态、交互式和引人入胜的元素。但是，如果在错误的时间使用，CSS 和 JavaScript 可能会损害您网站的性能。
原因如下：当浏览器首次加载网页时
它会解析页面上的所有 HTML 代码，然后再将其显示在访问者的屏幕上。当浏览器遇到 CSS 文件、JavaScript 文件或内联脚本（即 HTML 文档本身内的 JavaScript 代码）的链接时，它会暂停 HTML 解析以检索和执行代码，从而减慢整个过程。
为什么阻止脚本对您的网站不利？
渲染阻止 JavaScript 和 CSS 会减慢您的页面速度，这出于多种原因都是不利的。网站速度在您网站的许多关键方面都发挥着作用，包括可用性和搜索引擎优化 (SEO)。当您的网站加载缓慢时，您可能会失去访问者并在搜索引擎上排名较低。
当然，网站的速度不仅仅受到渲染阻止的影响。也就是说，它是一个 准确的手机号码列表 可以对加载时间产生重大影响的因素。请记住，网页上的每个资源都会占用字节，而这些字节越多，下载时间就越长。您的网站拥有的脚本越少，越精简越好。
一般来说，最好让您的网站代码尽可能干净和精简，以提高整体性能。但是，总会有一些“剩余”代码。默认情况下，浏览器会尝试一次加载所有内容，包括阻止脚本。
您需要确保您的网站首先加载必要的脚本，以便在访问者进入页面时它是正确且可用的。只有这样，才能加载其余的脚本。
识别阻止脚本
在对网站进行任何更改之前，您应该首先识别并找到阻止脚本。最好的方法是使用免费的在线工具，例如 工具。粘贴您网站的 URL 并点击分析。
分析完成后，Google 会为您的网站提供总体速度分数，范围从 0（最慢）到 100（最快）。 50 到 80 之间的分数是平均分数，因此您的分数应该处于或高于该范围的上限。
要识别导致页面速度变慢的阻塞脚本，请向下滚 潜在客户生成与需求生成：有何区别？ 动到“机会”部分并打开“消除渲染阻塞资源”折叠面板。
您将看到一个导致页面“首次查看”速度变慢的文件列表 – 这些文件会影响页面首次加载时出现的所有内容的加载时间。这也称为“首屏”内容。记下以 和 .j扩展名结尾的所有文件并删除它们。
删除阻塞脚本：手动或使用插件
现在您已经确定了问题，有两种方法可以修复它：手动或使用插件。
插件可以很好地为您删除阻塞脚本
但插件本身只是添加到您的 Web 服务器的额外文件。如果您想限制 BA 领先 这些文件的数量，或者您只是喜欢自己处理更改，则可以手动解决渲染阻塞问题。为此，请在您的网站文件中找到您在 分析期间确定的 <script> 标记。
<script> 标记告诉浏览器加载并执行由 src（源）属性标识的脚本。此过程的问题是，此加载和执行会延迟浏览器对网页的解析，从而影响您网站的整体加载时间。
要解决此问题，您可以将或 defer 属性添加到用于阻止脚本的脚本标记。async 和 defer 的位置如下：
尽管它们对加载时间的影响相似，但这些属性告诉浏览器做不同的事情。async 属性告诉浏览器在解析页面的其余部分时加载 JavaScript 资源，并在加载后立即执行该脚本。运行脚本会暂停 HTML 解析。
具有 defer 属性的脚本也会在解析页面时加载。
