在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

类似文章