在WordPress中实现Preload、Prefetch、Preconnect

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

作为网站所有者，谁不喜欢尽可能地加快网页加载速度呢？

确保site loads faster在全球范围内始终如一是具有挑战性的。有几件事情可以做，以快速加载站点资源，包括启用以下浏览器提示。它们也被称为预浏览技术。

注意：当您首次访问网站时，浏览器提示技术并没有太多帮助，但后续请求会更快。

预加载

您可以使用preload标签告诉浏览器提前获取一些静态资源。它们可以是图像、字体、JavaScript、CSS、脚本、视频等。它有助于优先加载资源，从而提高性能。

如果您期望用户连续访问多个页面，那么预加载是一个不错的实现。比如用户访问产品页面，然后查看信息、与其他产品进行比较、加入购物车、付款等。

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

Better resource hints – 一个免费插件，用于配置CSS和JS文件。

WP Rocket – 一个高级插件，通过许多重要技术（包括预加载缓存和站点地图）来提升网站性能。

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

最快的方法是查看页面源代码。您应该看到如下内容。

并非所有浏览器都支持预加载功能。因此，在实施之前，请查看compatibility matrix。

预连接

您是否从其他域加载资源？可能是CDN吗？

如果不是，并且每个资源都从单个域加载，那么这可能没有帮助。

预连接提示浏览器在后台与其他域建立连接，以节省DNS lookup、重定向、TCP握手、TLS协商等时间。其想法是降低延迟，从另一个域名快速加载资源。

同样，您可以使用上述更好的资源提示插件或高级插件，如perfmatters。

配置所需资源后，您应该在页面源代码中看到它们，如下所示。

注意：如果从需要CORS的域加载资源，则需要指定crossorigin，输出应如下所示。

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

预获取

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

DNS预取 – 下面进行了解释

链接预取 – 使用进行配置。用于预取HTML或静态资源。您可以使用as属性进行预取资源。

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

DNS预取

从许多域加载资源，并希望在后台解析它们？

这个快速设置可以帮助尽早解决所有潜在的域名问题，这样当资源被请求时，它会加载得更快。这有助于降低整体延迟。

假设你正在从3个域名加载资源，每个域名大约需要100毫秒进行DNS查找，那么你将节省300毫秒的延迟。

很酷吧？

您可以通过使用perfmatters插件或将以下代码添加到您的主题的functions.php文件中来实现，如果您习惯编辑主题文件的话。

//* DNS预取
function dns_prefetch() {
    echo '



}
add_action('wp_head', 'dns_prefetch', 0);

您可以在Mozilla web docs了解更多信息。

预渲染

您是否期望您网站的用户导航到潜在的页面？

Prerender可以帮助在后台加载这些资源，当用户点击时，它们可以非常快速地获取它们。您可以使用Pre Party Resource Hints插件来实现这一点。

预渲染适用于轻量级页面或资源，但对于整个网站或大型资源要小心，因为它可能会增加CPU利用率和带宽，从而减慢网站速度。因此，尝试较小的资源并进行测试，以确保它没有副作用。

正如您所看到的，有四个主要的插件用于在WordPress中实现浏览器提示。选择您喜欢并符合要求的插件。

Pre Party Resource Hints plugin – 一个免费插件，提供DNS预取、链接预取、预渲染、预连接和预加载。

Better resource hints – 上述插件的另一种选择。

免费插件只要得到维护和支持就很好。不幸的是，许多插件没有得到这样的支持，这就是为什么有时候最好选择付费版本。商业版本的插件得到专业支持，并与WordPress标准和安全修复保持最新。如果您愿意花几美元来优化您的网站性能，那么您可以看看以下的插件。

WP Rocket – 受好评，被超过800,000个网站信任。一个网站的费用是49美元。

Perfmatters – 轻量级的，易于使用，一个网站的费用是24.95美元。截至我写这篇文章，它提供以下功能。

这是很多优化。

结论

WordPress核心是轻量级的，但它的体积取决于您使用的主题和插件。为了获得更好的搜索排名和转化率，优化网站性能至关重要。上述技术易于实施，但您不应该停在那里。

您还应该考虑使用CDN更快地缓存和提供内容给全球用户。有很多选择，但我建议尝试提供CDN和安全性的SUCURI。