如何使用 Rel= 预加载链接标签来提高 WordPress 网站性能
已发表: 2022-10-01如果您希望提高 WordPress 网站的性能，一种方法是使用 rel=”preload” 链接标签。 此标签允许您告诉浏览器在实际需要之前开始加载某些资产。 例如，您可以在加载页面的主要内容之前使用它来预加载您网站的徽标。
将 rel=”preload” 标签添加到您的 WordPress 网站相当容易。 您只需要在网站的标题中添加一点代码。 在本文中，我们将向您展示如何做到这一点。
如何在 WordPress 中预加载关键请求？
要使用 Autoptimize 在 WordPress 中加载密钥请求，请转到 Settings > Autoptimize > Preload key requests 。 可以通过链接访问您的 WordPress 仪表板。 预加载特定请求框将可用。 在该框中输入由于预加载密钥请求警告而收到的链接。
PageSpeed 可能会建议加载您应该利用的机会。 有一些文件用于呈现您的页面，这些文件在您的代码中被称为 3 层，这些文件在显示之前被加载。 换句话说，结束文件是由另一个文件请求的，而不是直接位于 WordPress 站点的 HTML 中。 使用 PageSpeed，您可以识别网站性能的任何问题。 加载字体或文件时，可能需要一段时间才能显示。 当我们在他们自己弄清楚之前预加载字体时，我们说他们会需要它。 加载文件时，必须使用特定语法将其添加到播放列表中，例如链接 rel=preload。
当请求特定文件时，浏览器会检测到一个特殊的链接标签并开始下载它。 当您优先考虑太多文件时，可能会导致延迟其他重要文件的瓶颈。 在这种情况下，WP Rocket 已经预加载了谷歌字体，所以你不需要做任何特别的事情。 如果您使用删除未使用的 CSS 功能，您将能够使用该功能预加载您的字体。 如果您愿意，也可以在本地托管这些文件。 因此，您的主机将托管在由 Google 管理的服务器上，而不是让 Google 托管您的网站。
WordPress 插件可以通过编辑头文件手动或通过 WordPress 插件 WP Rocket 加载字体。 由于 Google PageSpeed Insights 不通过 WP Rocket 请求字体，因此建议使用 WP Rocket 加载它们。
如何在 WordPress 中预加载链接
导航到您博客的设置，点击“链接”，然后在“链接”标题下，将链接粘贴到“预加载文本框”中。
Link Rel 中的预加载是什么？
信用：addyosmani.com链接 rel 中的预加载是 HTML5 中引入的一个新标准，它允许 Web 开发人员通知浏览器有关在页面加载期间需要的文件。 这样，浏览器可以立即开始加载这些文件，而不是等待 HTML 被解析。 这可以改善页面加载时间，尤其是对于需要许多外部文件的页面。
Link rel=”preload”用来表示哪个链接有这个属性要优先。 预加载是浏览器为了使用预加载而必须做的事情，这是它可以决定是否做的事情。 这是 W3C 规范中对preload 关键字的极其详细的描述。
您可能使用预取的原因有很多。 例如，更喜欢预取页面上经常使用的资源将减少它们不会从网络加载的可能性。 您可能还希望预取仅在短时间内需要的资源，以减轻内存膨胀。 预取可以通过两种方式完成：资源预取和缓存预取。 文档的预取资源是指文档用于预处理文档的资源。 还有一些脚本和模块可用于生成图像文件和样式表，以及其他类型的文件和对象。 另一方面，预取是指预取浏览器在其缓存中使用的资源。 它包括 HTML5 等资源以及仍被缓存的 AJAX 调用。 可以以多种方式使用预取算法。 最近最少使用（LRU）算法是选择最少使用资源的最常用方法之一。 随机早期发布 (RER) 算法是另一种常见的预取算法，它根据文件名选择资源。 预取的后果之一是降低了用户体验。 通常，预取可能需要的资源会减少浏览器等待它们可用所需的时间。 因此，使用此方法，用户等待页面加载的时间将减少。 当页面加载时，作者可以通过分配 preload 属性来指定媒体的加载方式。 预加载是作者通知浏览器网站外观和感觉的一种方法。 预取可以以多种方式使用。 缓存已完善。
为更快的页面加载预加载资源
在加载主文档之前预先加载某些资源时，这会提高页面加载速度。 如果作者认为在主文档完成加载之前不需要某些资源，这将很有用。 preload 属性可用于任何具有链接的元素。 preload 属性可以是 no 也可以是 auto，它基于一个布尔值。 将浏览器设置为自动，以便根据链接的内容确定要预加载的资源。 preload 属性在设置为 none 时禁用预加载。
如何在没有插件的情况下将加载程序添加到我的 WordPress 网站？
在没有插件的情况下将加载程序添加到您的 WordPress 网站是一个简单的过程。 首先，您需要在 WordPress 主题文件夹中创建一个名为“loader.php”的新文件。 接下来，将以下代码复制并粘贴到您的新文件中：
/**
* 装载机
*
* @package WordPress
* @subpackage 加载器
* @author 你的名字在这里
*
* @internal 此代码用于将脚本加载到您的 WordPress 网站
* 无需插件。
*/
/**
* 排队脚本
*
* 为 WordPress 前端注册和排队脚本。
*/
函数 wp_enqueue_scripts() {
// 注册脚本
wp_register_script（'jquery-ui-core'，'//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js'，数组（'jquery'），'1.9.1' ， 真的 ）;
// 排队脚本
wp_enqueue_script('jquery-ui-core');
}
add_action('wp_enqueue_scripts', 'wp_enqueue_scripts');
? >
此代码将在您的 WordPress 站点上注册 jQuery UI Core 脚本并将其排入队列。 然后，您可以在 WordPress 站点中使用 jQuery UI Core 脚本，而无需插件。
如何在 Html 中预加载页面？
您可以使用 *link rel=preload 尽快下载和缓存资源（例如脚本或样式表）。 当您在加载页面后几秒钟内需要该资源时，这很有用； 你想加快页面速度。 下载资源后，浏览器不会对其执行任何操作。
这是一种为网络浏览器提供指向在不久的将来加载网页所需的资源/文件的指针的方法。 通过将 preload 作为值添加到需要加载的资源的元素来提供预加载提示。 但是，在加载状态下不允许异步下载资源。 当浏览器执行其他操作时，它会同时下载预加载提示。 因为浏览器在解析这些文件之前不会了解这些文件，因此它们不知道解析了哪些文件。 这是加载这些资产的低效方法，因为浏览器没有这样做的能力。 因此，您可以在一开始就使用预加载提示指示浏览器下载这些资源。
预加载是加快网站速度的一项重要功能，但仅应在极少数情况下使用。 预加载需要在首屏上加载的文件是个好主意。 您还可以在 Google PageSpeed Insights 中提高您网站的速度。 此外，预加载可以与 HTTP/2 服务器推送结合使用。 字体、CSS、JS 和其他资源的预加载可用。 当仅在呈现另一个文件时才发现一个文件时，它可能会加快您网站的整体加载速度。 可以使用下面列出的语法预填充某些标准文件类型。 在这种情况下，预加载不会指示 Web 浏览器将特定文件应用到网页。
预加载 WordPress
WordPress中的预加载数据是指在需要之前加载数据。 这在许多情况下都很有用，例如当您想要确保某个数据在需要时始终可用时，或者当您想要避免每次需要时都必须从远程位置加载数据。 预加载数据还可以通过减少在需要时加载数据所需的时间来帮助提高性能。
如果您在 WordPress 中实施 Preload、Prefetch 和 Preconnect，您的网站会变得更快。 如果您的用户需要在多个设备上访问多个页面，那么提前加载它们是一个好主意。 Preconnect 允许您在后台建立到另一个域的出站连接。 目标是减少延迟，以便更快地从另一个域加载资源。 Preconnect 与所有版本的 Chrome、Edge、Firefox 和 Safari 兼容。 DNS 预取是通过使用 linkurl 数组来完成的。 您可以使用它向系统返回 HTML 或静态资源。
预渲染它们使您可以在它们仍处于活动状态时在后台加载它们。 这是通过使用 Pre Party Resource Hints 插件来完成的。 如果您需要轻量级资产，请渲染它，但请注意不要过度渲染整个站点或大型资源。 还值得考虑使用 CDN 缓存和更快地向全球用户交付内容。 有几家公司提供 CDN 和安全性，但我推荐 SUCURI，它提供两者。
由于预加载，用户可以体验到显着的性能提升，尤其是在他们的连接速度很慢的情况下。 为了使网页加载更快，用户可以更早地加载资源，无需用户等待页面完全加载。 在加载资源之前，您应该记住以下几点： 加载文件时，请确保在注释中包含正确的属性 rel=”preload”。 用户可以通过单击浏览器设置中的“无预加载”按钮来禁用预加载。 预加载资源的一个优点是可以更有效地使用它们。 您可以通过在加载之前加载网页来加速网页加载。 页面的加载时间可以通过在访问资源时立即加载来减少。 它可以通过提前加载来减少加载用户经常请求的资源所花费的时间。 当用户加载浏览器时，他或她会减少加载资源所需的时间。 当用户请求资源时，预加载可以通过减少浏览器查找资源所需的时间来加快进程。 一般来说，预加载可能有助于加快网页的加载过程。 使用预加载时，理解它的好处和局限性以及它可以带来好处的各种方式是至关重要的。
没有插件的 WordPress 预加载器
您可以通过手动将 CSS 应用于内容来制作 WordPress 预加载动画。 您需要使用预加载动画，可以在 CSS 源代码中找到。 然后，复制任何这些网站提供的预加载动画的 CSS 源代码。
链接 Rel=preload> 必须有一个有效的 As 值
链接 rel=preload> 元素的 as 值必须是有效值。
预加载和预取：加快用户体验
当用户到达一个页面时，preload 属性可以与 prefetch 结合使用来请求资源。 它通过确保浏览器在用户到达页面之前知道需要哪些资源来帮助加快用户体验。
如果加载媒体文件时，将使用名为 preload 的属性。 使用 preload 属性，作者可以指定他/她认为应该为该站点带来最佳用户体验的内容。 在某些情况下可以忽略此属性。