什么是渲染阻塞资源以及如何修复渲染阻塞问题

已发表: 2018-02-28

渲染阻塞资源是网站加载缓慢的最常见原因之一。 如果您的网站速度不够快，您不仅会损害访问者的用户体验，还会损害您的搜索引擎排名。 坏消息是，如果您的网站运行缓慢，您将失去客户和收入。

但是，也有好消息——您可以通过消除渲染阻塞资源来提高网站速度。 在本文中，我们将解释渲染阻塞资源如何影响您的加载时间，并向您展示如何修复它们。

什么是渲染阻塞资源？

最常见的渲染阻止资源是位于网页头部的 JavaScript 和 CSS 文件。 它们加载在折叠区域（或您在向下滚动以查看其余内容之前通常在网站上看到的区域）上方，并且是 Web 浏览器使用的关键渲染路径的一部分。

用外行的话来说，这意味着需要发生某些事件才能让您的浏览器正确显示（呈现）任何网页的初始视图。 以下是基本渲染路径如何工作的示例：

  • 浏览器下载一个网页，该网页由一个包含网页结构的 HTML 文件组成
  • 然后浏览器读取 HTML 并注意到 3 个附加文件：一个 css 文件、一个 javascript 文件和一个图像
  • 浏览器会先下载图片
  • 然后浏览器意识到如果不获取 CSS 和 JavaScript，它就无法继续显示页面
  • 浏览器下载 CSS 文件并读取它以确保没有调用其他内容
  • 浏览器下载 JavaScript 文件并读取它以确保没有调用其他内容
  • 浏览器终于​​可以显示网页了

当浏览器忙于加载和读取每个 CSS 和 JavaScript 文件时，您的访问者正盯着一个空白屏幕，等待您的网站加载。 如果您使用 WordPress 之类的 CMS，您的浏览器可能会忙碌一段时间，因为它不仅需要加载主题的样式和脚本文件，还需要加载 WordPress 本身附带的脚本和样式文件以及您正在使用的所有插件和小部件随附的那些。

在优化您的网站速度时，您列表中的第一个任务应该是减少用户查看您的内容并与之交互所需的时间。 最简单的方法是优化您的关键渲染路径。

如何修复渲染阻塞问题

既然您知道了导致渲染阻塞问题的原因以及它们如何影响您网站的速度，那么让我们来谈谈如何解决这些问题。

渲染阻塞 CSS

有三种方法可以解决渲染阻塞 CSS 问题：

  • 正确调用你的 CSS 文件——你的 CSS 文件应该像这样链接到你的 HTML 文件中： <link rel="style.css" href=“style.css">而不是依赖于使用@import方法。 @import方法通常会在您的常规样式表的顶部附近，并导致浏览器在读取 CSS 文件的其余部分之前返回并找到导入的文件，并在渲染您的网页时导致更大的延迟
  • 减少关键路径中 CSS 文件的数量——如果可能，将所有不同的 CSS 文件合并为一个，并从 HTML 中删除对这些文件的调用

渲染阻止 JavaScript

要删除阻止渲染的 JavaScript，您需要知道加载了多少 JavaScript 文件以及它们在 HTML 中的什么位置调用。 找出这一点的一个好方法是使用 Google PageSpeed Insights 工具。 当总部位于澳大利亚的清洁公司 This Is Neat Cleaning 构建他们的网站时，他们使用 Google 的 PageSpeed Insights 作为基准，测试各种场景以找出他们对移动设备和桌面设备的确切需求。

从测试中可以明显看出，将大多数脚本插入 HTML 文件的底部会产生最好的结果。 主要原因是将脚本移动到页面底部删除了阻止 javascript 阻碍用户体验的渲染。 由于关键 CSS 仍在首屏加载，用户仍然可以从根本上使用该网站，而交互和功能仍在后台加载。

使用插件

当然，与 WordPress 相关的任何内容一样，您可以使用插件来修复渲染阻塞问题。 由于总活跃安装量超过一百万，This is Neat Cleaning 将使用 W3 Total Cache 进行缓存、缩小和性能优化是理所当然的。

以下是使用 W3 Total Cache 修复渲染阻塞问题的方法。

在您的 WordPress 仪表板中，转到性能 > 设置并向下滚动到缩小部分。 选中启用复选框，然后从缩小模式旁边的下拉菜单中选择手动。 保存设置。 然后，您需要添加要缩小的所有脚本和样式。

要找出阻止呈现的脚本和样式表的位置，请转到 Google Page Speed Insights Tool 并分析您的网站。 然后，查看建议选项卡并找到以下部分：消除首屏内容中的渲染阻塞 JavaScript 和 CSS 。 单击显示如何修复并选择和复制文件的 URL。

返回您的 WordPress 仪表板并导航到W3 Total Cache > Performance > Minify 。 向下滚动到 JavaScript 部分，并在区域中的操作下确保嵌入类型设置为非阻塞，使用 defer为<head>部分。 然后，单击添加脚本按钮并粘贴您从 Google PageSpeed 工具复制的 URL。

添加完所有脚本文件后，向下滚动到CSS部分，单击添加样式表并添加从 Google PageSpeed Insights 复制过来的样式表文件的 URL。

完成后，单击保存设置并清除缓存按钮。

最后的想法

在网站速度方面，渲染阻止资源可能会造成严重破坏。 幸运的是，有几种方法可以解决这些问题，因此请使用此处提供的提示来提高您网站的速度并确保您的访问者获得最佳的用户体验。