在WordPress中实现预加载，预取，预连接

本文概述

• 预载
• 预连接
• 预取
• DNS预取
• 预渲染

利用现代浏览器功能, 如预加载, 预取, 预连接, 以使WordPress网站更快。

作为网站所有者, 谁不想让一切可能的事情更快地加载网页？

确保全球范围内更快地持续加载站点具有挑战性。你可以采取多种措施来快速加载站点资源, 包括启用以下浏览器提示。它们也被称为预浏览技术。

注意：初次访问网站时, 浏览器提示技术无济于事, 但后续请求会更快。

浏览器提示技术

• 预载
• 预连接
• 预取
• DNS预取
• 预渲染

预载

你可以使用preload标签来告诉浏览器尽早获取一些静态资源。它们可以是图像, 字体, JavaScript, CSS, 脚本, 视频等。因此, 性能得以提高。

如果你希望用户随后访问多个页面, 则可以实现预加载。类似于电子商务商店, 用户可以在其中访问产品页面, 然后检查信息, 与其他产品进行比较, 添加到购物车, 付款等。

你可以使用以下插件来设置预加载功能。

更好的资源提示–一个免费的插件, 用于配置CSS和JS文件。

WP Rocket –一种高级插件, 可通过许多基本技术来增强网站性能, 包括预加载缓存和站点地图。

你如何知道是否启用了预加载？

找出最快的方法是查看页面源。你应该看到类似下面的内容。

<link rel="preload" as="style" href="IMPORTANT.css">
<link rel="preload" as="script" href="CRITICAL.js">

并非所有浏览器在编写时都支持预加载。因此, 请在实现前检查兼容性矩阵。

预连接

你是否从其他域加载资源？也许是CDN？

如果没有, 并且所有资源都从你的单个域加载, 那么这可能无济于事。

预连接提示浏览器在后台建立与其他域的连接, 以节省DNS查找, 重定向, TCP握手, TLS协商等时间。该想法是降低等待时间以提供来自另一个域的快速资源加载。

同样, 你可以使用上面提到的更好的资源提示插件或像perfmatters这样的高级插件。

配置所需的资源后, 你应该在页面源中看到它们, 如下所示。

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

注意：如果要从需要CORS的域中加载资源, 则需要指定为跨域, 并且输出应类似于。

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

Preconnect与最新版本的Chrome, Edge, Firefox, Safari兼容。

预取

让浏览器获取下一页, 你认为在用户四处导航时将需要下一页。预取将下载必要的资源并将其存储在本地缓存中, 并在需要时快速提供服务。有两种类型的预取。

DNS预取-下文说明

链接预取–使用<link url ..>配置。用于预取HTML或静态资源。你可以使用作为属性预取资源。

<link rel =” prefetch” href =” https://somesite.com/articles/page/2/” as =” document”>

as属性支持各种资源, 例如音频, 视频, 脚本, 轨道, 样式, 字体, 对象, 文档等。可以使用Pre Party Resource Hints插件配置链接预取。

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中实现浏览器提示。选择你喜欢的一个并满足要求。

Pre Party Resource Hints插件–一个免费的插件, 提供DNS预取, 链接预取, 预呈现, 预连接和预加载。

更好的资源提示–替代上述方法。

只要维护和支持免费插件, 它就很好。不幸的是, 很多插件都不会发生这种情况, 这就是为什么有时候最好选择付费版本的原因。商业版插件受到WordPress标准和安全修复程序的专业支持和最新支持。如果你愿意花一些钱来优化网站性能, 则可以查看以下内容。

WP Rocket –声誉卓著, 受到超过80万个站点的信任。一个网站的费用为49美元。

Perfmatters –一个网站的轻量级易于遵循, 价格为24.95美元。在我撰写本文时, 它具有以下功能。

有很多优化。

总结

WordPress核心是轻量级的, 但它的体积取决于你使用的主题和插件。而且, 优化网站性能以提高搜索排名和转化至关重要。上面的技术很容易理解, 但你不应止步于此。

你还应该考虑使用CDN在全球范围内高速缓存内容并将其更快地交付给用户。有很多, 但是我建议尝试同时提供CDN和安全性的SUCURI。