WordPress交流

改善WordPress中首次内容绘制（FCP）的10种有效方法

—

目录

右键点我复制链接地址，分享页面有积分。

2019年初，谷歌宣布，他们将通过关注两个性能指标来评估网站的速度排名：首次内容绘制（FCP）和首次输入延迟（FID）。

随着时间的推移，性能方案也在不断发展。谷歌宣布了三个核心网络指标：最大内容绘制（LCP），累积布局偏移（CLS）和首次输入延迟（FID）。

尽管如此，“首次内容绘制”指标继续作为灯塔（和用户体验）指标发挥重要作用。它占整体性能分数的 10%。

您的网站在速度测试中加载时间可能会低于 2 秒，但如果大多数访客群体并没有这么快，那么 Google 仍然会惩罚您。

在本文中，您将了解什么是“首次内容绘制”以及它的重要性。接下来，我们将继续讨论各种方法，您可以在WordPress上提高您的First Contentful Paint等级并减少其加载时间。

什么是首次内容绘制 （FCP）？

  • 首次内容绘制 （FCP） 是以用户为中心的指标，用于测量页面的加载速度。FCP 体现的是网站面对真实访客的性能，而不是速度测试工具测试的内容。
FCP 出现在第二帧中，并用橙色框标记（来源：Google)

首次内容绘制不同于首次绘制，后者是页面加载时间轴中的一个点，可在浏览器中检测到任何类型的渲染。另一方面，FCP 需要呈现一些内容。此内容可以是文本、图像（包括背景图像、徽标）或非白色<canvas>元素。

GTMetrix 的“时序”选项卡中的首次内容绘制

第一个内容绘制也不同于最大内容绘制 （LCP），LCP 是衡量最大可见元素在视口中可见所需的时间的核心 Web 指标之一。

为简单起见，您可以将 FCP 视为用户在其浏览器上查看任何内容所需的时间。因此，快速的 FCP 可以让用户放心，网站是正常的，等着就好，这会留着客户。

如何测量首次内容绘制 （FCP）

First Contentful Paint可以通过实验室测试和实际使用经验（现场数据）来测量。以下是一些可用于测量 FCP 的工具：

什么是好的第一次内容绘画分数？

根据Google的说法，First Contentful Paint应该小于1.8秒。这为您网站的访问者提供了良好的用户体验。

如果您网站的 FCP 需要 3+ 秒，则认为它很慢。根据研究，如果加载超过 3 秒，超过 53% 的移动用户会离开网站。请认真对待这个指标。

如何在WordPress中改善首次内容绘制（FCP）时间

我们已经解决了什么是 FCP 以及为什么它很重要。这里有10种方法可以改善WordPress网站上的First Contentful Paint分数。目标是将首次内容绘制时间减少到 1.8 秒以下：

  1. 缩短服务器响应时间 （TTFB）
  2. 消除渲染阻塞资源
  3. 生成关键路径 CSS 并将其内联
  4. 避免基于脚本的元素首屏
  5. 避免延迟加载首屏图像
  6. 内联基本图像
  7. 优化站点的 DOM 大小
  8. 确保文本在网页字体加载期间保持可见
  9. 使用浏览器资源提示
  10. 避免多个页面重定向

让我们详细看看具体操作。

1. 缩短服务器响应时间 （TTFB）

服务器响应时间或到第一个字节的时间 （TTFB） 是浏览器接收网页内容的第一个字节所花费的时间。

TTFB 公式

FCP 不仅仅依赖于 TTFB，但这是实现这一目标的第一步。

FCP = TTFB + 内容加载时间 + 渲染时间

由于 FCP 高度依赖于 TTFB，因此它是您需要优化以改进首次内容绘制的最重要因素。

有 很多方法可以减少WordPress中的TTFB。如本文所述，减少TTFB的三种最简单方法是：

选择一个快速托管服务提供商

您可以参考  关于网络托管的文章，了解选择出色的网络托管解决方案需要考虑的因素。一般来说，选择服务器靠近用户的主机。

使用高质量的 CDN

高质量的 CDN 可以帮助加快交付您网站的静态资源，如图像、视频和脚本。这将显著减少服务器和用户之间的网络延迟。有关如何为您的网站选择最佳 CDN 的更多信息，请查看  CDN 指南。

为您的网站启用缓存

缓存通过减少服务器处理时间来帮助减少 TTFB。大多数顶级托管WordPress托管服务提供商都启用了服务器级缓存，请查看您购买的套餐内容。

2. 消除渲染阻塞资源

网页在将许多元素（如 HTML、CSS 样式表、JavaScript 脚本和 HTML 导入）放在一起后由浏览器呈现。

HTML 文档本身包含各种标签，但大多数浏览器都会快速解析它们。但解析CSS和JS的情况并非如此。

通常，浏览器会先尝试下载所有网页元素，分析所有元素，然后呈现网页。通常情况下，与CSS样式表和JS脚本相比，HTML文档的大小要小得多。CSS和JS资源的数量通常也偏高。

因此，当用户请求网页时，浏览器已经收到了 HTML 内容，但在呈现页面之前仍将等待加载所有其他资源。因此，它们被称为渲染阻塞资源。

此行为会大大降低 FCP。因此，要改进 FCP，您需要消除这些渲染阻塞资源。您可以通过以下方式执行此操作：

内联关键资源

首先，确定呈现网页的 FCP 所需的关键脚本和样式。以下是Google关于如何识别关键资源的简单指南。

确定关键脚本后，需要将它们从呈现阻止资源中删除，然后使用 <script> 和 <style> 标记将它们内联到 HTML 页面中。

通过执行此操作，您将确保网页在加载时具有处理其核心功能所需的一切。

推迟非关键资源

对于非关键资源，您需要使用异步或延迟属性标记 URL。

建议将 defer 属性添加到非关键脚本的 URL。这将指示浏览器仅在完全解析 HTML 文档后执行脚本文件。

以下是延迟脚本文件的方法：

<script defer src="/path/to/file/script.js">
</script>

对于非关键样式表，建议将异步属性添加到其 URL 中。这会告诉浏览器异步加载样式，而其余页面元素继续不间断地加载。
由于样式表是使用 <link> 标记加载的，因此没有直接的方法将 async 属性应用于它们。但是有一个解决方法，这是您可以实现它的方法：

<!-- Setting “media” type as ‘print’ forces the browser to load the stylesheet asynchronously. 
On full page load, the media type is changed to ‘all’ so that the stylesheet gets applied. -->
 <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
 <!-- Fallback for when JavaScript is disabled, but in this case CSS can’t be loaded asynchronously. -->
 <noscript><link rel="stylesheet" href="style.css"></noscript>

删除任何未使用的内容

在识别关键资源时，您可能会发现网页上未使用的代码。删除任何未使用的代码（例如删除未使用的 JavaScript）将帮助您进一步优化网页。

3. 生成关键路径 CSS 并内联它

如果已将 CSS 设置为异步加载，则浏览器将在加载所需样式之前向用户显示无样式的内容。此行为称为无样式内容 （FOUC） 的 Flash ，对用户来说是一种不愉快的体验。

为了防止 FOUC，您需要生成关键路径 CSS 并将其直接内联到 HTML 文件中。

使用渲染阻止 CSS 加载页面（顶部）与内联关键 CSS（底部）（来源：Google)

但究竟什么是关键路径CSS？

关键路径 CSS 是向用户显示网页的第一部分（首屏）所需的最低限度的 CSS。

手动分析浏览器的关键渲染路径，然后生成关键路径CSS是一个繁琐的过程。这超出了本文的范围。

但是，您可以使用免费的在线工具（如Pegasaas）来生成关键路径CSS。它非常适合大多数用例。查看 Google 的 分析关键渲染路径性能 了解更多信息。

生成关键路径 CSS 后，您需要将其内联到 HTML 文档中。浏览器现在可以立即呈现网页的第一部分，而无需等待 CSS 样式表异步加载。这大大改善了 FCP。

4. 避免基于脚本的元素

无论你优化JavaScript有多好，与处理纯HTML相比，它仍然慢。任何需要JS的东西都会对FCP产生负面影响。

虽然您可以内联关键脚本，但仍需要加载和分析它们。在改进 FCP 方面，每一毫秒都很重要。这是宝贵的加载时间，会损害您的 FCP 分数。

太多基于脚本的元素破坏了 FCP

许多主题包括使用大量脚本的奇特元素。使用添加大量不必要的样式和脚本的页面生成器也是如此。因此，请明智地选择您网站的主题。使用编码良好、快速的主题可以帮助大大减少首次内容绘制时间。

作为一般规则，尽量避免在您的网站中使用这些元素：

  • 任何类型的重型动画
  • 滑块插件
  • 社交媒体或共享插件
  • 超级菜单插件
  • 像谷歌广告一样的嵌入

5.避免延迟加载首屏图像

延迟加载图像是加快网站速度的最简单方法之一，特别是如果您有一个图像繁重的网站。

从技术上讲，延迟加载是一种脚本，用于延迟加载在浏览器视口中尚不可见的图像和帧。当用户向下滚动时，图像将在进入视图时加载。

由于延迟加载需要在浏览器渲染任何图像之前使用 JavaScript，因此可能会延迟您的 FCP。

因此，您需要从延迟加载中排除首屏上方的图像。

大多数流行的延迟加载插件已经包含此功能。理想情况下，寻找一个延迟加载插件，它不仅可以通过文件名排除图像，还可以通过其他标签（例如类、id、属性或来自特定域的图像）排除图像。

注意：图像的延迟加载已添加到WordPress核心中，并将从WordPress 5.5开始成为本地功能。它还支持过滤器来自定义延迟加载行为。

6. 内联基本图像

HTML 和 CSS 提供了一种使用 Base64 或 SVG 格式内联图像的方法。这些称为数据 URI。

通过内联所有首屏图像，浏览器不必发出额外的HTTP请求来下载它们。这有助于改进 FCP。

删除首屏渲染阻塞资源以改进 FCP

您可以内联的一些最常见的首屏图像是：

  • 商标
  • 图标（搜索、社交媒体等）
  • 横幅图像
  • 背景

什么是 Base64 和 SVG 图像？

Base64 是一种编码算法，可将任何类型的数据（包括图像）转换为文本。您可以将 Base64 编码的图像直接嵌入到 HTML 或 CSS 文件中。这是加快较小图像加载时间的好方法。

Base64图像编码器是一款出色的免费工具，可将任何图像格式转换为Base64。它支持JPEG，PNG，WebP，SVG和BMP图像格式。

Base64 编码的内联关键图像

在 HTML 中添加 Base64 编码的图像：

<img src="data:image/jpeg;base64,/uj/…[content]..." width="100" height="50" alt="this is a base64 image">

您还可以在 CSS 中使用 Base64 编码的图像：

.custom-class {
    background: url('data:image/jpeg;base64,/9j/…[content]...');
}

可缩放矢量图形 （SVG） 是矢量图形的图像格式。SVG 图像具有较小的文件大小，可缩放到任何大小而不会降低质量，并且在所有设备上看起来都很棒。如果您的图像具有简单的形状、曲线和轮廓（例如徽标和图标），那么几乎可以肯定它可以保存为 SVG。

注意：使用 SVG 图像作为 <img> 标签中的源不同于直接通过 <svg> 标签内联 SVG 图像。

以下是在 HTML 中内联 SVG 的方法：

<body>
  <!-- Insert SVG code here, and the image will show up! -->
    <svg xmlns="http://www.w3.org/2000/svg">
        <circle cx='50' cy='25' r='20'/>
    </svg>
</body>

最好在内联图像之前压缩或缩小（如果是 SVG）图像。如果图像采用光栅格式（JPEG 或 PNG），请使用 Base64。如果它们可以转换为矢量格式，请使用 SVG。

在可以使用 URL 作为图像源的任何地方，都可以在其中粘贴 Base64 编码的图像。

如果主题或插件中有任何图像或图标被硬编码，则需要手动查找它们并将其源 URL 替换为内联图像。像搜索和替换这样的插件可以帮助您轻松完成此操作。

内联图像有几个缺点：

  • 它会增加图像的大小（通常增加 30%）。
  • 它增加了页面大小，从而增加了 TTFB。
  • 内联图像无法通过 CDN 交付。

根据我的经验，如果您可以将页面大小保持在 100 KB 以下，则内联图像就不是什么大问题。除此之外的任何内容都可能影响您的 TTFB，从而对您的 FCP 的损害大于改善。

此外，如果您使用Cloudflare之类的东西来为您的网站提供服务，则可以将其配置为缓存HTML资源。当且仅当站点的内容大部分是静态的时，才建议启用此功能。

7. 优化站点的 DOM 大小

文档对象模型 （DOM） 是组成网页的所有对象的表示形式。在图形上，它表示为具有分支节点和对象的树。

DOM 的结构化表示使得使用 JavaScript 等脚本语言修改其元素变得容易。

HTML DOM 树及其对象

DOM 树中的所有 HTML 元素都称为节点。节点可以分支为多个元素，所有这些元素都可以进一步分支，依此类推。它们分支的深度称为节点深度。整个 DOM 树的节点深度称为树深度。节点的所有直接分支元素称为子元素。

由于多种原因，拥有大型 DOM 树会对您的 FCP 产生负面影响：

  • 未优化的 DOM 树包括许多在页面加载的初始阶段对用户不可见的节点。
  • 较大的 DOM 大小意味着需要更多的处理时间来计算和设置所有节点的样式，这两者都会减慢渲染速度。
  • 大型 DOM 树也会使用户设备的内存性能不堪重负。
避免过大的 DOM 大小以优化 FCP

Google 会标记具有以下 DOM 树的网页：

  • 总共超过 1,500 个节点
  • 大于 32 个节点深度
  • 具有 60+ 个子节点的父节点

如何减小 DOM 大小？

通常，您只需要在需要时创建 DOM 节点，并销毁不需要的节点。但是，此提示不适用于大多数WordPress网站，因为创建DOM通常由主题，插件，编辑器和WordPress核心本身负责。

以下是帮助您减小 DOM 大小的几个提示：

  • 将大页面拆分为较小的页面。
  • 延迟加载尽可能多的 HTML 元素，而不仅仅是图像。
  • 分页评论、帖子、产品等。
  • 限制首页和归档页面上显示的帖子数量。
  • 不要使用 CSS 隐藏不需要的内容。相反，请将其完全删除。
  • 避免使用插入不必要的 <div> 标签的臃肿页面构建器。
  • 选择优化良好的主题。
  • 不要使用添加太多 <div> 标签的插件（例如，Mega 菜单插件）。

8. 确保文本在网页字体加载期间保持可见

字体通常是大文件，需要花费大量时间才能加载。您可能在灯塔中遇到过这样的错误：

灯塔标记导致不可见文本闪烁的字体URL（来源：Google)

谷歌标记这种行为是有原因的。某些浏览器在加载所有字体之前不会呈现文本。这会导致所谓的不可见文本闪烁 （FOIT）。

您可以通过强制浏览器在加载自定义字体时临时显示系统字体来解决此问题。只需添加 font-display: swap 到您的 @font-face 样式，以避免几乎所有现代浏览器中的FOIT。

下面是如何应用此功能的示例：

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.sample.com/pacifico.woff2) format('woff2');
  font-display: swap;
}

如果您直接从 CDN 导入字体（例如 Google 字体），则可以通过将 &display=swap 参数附加到网址末尾来实现相同的效果。

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

9. 使用资源提示

当用户访问网站时，浏览器从服务器请求HTML文档，对其进行解析，提交对任何其他引用资源的单独请求，并在加载和解析所有资源后，呈现网页。

作为开发人员，您知道哪些资源对您的网站最重要。有了这些知识，您可以将这些关键资源设置为提前加载并加快页面加载速度。浏览器资源提示是实现这一点的方法。

某些资源提示适用于当前页面上的资源，而其他资源提示适用于将来可能的资源。所有资源提示都使用 <link> 标记的 rel 属性来激活。

DNS预取

如果要从外部网站加载任何资产，添加 DNS-prefetch 参数将告诉浏览器尽快解析 URL 的 DNS。

下面介绍了如何将 DNS 预取添加到资源：

<link rel="dns-prefetch" href="//external-website.com">

如果您使用大量来自第三方的代码，添加 dns-prefetch 参数对于加快页面加载速度非常有帮助。您可以使用免费的预回迁！在线工具找出可以添加到预回迁列表中的外部域。（另外，请阅读如何减少第三方脚本对WordPress的影响)

预连接

预连接的工作方式与 DNS 预取非常相似，只是它不仅仅停留在解析 DNS 上。它还将继续建立TCP握手和TLS协商（如果有的话）。

它可以像这样使用：

<link rel="preconnect" href="https://example.com">

请记住，预连接可能会占用宝贵的处理时间，尤其是对于安全连接。

预存取

如果您确定将来会使用某个资源，则可以建议浏览器立即预存取该资源并将其存储在浏览器中。与 DNS 预存取不同，这里您告诉浏览器立即开始加载资源。

下面介绍了如何引导浏览器预存取资源：

<link rel="prefetch" href="scripts.js">
预取的工作原理（来源：KeyCDN)

如果请求的文件太大或网络速度较慢，浏览器可以忽略预存取。例如，Firefox 仅在浏览器空闲时才预取资源。

预渲染

这是最强大的资源提示。将 prerender 参数添加到资源会强制浏览器加载其所有资产、解析它们、创建 DOM 树、应用样式、执行脚本、呈现网页并使其准备好提供。如果您稍后访问 href 中提到的 URL，该页面将立即加载。

以下是预渲染资源的方式：

<link rel="prerender" href="https://example.com/next-page">

预渲染主着陆页是提高转化次数的好方法。

预加载

与预存取不同，预加载更像是对浏览器的建议，预加载资源提示指示浏览器加载资源，而不管它的想法如何。浏览器不能忽略预加载指令。

<head>
  ...
  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="ui.js" as="script">
  ...
</head>

浏览器越早开始请求声明的预加载链接，页面加载速度就越快。

当用户第一次访问您的网站时，资源提示不会有太大帮助。但是他们访问的每个后续页面都会呈现得更快。由于Google使用实际使用情况数据来评估网站的速度排名，因此资源提示将有助于提高您网站的FCP。

10.避免多个页面重定向

当您访问已重定向到另一个 URL 的 URL 时，服务器将返回 HTTP 301 重定向状态代码响应。它在浏览器控制台中如下所示：

HTTP/1.1 301 Moved Permanently
Location: /url/to/new/location

重定向响应会强制浏览器向新位置发出另一个 HTTP 请求。通常，这会将网页的加载延迟数百毫秒。

如果您的页面有多个重定向，则可能会大大降低您的 FCP 速度。

避免有多个页面重定向（来源：Google)

灯塔标记具有两个或更多重定向的页面。

为避免多次重定向，请将标记的资源直接指向最终目标。此外，如果资源是页面关键呈现路径的一部分，则完全消除源自该资源的任何重定向。

总结

改进首次绘制并减少其时间不再是一种选择，而是一种必要。除了三个核心网页指标外，更快的 FCP 还可以带来更好的用户体验并提高您的 PageSpeed 分数。

更好的事情即将到来！谷歌正计划推出另一个以用户为中心的性能指标，称为First Meaningful Paint（FMP）。虽然 FCP 测量任何内容（例如徽标、标语、背景图像）的呈现时间，但只有在加载用户所需的内容（例如标题、封面图像、正文）后才会触发 FMP。FMP 尚未标准化，但您可以在此处了解更多信息。

有时，理解所有技术术语并完美应用它可能会让人不知所措。幸运的是，快速的托管服务提供商和出色的性能插件（例如 WP Rocket）可以帮助您开箱即用地获得良好的 FCP 分数。

评论

发表回复

必填项已用 * 标注