消除渲染阻塞资源错误到底是什么时候发生的？
到目前为止，我们已经了解了消除渲染阻塞资源错误的本质及其破坏性影响，并且我们已经了解了一般情况下哪些文件会导致渲染阻塞。现在我们想看看这个错误到底是什么时候发生的。 正如我们所说，CSS和 JavaScript 文件是导致 GT Metrics 和其他网站速度测试工具（例如 Google Lighthouse）中出现消除渲染阻塞资源错误的主要来源。如果我们页面的代码中有以下一项，就会导致 GT Matrix 中出现 Eliminate render-blocking resources 的问题。 Lighthouse对此错误的定义与此类似，但有一些差异： <head> 中的 <script> 标记但不具有延迟或异步功能。 没有禁用或媒体属性的 <"link rel="stylesheet> 标记。 <“link rel=”import> 标签不具有异步功能。通过单击GT Matrix Structure 报告中的“消除渲染阻塞资源”错误，可以看到导致此错误的资源列表，这使我们可以很好地了解哪些文件导致渲染阻塞并需要优化。有时，“消除渲染阻塞资源”错误可能是优化网站速度时最重要的问题。正如您在下面的 伊朗电报数据 示例中看到的，这个错误导致了超过 9 秒的延迟。消除渲染阻塞资源错误对 TBT 的影响如图所示。有趣的是，这个页面的第一次绘制是 19.3 秒！ 错误示例 消除渲染阻塞资源 错误示例 消除渲染阻塞资源 如何修复消除渲染阻塞资源错误？ 好了，我们已经到达了这篇 Mizfa 文章的重要部分，即如何修复 GT Matrix 中的消除渲染阻塞资源错误。以下大多数方法都需要编程方面的专业知识和经验。但在一些插件的帮助下，这个错误可能会被修复到我们将提到的程度。
https://verifiedbadgeswebsite.files.wordpress.com/2024/04/fhfghg.jpg?w=519
将标签移动到HTML末尾 在本文开头的解释中，我们说过导致渲染阻塞的资源的主要问题是，当浏览器在检查HTML文档时到达这些资源时，必须停止渲染才能下载并运行它们。所以如果我们将此类文件移动到HTML文档的末尾，问题就会在一定程度上得到解决。当然，执行此方法需要了解代码和页面资源的状态。我们还应该注意结构报告，看看哪些资源导致了消除渲染阻塞资源问题。但无论如何，将 <script> 和 <link> 标记移动到HTML的末尾将使页面的必要资源首先加载，并且首次绘制将更快完成，并改善用户体验或UX 。当然，我再次强调，转移到最后的标签不应该是页面初始加载的必要资源之一。 3.使用延迟或异步功能 在本文中，我们多次提到 defer 和 async 属性。这些功能会延迟所需资源的下载和执行，或者导致在检查HTML文档的其余部分的同时下载资源。
頁:
[1]