利用现代浏览器功能（例如预加载、预取、预连接）使 WordPress 网站更快。
作为网站所有者，谁不喜欢尽一切可能更快地加载网页？
确保在全球范围内始终如一地更快地加载站点具有挑战性。 您可以做几件事来快速加载站点资源，包括启用以下浏览器提示。 它们也被称为预浏览技术。
注意：浏览器提示技术在您第一次访问该网站时没有多大帮助，但随后的请求会更快。
目录
预载
您可以使用 preload 标签告诉浏览器提前获取一些静态资源。 它们可以是图像、字体、JavaScript、CSS、脚本、视频等。它有助于优先考虑资源加载； 因此，性能得到改善。
如果您希望您的用户随后访问多个页面，那么预加载将是一个好主意。 就像用户访问产品页面然后查看信息、与其他产品比较、添加到购物车、付款等的电子商务商店。
您可以使用以下插件来设置预加载功能。
更好的资源提示 – 用于配置 CSS 和 JS 文件的免费插件。
WP Rocket – 一个高级插件，通过许多基本技术（包括预加载缓存和站点地图）来增强网站性能。
你怎么知道是否启用了预加载？
找出答案的最快方法是查看页面源代码。 您应该会看到类似下面的内容。
<link rel="preload" as="style" href="https://wilku.top/implementing-preload-prefetch-preconnect-in-wordpress/IMPORTANT.css"> <link rel="preload" as="script" href="CRITICAL.js">
并非所有浏览器都支持在写入时预加载。 所以，看看 兼容性矩阵 在实施之前。
预连接
您是否从其他域加载资源？ 也许CDN？
如果没有，并且每个资源都是从您的单个域加载的，那么这可能没有帮助。
预连接提示浏览器在后台建立与其他域的连接，以节省 DNS 查找、重定向、TCP 握手、TLS 协商等的时间。其想法是降低延迟以提供从另一个域快速加载资源。
同样，您可以使用上面提到的更好的资源提示插件或高级插件，例如 性能问题.
配置所需资源后，您应该会在页面源中看到它们，如下所示。
<link rel="preconnect" href="https://ANOTHERSITE.com">
注意：如果您从需要 CORS 的域加载资源，那么您需要将其指定为 crossorigin 和输出应该看起来像。
<link rel="preconnect" href="https://ANOTHERSITE.com" crossorigin>
Preconnect 与最新版本的 Chrome、Edge、Firefox、Safari 兼容。
预取
让浏览器获取下一个页面，您认为当用户四处导航时将需要该页面。 Prefetch 将下载必要的资源并将它们存储在本地缓存中，并在需要时快速提供它们。 有两种类型的预取。
DNS 预取 – 解释如下
链接预取 – 使用 配置。 用于预取 HTML 或静态资源。 您可以使用作为属性预取资源。
as 属性支持各种资源，如音频、视频、脚本、轨道、样式、字体、对象、文档等。链接预取可以借助 派对前资源提示插件.
DNS 预取
从多个域加载资源并希望在后台解析它们？
这种快速设置可以帮助更早地解决所有潜在的域，因此当请求资源时，它可以更快地加载。 这有助于降低整体延迟。
假设您正在从 3 个域加载资源，每个域大约需要 100 毫秒来执行 DNS 查找，那么您将节省 300 毫秒的延迟。
不是很酷吗？
如果您喜欢编辑主题文件，您可以使用 perfmatters 插件或在主题的 functions.php 文件中添加以下内容来实现。
//* DNS Prefetching
function dns_prefetch() {
echo '<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://YOUROTHERDOMAIN.com" />
<link rel="dns-prefetch" href="https://ANDANOTHERONE.com" />
<link rel="dns-prefetch" href="https://AND.SOMEMORE.com" />
}
add_action('wp_head', 'dns_prefetch', 0);
你可以阅读更多 Mozilla 网络文档.
预渲染
您是否希望您的网站用户浏览潜在页面？
Prerender 可以帮助在后台加载这些资产，当用户点击它时，他们会很快得到它。 您可以使用 Pre Party Resource Hints 插件来实现这一点。
预渲染适用于轻量级页面或资产，但要小心整个站点或大型资源，因为它可能会增加 CPU 利用率和带宽并降低站点速度。 因此，请尝试使用较小的资源并对其进行测试以确保它没有副作用。
如您所见，在 WordPress 中实现浏览器提示涉及四个主要插件。 选择你喜欢的并符合要求的。
派对前资源提示插件 – 免费插件提供 DNS 预取、链接预取、预渲染、预连接和预加载。
更好的资源提示 – 上述替代方案。
免费插件只要得到维护和支持就很好。 不幸的是，许多插件不会发生这种情况，这就是为什么有时最好选择付费版本的原因。 商业版插件得到专业支持，并通过 WordPress 标准和安全修复获得最新版本。 如果您愿意花几美元来优化您的网站性能，那么您可以查看以下内容。
WP Rocket – 享有盛誉，受到超过 800,000 个站点的信任。 一个网站的价格为 49 美元。
性能问题 – 一个轻量级且易于遵循的站点成本为 24.95 美元。 在我撰写本文时，它提供了以下功能。
这是很多优化。
结论
WordPress 核心是轻量级的，但它变得庞大取决于您使用的主题和插件。 而且，优化网站的性能以获得更好的搜索排名和转化率至关重要。 上述技术很容易遵循，但您不应止步于此。
您还应该考虑使用 CDN 在全球范围内更快地缓存和交付内容给您的用户。 有很多，但我建议尝试同时提供 CDN 和安全性的 SUCURI。
