如何消除渲染阻塞资源 | WP爱好者

已发表: 2021-12-10

如果您听到有关您网站加载速度的投诉或希望更快地加载您的网页并改善您的用户体验，您可能需要考虑如何消除渲染阻塞资源。

无论出于何种原因，网站出现在访问者面前的速度有多快都会影响用户体验并导致您的企业错失客户连接。 用户的网站体验主要取决于关键的渲染路径和在渲染过程中管理网站加载的脚本。

什么是渲染？

所有网站都遵循用户查看其内容并与之交互的路径。 加载网站的路径称为关键渲染路径。 该路径描述了每个站点为访问者及其浏览器收集和构建数据的步骤。

浏览器在渲染之前做什么

firefox 桌面浏览器图片
FireFox 桌面浏览器

输入网站 URL 会触发以下过程：

  1. 当用户请求特定 URL 时，导航完成。
    1. 发生 DNS 查找，其中服务器提供 IP 地址
    2. 浏览器和网站服务器执行 TCP 握手以建立连接
    3. 安全连接请求获得 TLS 协商或第二次握手交换
  2. 浏览器收到响应，并获取网站的代码
    1. 在 TCP 慢启动中接收到第一个数据包以调节网络流量
    2. 用户向服务器发送确认 (ACK) 以建立连接限制和发送速率。
  3. 浏览器解析信息并将数据转换为 CSS 对象模型 (CSSOM) 和文档对象模型 (DOM)。
    1. 构建 DOM 树（站点和页面结构）
    2. 预加载扫描程序收集外部资源，例如脚本和图像。
    3. CSSOM 被构建（样式树）
    4. JavaScript 在 CSSOM 构建时被编译
    5. 可访问性对象模型 (AOM) 是为辅助设备解释内容而构建的。
  4. 使用之前创建的 CSSOM 和 DOM 树进行渲染。

渲染页面时会发生什么？

FireFox 浏览器检查工具的图片
FireFox 浏览器检查工具

网站通过代码设计呈现，以完成网站的布局、样式、绘画，有时甚至是合成。 CSS 对象模型 (CSSOM) 和文档对象模型 (DOM)

风格

DOM 和 CSSOM 组合成一个渲染树，然后开始构建。 渲染树组织站点和每个唯一节点的可见节点、内容和计算样式。

布局

布局是架构遇到构造的步骤，为页面创建一个结构来显示渲染树中所有节点的宽度、高度和位置。 每个对象的大小和位置都已确定。

网站以盒子结构布局。 这些框可以调整为无限数量的不同视口大小。 当盒子结构改变尺寸时，这称为回流。

绘制：首次绘制和首次内容绘制 (FCP)

网站浏览器对页面进行任何渲染的那一刻称为“首次绘制”。 First Paint 可以是纯色背景色，仅取决于页面的代码。

首次内容绘制 (FCP) 是指网站访问者可以查看您页面上的内容（文本、图像、视频等）的可测量时刻。 FCP 测量从页面加载开始到呈现任何内容的时间点。

First Paint 和 FCP 与快速加载页面或快速性能不同，但是当网站访问者感知到快速加载页面时，用户体验变得更加积极。 微调您的 First Paints、加载时间和站点性能可以改善用户对加载时间的感知。

GTmetrix 中 WP Buffs 速度性能报告的图像
WP Buffs 在 GTmetrix 中加速性能报告

合成

网页使用对象重叠的层来组织结构。 合成是页面计算事物顺序以正确呈现它们的地方。

回流触发重新合成，因为对象定位在回流中经常发生变化。

什么是渲染阻塞资源

会减慢、延迟或阻止浏览器在网站上呈现内容的脚本、样式表和 HTML 导入是呈现阻塞资源。 当人们提到渲染阻塞资源时，他们通常指的是：

  • CSS
  • <head> 部分中的 JavaScript
  • 从服务器或内容交付网络加载的字体
  • HTML 导入（旧页面）

有很多 CSS 和 JavaScript 不是渲染阻塞的，并且对于在顶部附近加载至关重要。 优先考虑样式表，以确保任何网站访问者都能看到预期的内容，而不是无样式的内容或什么也没有。

什么是阻止渲染的 JavaScript 和 CSS？

在渲染过程中，您的浏览器首先通过运行 <head> 中的信息来加载网站信息，包括每个脚本。 在页面在浏览器中可见之前，所有脚本都需要按顺序运行并完全处理。

脚本构建到队列中，因此 <head> 中的脚本顺序在开发过程中至关重要。 根据代码的不同，它可能会减慢或阻止您的网站完全加载，这些就是我们所说的阻止渲染的 CSS 和 JavaScript。

WordPress 网站上的脚本可能来自主题、自定义作品或为各种功能添加的插件。

图像是渲染块资源吗？

如果您想知道图像是否是渲染阻塞资源，它们不是。 图片的大小仍然会导致您的页面出现负载问题，但它不应阻碍渲染。

为什么要消除渲染阻塞资源？

GT Metrix 中 WP Buffs 瀑布报告的图像展示了 elimante 渲染阻塞资源的示例
WP Buffs 瀑布报告

渲染阻止脚本会减慢页面加载时间并破坏访问者的网站体验。 如果您的网站体验不佳，则认为网站速度缓慢可能会导致访问者流失。 访问者保留率低会影响您的搜索引擎结果并降低您的结果列表。

较低的搜索引擎优化 (SEO) 排名意味着访问者的减少和潜在业务的损失。 排名下降会减少您的访问者数量，而糟糕的网站会降低您的访问者保留率； 渲染阻塞资源可能是一个大问题。

如果您的网站的目标是获得较高的 Google PageSpeed 分数，那么了解您的渲染阻止资源是实现该目标的关键。

如何消除渲染阻塞资源

认真对待您网站的 SEO 排名和用户体验意味着您的网站需要处理或删除渲染阻止资源。 如果您不是从头开始构建您的网站，请开始测试您的网站的渲染阻止资源。

一旦确定了这些渲染阻止资源，您将选择解决问题并改进站点功能的方法。

测试您的网站是否具有渲染阻止资源

Google PageSpeed Insights 报告测试渲染阻止资源的图片。
WP Buffs 的 Google PageSpeed 报告

在您的网站上运行评估以发现任何渲染阻止资源（试试 Google PageSpeed Insights）永远不会有坏处。 如果您已尽最大努力进行了优化，正在遵循最佳实践但仍然遇到问题，或者不知道从哪里开始，页面评估器可以成为有用的指南。

消除渲染阻塞 JavaScript 和 CSS 的方法

WordPress 允许您以几种不同的方式管理妨碍网站呈现的任何资源。 WordPress 将使您能够使用代码、标签、文件组织和优化以及插件来组织您的渲染阻止脚本和链接。

专业开发人员还可以创建自定义插件或主题，将这些流程构建到代码中。

使用代码删除渲染阻止 Javascript

通过代码解决渲染阻塞资源的三种方法是：

  1. 将 <script> 和 <link> 的标签移动到 HTML 代码的底部
  2. 为非关键脚本的标签添加 async 或 defer 属性。
  3. 删除未使用的 JavaScript 代码。

WordPress 加载一个 jQuery Migrate 文件以提供与插件和主题使用的旧版本 jQuery 的兼容性。 如果您的网站上没有任何东西需要它运行，您可以使用一段代码或插件来阻止 WordPress 加载此 jQuery Migrate 文件。

消除渲染阻塞样式表

样式表的性质使它们本质上是渲染阻塞资源。 您可以通过以下方式在您的网站上解决此问题：

  1. 按媒体类型（移动设备、平板电脑、桌面设备等）拆分 CSS
  2. 优化关键渲染路径
  3. 合并 CSS 文件

使用 WordPress 和可视化构建器，您可能无法直接控制页面的构建方式，但有一些方法可以解决任何问题。

使用 WordPress 插件或扩展解决呈现阻塞问题

WordPress 插件和扩展用于组织页面上的脚本。 插件将遍历您页面的 <script> 和 <link> 标记，并根据特定准则应用 defer 或 async 属性。

我们已经完成并测试了一系列适用于 WordPress 的插件，并继续在博客上分享我们最喜欢的用于速度优化的插件等有用的东西。

让 WordPress 专业人员为您消除渲染阻塞资源

一些插件需要自定义，虽然看起来很简单，但如果设置不正确，最终可能无法正常工作。 向 WordPress 专业人士寻求帮助并不可耻，而且 WP Buffs 有几位专家可以优化您的网站。

优化渲染的最佳实践

  1. 捆绑您的渲染阻塞资源以减少它们对页面加载的影响。
  2. 减小资源的大小，从而减少要加载的字节数。
  3. 推迟非渲染阻塞资源的下载。
  4. 不要使用 @import 规则添加 CSS，因为它是外部加载。
  5. 使用旨在缓存脚本并优化 JavaScript 和 CSS 的 WordPress 插件。
  6. 在本地加载自定义字体。
  7. 识别关键和非关键 CSS 和 JavaScript。
  8. 使用 async 或 defer 属性标记非关键的渲染阻塞代码。
  9. 应删除未使用的代码。

消除头痛并让 WordPress 专业人士帮助

WP Buffs 消除渲染阻塞资源的速度优化服务页面图片
消除渲染阻塞资源的速度优化服务，由 WP Buffs

WP Buffs 擅长优化 WordPress 网站和提高页面性能。 我们了解为什么绩效对您的业务很重要，以及需要关注哪些领域才能产生最显着的影响。

改善您网站的性能和访问者体验不仅仅是阻止渲染的资源。 WP Buffs 可以查看您的网站和地址：

  • 图像尺寸
  • 图像质量和交付格式
  • 页面长度和动态内容百分比
  • 构建不良的主题
  • 导致延迟的不必要脚本
  • 构建不佳的插件
  • 未使用的外部脚本
  • 过时的软件
  • 有限的网络托管计划无法充分支持网站的需求

WordPress 可以是一个相当容易建立网站的平台，但最大化用户体验需要训练有素的专业人士，或者通常是优秀的服务提供商。

经常问的问题

  • 什么是“消除渲染阻塞资源”？

    • 网站使用脚本和链接来访问文件和代码以在浏览器中构建网站。 有时脚本和链接需要一段时间才能加载并阻止网站的其他部分呈现给网站访问者。 消除渲染阻塞资源意味着解决减缓或阻止网站正确加载的脚本、链接、字体和文件。

  • 如何修复渲染阻塞资源？

    • 有不同的方法来修复渲染阻塞资源，您选择的武器将取决于您需要解决的问题。 找出哪些脚本和链接对加载您的页面至关重要，然后将其他脚本和链接推迟到需要时。 代码优先级可以通过代码或插件来完成。

  • 如何摆脱网站上的渲染阻止资源？

    • 如果您使用的是 WordPress，最简单的方法是使用高质量的插件来管理您的脚本和外部负载，方法是评估哪些是关键的，哪些可以推迟到渲染过程的后期。 插件无需手动评估代码并为手动组织的每个脚本分配标签（这仍然是可能的和鼓励的），插件会自动为您处理。

  • 如何在没有插件的情况下修复/消除渲染阻塞资源？

    • 如果您不打算向您的网站添加另一个插件，或者插件不适合您，那么还有其他方法可以修复渲染阻塞资源。 您可以手动优化代码中的任何脚本和链接，以确保它们以有效的顺序加载，或者推迟加载该脚本，直到必要的功能完成后。