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

本文概述

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

利用现代浏览器功能, 如预加载, 预取, 预连接, 以使WordPress网站更快。
作为网站所有者, 谁不想让一切可能的事情更快地加载网页？
确保全球范围内更快地持续加载站点具有挑战性。你可以采取多种措施来快速加载站点资源, 包括启用以下浏览器提示。它们也被称为预浏览技术。
注意：初次访问网站时, 浏览器提示技术无济于事, 但后续请求会更快。
浏览器提示技术

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

预载你可以使用preload标签来告诉浏览器尽早获取一些静态资源。它们可以是图像, 字体, JavaScript, CSS, 脚本, 视频等。因此, 性能得以提高。
如果你希望用户随后访问多个页面, 则可以实现预加载。类似于电子商务商店, 用户可以在其中访问产品页面, 然后检查信息, 与其他产品进行比较, 添加到购物车, 付款等。
你可以使用以下插件来设置预加载功能。
更好的资源提示–一个免费的插件, 用于配置CSS和JS文件。

文章图片
WP Rocket –一种高级插件, 可通过许多基本技术来增强网站性能, 包括预加载缓存和站点地图。
你如何知道是否启用了预加载？
找出最快的方法是查看页面源。你应该看到类似下面的内容。

< link rel="preload" as="style" href="http://www.srcmini.com/IMPORTANT.css"> < link rel="preload" as="script" href="http://www.srcmini.com/CRITICAL.js">

并非所有浏览器在编写时都支持预加载。因此, 请在实现前检查兼容性矩阵。
预连接你是否从其他域加载资源？也许是CDN？
如果没有, 并且所有资源都从你的单个域加载, 那么这可能无济于事。
预连接提示浏览器在后台建立与其他域的连接, 以节省DNS查找, 重定向, TCP握手, TLS协商等时间。该想法是降低等待时间以提供来自另一个域的快速资源加载。
同样, 你可以使用上面提到的更好的资源提示插件或像perfmatters这样的高级插件。

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

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

【在WordPress中实现预加载，预取，预连接】注意：如果要从需要CORS的域中加载资源, 则需要指定为跨域, 并且输出应类似于。

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

Preconnect与最新版本的Chrome, Edge, Firefox, Safari兼容。
预取让浏览器获取下一页, 你认为在用户四处导航时将需要下一页。预取将下载必要的资源并将其存储在本地缓存中, 并在需要时快速提供服务。有两种类型的预取。
DNS预取-下文说明
链接预取–使用< link url ..> 配置。用于预取HTML或静态资源。你可以使用作为属性预取资源。
< link rel =” prefetch” href =http://www.srcmini.com/” 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。