如果您想加速您的 WordPress 网站，在 WordPress 上使用 Instant Pages 是一种利用“预加载”功能的鲜为人知的策略。
最终，站点导航很简单。您转到一个页面，找到您感兴趣的链接，单击它，然后重复该过程。在后台，浏览器会在单击链接时加载每个页面。但是，想象一下如果您的浏览器在您单击之前加载了一个新页面。在前端，唯一的区别是第二页加载速度比平时快。
这是预加载 - 使用代码告诉访问者的浏览器预加载特定页面。这样，用户将体验到更快的导航，如果实施得当，他们将永远不会注意到后台加载了更多数据。
在本文中，我们将仔细研究预加载的工作原理，然后教您如何使用 Instant Pages 脚本向 WordPress 添加功能。我们还将测试预加载如何影响现实生活。
让我们开始吧！
Instant.page 通过预加载加快加载时间？ ️ 以下是如何在#WordPress 上使用它
点击推文
“即时”预加载介绍
预加载是告诉浏览器的 标签他们应该尽快加载和缓存资源。例如，您可以使用以下代码，以便浏览器在页面加载后立即获取您的 style.css 文件：
通常，您使用 preload 标签来下载样式表或脚本。然而，即时预加载更进一步。当您与特定链接交互时，它会告诉您的浏览器开始加载另一个页面。
除了缓存之外，您的浏览器不会对其预加载的网页执行任何操作。这意味着当您单击链接时，加载时间应该比平时快。但是，请记住，即时预加载仅适用于：
- 站点内的内部链接
- 外部页面的链接（如果需要！）
换句话说，为您的站点添加即时预加载可以加快内部导航速度。但是，它不会影响搜索引擎或其他网站的加载时间。
在我们自己的测试中，我们发现将鼠标悬停在链接上平均需要 200-300 毫秒才能单击链接。在现实生活中，这对于任何页面的加载时间来说都是一个不错的选择，即使它开始时很快。
值得注意的是，预加载与“预取”不同，后者是您可能会遇到的另一个术语。预取还告诉您的浏览器在后台加载资产。然而，这是以低优先级完成的，不适合几乎立即开始加载的目的。
即时页面可以轻松设置“及时”预加载
对于初学者来说，Instant Pages 是一个开源脚本，可用于为您的网站添加即时预加载。一旦用户将鼠标悬停在链接上，该脚本就会开始加载新页面 - 尽管它只会预加载静态内容。
根据 Instant Page，当用户将鼠标悬停在链接上大约 65 毫秒时，他们有 50% 的机会点击它。此时，您的浏览器将有一些时间开始在后台加载页面，从而加快加载速度。
在将脚本添加到您的网站之前，您需要运行一些内部速度测试。为此，我们喜欢使用 Chrome 开发工具。只需右键单击您网站上的任何页面，然后选择“检查”选项。右侧打开工具，选择网络标签，点击内部链接：
右下角的 DOMContentLoaded 部分告诉您加载页面 HTML 所花费的时间。运行其中一些测试并记下结果 - 这是您的基准。
现在，让我们看看如何在 WordPress 中使用 Instant Pages。
在 WordPress 上使用即时页面的最简单方法
在下一节中，我们将向您展示如何在 WordPress 上使用即时页面的手动方法，但使用绝对最简单的Instant Page的方法是使用专用插件：
Instant页面
作者：Alexandre Dieulot
当前版本：3.0.0
最后更新：2019年10月26日
Instant-page.zip
98% 评分 2,000+ 安装 WP 4.2+ 要求
此处不需要教程 - 您只需安装插件即可开始使用！
如何在 WordPress 上手动使用即时页面
我们向大多数用户推荐此插件，但您也可以手动将即时页面脚本添加到您的 WordPress 站点。
使用手动方法的一个小好处是您可以更好地控制预加载功能。
该过程将根据您使用的方法而有所不同。例如，您可以使用钩子将代码添加到 WordPress 或直接插入代码。
由于 Instant Pages 只需要几行代码就可以工作，我们将使用后一种技术。
为此，您需要通过文件传输协议 (FTP) 访问您的网站并导航至您的 WordPress 根文件夹。
在那里，转到 wp-content/themes 并找到与您的孩子相关的主题。
如果您没有使用子主题，或者不知道如何创建它们，我建议您使用上面的插件方法。如果您尝试在不使用子主题的情况下将代码片段添加到主题的模板文件中，您的更改将在您下次更新主题时被覆盖。
然后找页脚。 php 文件，它应该包含主题的最后一部分，
标签。使用文本编辑器打开文件并找到结束主体标记] ');if(preload_stylesheets&&0 ）。您可以在下面看到示例 footer.php 文件，但请记住，根据您使用的主题，您的文件看起来可能会略有不同：
现在，继续将以下代码片段粘贴到 t 之前他的标签。然后，您需要在关闭文件之前保存对文件的更改：
p>
默认情况下，脚本仅预加载内部链接。但是，您可以通过将属性添加到
标记来调整它以启用外部预加载，如下所示：您还可以添加 Another 属性来修改悬停延迟。例如，如果您的页面包含许多按钮和可点击元素，您可能希望增加预加载前的悬停时间。因此，您的浏览器应该只预加载访问者实际打算点击的链接：
在 WordPress 加载中测试即时预加载
p>
我们继续在我们的网站之一上设置 Instant.page 脚本以进行测试。您在上一节中看到了我们的基准测试结果，所以让我们再运行一次测试，看看脚本是否有明显不同：
在我们的测试中，我们没有注意到 WordPress 的加载时间有任何显着差异。根据 Chrome 开发人员工具，它略有偏差，但如您所见，它只有几毫秒。不错，但我们甚至没有将延迟降低 100 毫秒。
但是，当您在静态站点上使用该脚本时，结果确实会变得更好。在测试过程中，我们设法从一个完全静态的测试站点节省了 200 毫秒的延迟：
最终，如果您是 WordPress 用户，您可以简单地执行即时预加载。延迟的减少很好，但我们对 WordPress 的测试并没有显示出显着的减少，这意味着根据这些结果，它在某些情况下可能只是一个游戏规则的改变者。
结论
您可以采取任何措施来改善网站的加载时间，这对您的业务来说都是一件好事。即使是几毫秒的延迟也会对用户体验产生负面影响。实施预加载有助于进一步提高性能。特别是对于内容丰富并渴望最大化“网站停留时间”的网站。
Instant.page 通过预加载加快加载时间？ ️ 以下是如何在#WordPress 上使用它
点击发送推文
实施即时预加载 在您网站的
标签之间添加脚本等即时页面。如果您使用 WordPress，甚至还有一个插件可以为您完成这项工作。然而，我们的测试表明，延迟的减少对于 WordPress 网站而言并不像静态网站那样显着。如果您正在寻找其他方法来加速您的 WordPress 网站，您还需要了解图像优化和缓存。我们在帖子中介绍了有关如何加速 WordPress 的其他策略。
您对即时页面或预加载的工作原理有任何疑问吗？让我们在下面的评论部分讨论它们！
