如何在 WordPress 中预加载密钥请求

已发表: 2023-06-08

使用网络字体、CSS 和 JavaScript 可以使您的网站更加独特和互动。 但是等待这些文件类型加载可能会让您网站的访问者感到沮丧。

这是在 WordPress 中预加载密钥请求可以派上用场的地方。 通过告诉浏览器在请求链中更早地下载这些文件类型，当浏览器准备好呈现内容时，它们就在手边。 反过来，这可以加快您感知的页面加载时间并提供更好的整体网络体验。

在今天的指南中，我们将讨论预加载密钥请求的含义，以及您网站的潜在性能优势。 然后，我们将解释如何使用 Google 字体、Font Awesome、CSS 和 JavaScript 在您的 WordPress 网站上执行此操作。

WordPress 中的“预加载密钥请求”是什么意思？

当有人访问您的网站时，他们的浏览器会向您网站的服务器发送多个 HTTP 请求，请求它提供构成您的内容的文件。 服务器将需要一定的时间来开始响应这些请求并向浏览器发送信息，这称为首字节时间 (TTFB)。

接下来，浏览器将开始从您的站点文件下载内容（PHP、JavaScript 和 CSS）并将其渲染以在前端显示可视页面 (HTML)。 完成此过程后，访问者可以看到您的完全加载的网页。

浏览器将使用“请求链”按顺序请求和呈现内容。 这意味着在较大的请求中有多个较小的请求步骤，最终结果是访问者可以查看您网站上的内容。

本质上，“预加载”意味着告诉用户的浏览器先下载必要的文件，而不是等到加载过程结束。 这些通常是字体（特别是网络字体）、CSS、JavaScript，有时还有图像。

关键请求是唯一的，因为您的浏览器通常在加载过程的后期才会请求这些文件。 因此，当浏览器到达那个点并发现它必须请求文件时会有延迟。 通过告诉浏览器首先加载这些文件，它会在需要渲染它们时让它们派上用场。

预加载密钥请求有什么好处？

预加载关键请求的主要好处是提高您网站的感知性能。 这意味着用户的浏览器可以更快地呈现您的内容，访问者会觉得您的网站速度更快。 但是，您的网站实际上只是预加载了必要的内容，以使其看起来像那样。

此外，预加载请求对于您的 Core Web Vitals 分数至关重要。 这些 Google 指标衡量您网站的加载性能、交互性和视觉稳定性，为您提供一个分数，表示您网站的整体用户友好性。

这些是三个核心网络生命力：

  • Largest Contentful Paint (LCP)：加载页面上最大的元素需要多长时间。
  • 首次输入延迟 (FID)：浏览器响应用户与您的内容的交互所需的时间。
  • Cumulative Layout Shift (CLS) ：页面加载时元素四处移动的程度。

特别是，预加载密钥请求会对您的 LCP 分数产生重大影响。 通过预加载图像、字体和其他大文件，您将能够减少它们的渲染时间。

此外，预加载会影响您的 First Contentful Paint (FCP) 分数。 该指标衡量页面上第一个 HTML 元素显示所需的时间。 如果您可以预加载该元素，浏览器将能够更快地显示内容的初始部分。

更重要的是，像谷歌这样的搜索引擎更喜欢快速加载和互动的内容。 因此，除了提供更好的用户体验外，改进这些性能指标还可以促进您网站的搜索引擎优化 (SEO)。

从本质上讲，性能改进可以帮助提高网站页面的排名，并让更多用户看到您的内容。 另外，预加载密钥请求相对容易。 在这篇文章的后面，我们将向您展示具体操作方法！

预加载密钥请求有缺点吗？

从性能的角度来看，预加载请求听起来是个好主意。 也就是说，尝试预加载太多元素可能会对您不利。

浏览器一次只能处理这么多请求。 因此，如果您告诉它预加载多个元素，它可能会产生一个“瓶颈”，影响您网站的页面加载时间。

因此，值得仔细选择应该预加载哪些元素以获得最大的影响。 在大多数情况下，这些将是网络字体、CSS 和 JavaScript，因为它们往往是最重的文件。

如何检查您的站点是否正在预加载密钥请求

有几种不同的工具可以识别您的网站是否正在预加载请求，并建议可以从这种优化技术中受益的元素。 例如，PageSpeed Insights 是识别网站性能问题的最受欢迎的选项之一。

要使用这个免费工具，只需输入您网站的 URL 并点击Analyze 。 这将生成详细的性能报告。

来自 Google PageSpeed 的核心网络生命力报告

向下滚动以查看性能机会、诊断和通过的审核。 您应该能够在这些部分之一中找到预加载密钥请求建议。

来自 Google PageSpeed 的改进建议

如果您不想在您的网站和 PageSpeed Insights 之间来回导航，请考虑安装 Google Lighthouse Chrome 扩展程序。 它使您能够从浏览器中生成报告并查看页面的性能指标。

来自 Google Lighthouse 的性能建议

同样，GTMetrix 可以为任何站点生成详细的性能报告。 它使您可以分析来自多个位置的页面并跟踪它们随时间的性能。

在 GTMetrix 的Structure选项卡下，您将能够看到预加载密钥请求是否有助于您网站的性能。

GTMetrix 的性能指标

如何在 WordPress 中预加载关键请求

在对您的 WordPress 网站进行任何重大更改（例如添加自定义代码）之前，进行完整备份始终是值得的。 这种安全预防措施意味着如果您犯了任何错误，您手头将拥有一个功能版本的网站。

这就是 Jetpack VaultPress Backup 派上用场的地方。 这个用户友好的插件会自动创建所有数据的全面备份，包括其文件、数据库表和 WooCommerce 产品信息。 这些备份实时保存并安全地存储在云端。 只需单击几下即可恢复它们 - 即使您在旅途中或根本无法访问您的网站。

Jetpack VaultPress 备份主页设计

1.字体

有时，字体会隐藏在您网站上的其他文件中，包括 CSS 和 JavaScript 文件。 不幸的是，这会减慢页面呈现过程。

要在 WordPress 中预加载带有字体的请求，请将此代码复制并粘贴到页面的 <head> 部分：

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

请记住用“字体名称”代替您的字体名称。 此外，如果您的字体来自第三方来源，则包含“crossorigin”是必不可少的，因为它告诉浏览器它需要从外部服务器加载文件。

2.谷歌字体

Google Fonts 包括一个包含近 1500 个字体系列的开源库。 如果您正在寻找要在您的网站上使用的自定义网络字体，您可能会在那里找到一个。

Google 字体库中的字体

使用 Google 字体有助于为您的网站带来独特的设计，但浏览器在呈现内容时还必须下载字体文件。 根据您的字体，这可能会增加您的页面加载时间。

预加载 Google 字体时，最好先“预连接”它们。 此步骤提前告诉浏览器它将需要连接到第三方站点（例如，Google Fonts）以检索资源。

此外，在添加您的预加载代码后，值得包含一个指向其样式表的链接。 这样，如果您的用户的浏览器无法预加载有问题的字体，它仍然能够呈现它。

只需将以下代码添加到页面的 <head> 部分：

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

在您的代码中，您需要将“$fontURL”替换为指向您的 Google 字体的链接。 例如，它可能看起来像这样：

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

然后，只需确保保存您的编辑！

3.字体真棒

Font Awesome 是自定义图标和字体的绝佳资源，其库中提供免费和高级选项。 您可以使用其中一些图标来增强菜单、页眉、页脚和内容区域中的设计。

与 Google Fonts 一样，预加载 Font Awesome 图标是加快感知页面加载时间的好主意。 只需将此代码添加到页面的 <head> 部分：

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

您需要换出您在网站上使用的字体或图标的文件路径。 然后，保存您的更改！

4. CSS

层叠样式表 (CSS) 是一种设计语言，它与 HTML 一起工作以确定网页的样式和表示。 使用自定义 CSS，您可以快速更改不同元素的外观。

您网站上每个样式化的 HTML 页面都会有一个包含所有 CSS 的相应样式表。 浏览器在呈现网页时需要加载此文件，因此值得告诉浏览器它应该预加载此资源。

幸运的是，有一种预加载 CSS 的简单方法。 只需将此代码添加到页面的 <head> 部分：

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

确保将样式表的名称替换为“styles.css”。 此外，请记住，虽然此代码可以在 Google Chrome 中运行，但并非所有浏览器都支持它。

5. JavaScript

JavaScript 是 WordPress 中使用的另一种常见脚本语言。 它允许您创建动态内容，例如动画、移动图像轮播和自动更新提要。

呈现 JavaScript 通常更复杂，因为它的文件相对较重，需要更长的过程来显示内容。 这就是为什么让浏览器预加载繁重的 JavaScript 有利于加快页面加载时间的原因。

与 CSS 一样，您只需将这行简单的代码添加到页面的 <head> 部分：

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

和以前一样，将 JavaScript 文件的名称替换为“ui.js”，并保存您的更改。

奖励：安装免费插件以改进 Core Web Vitals

预加载请求只是您可以用来提高 WordPress 网站的 Core Web Vitals 分数的一种技术。

如果您正在寻找更全面（且免费！）的解决方案，请考虑安装 Jetpack Boost。 该工具由 Automattic 开发，它是 WordPress.com 背后的同一家公司。

Jetpack VaultPress 备份主页

这个用户友好的插件会扫描您的整个网站，并在台式机和移动设备上为您评分。 此外，Jetpack Boost 不仅对三个 Core Web Vitals 有用。 它的优化方法可以改善其他指标，包括交互时间 (TTI) 和总阻塞时间 (TBT)。

您将能够使用一个简单的切换系统来优化 CSS 加载、延迟非必要的 JavaScript 和延迟加载图像。 每当您对网站进行更改时，该插件的高级版本还会自动生成关键 CSS。

或者，Jetpack Complete 可以将您的 WordPress 网站提升到一个全新的水平。 该计划包含多种性能工具，包括访问 Jetpack 的图像内容交付网络 (CDN)，这既可以节省带宽，又可以缩短页面加载时间。 此外，您还将获得高级 WordPress 安全和增长工具。

有关预加载密钥请求的常见问题

至此，您应该对如何在 WordPress 中预加载关键请求有了很好的了解。 尽管如此，我们还是会复习一些常见问题以确保万无一失！

预加载请求是否会改善用户体验？

预加载请求可以通过减少网站的感知加载时间来改善用户体验。 由于访问者不必等待您的内容呈现那么久，他们就不太可能感到沮丧并可能离开您的网站去另一个网站。

预加载请求会改善 Core Web Vitals 吗？

在 WordPress 中预加载关键请求可以提高您的 Core Web Vitals 分数，尤其是当涉及到 Largest Contentful Paint (LCP) 时。 事实上，当您决定预加载哪些元素时，明智的做法是包括您的“最大”或“主要”内容，因为这可能是从中受益最多的内容。

预加载关键请求与预加载关键资产

值得注意的是，预加载关键请求与预加载关键资产的含义相同。 这两个术语都是指告诉浏览器提前加载特定资源以更快地呈现页面内容。

预加载与预连接与预取

预加载、预连接和预取似乎是相似的概念，但实际上它们的含义略有不同。 它们都是指示浏览器以何种顺序加载内容的标签，但它们具有不同的功能。

首先，预加载涉及加载在用户浏览器中呈现页面所需的内容。 这是一个高优先级标签，可以在几秒钟内准备好资源。

相比之下，预取涉及可能需要加载的后续元素。 浏览器会提前寻找资源并将它们存储在它的缓存中。 这是一个非常低优先级的标签，所以你不应该将它用于紧急资源。

最后，当您想要告诉浏览器连接到特定域时，使用预连接。 如果您的网站使用来自特定第三方网站（如 Google 字体）的资源，预连接会告诉浏览器它需要在加载过程的某个时刻连接到该域。

我还能做些什么来提高网站的性能？

各种任务可以帮助提高 WordPress 网站的性能，包括：

  • 使用 CDN 向全球访问者提供您的内容
  • 推迟（或删除）未使用的 CSS
  • 消除渲染阻塞资源
  • 缩小 CSS 和其他资源
  • 发出更少的 HTTP 请求

选择高质量的 WordPress 主机也是值得的，它将为您提供性能优化功能，如专用缓存、正常运行时间保证和遍布全球的庞大数据中心网络。

通过预加载关键请求提高 WordPress 网站的性能

页面加载时间会显着影响您网站的用户体验和搜索引擎排名。 因此，您需要竭尽全力加快浏览器显示网站内容的速度。

当您在页面中预加载关键请求时，访问者的浏览器将准备好资源（如字体、CSS 和 JavaScript）。 然后，加载您的内容并让用户可以访问时不会出现延迟。

预加载关键请求只是提高网站性能的第一步。 使用 Jetpack Boost，您可以轻松地将您的网站配置为延迟加载图像、延迟非必要的 JavaScript 等。 更好的是，该插件可以免费使用。 立即查看 Jetpack Boost！