巧用Instant Page提升页面加载速度__wordpress教程

Instant.page是一个免费的开源库，它使用即时预加载，这意味着它会在用户点击页面之前预加载页面。仅当用户很有可能访问页面时才会预加载页面，并且仅预加载HTML，尊重您的用户和服务器的带宽和CPU。它使用被动事件侦听器，以便您的页面保持流畅，并且在用户启用数据保护程序时不会预加载。

即时页面功能可让您在用户将鼠标悬停在链接上后在后台自动预取URL。这导致几乎瞬时的加载时间，并改善了用户体验和感知性能（网站感觉有多快）。我们利用Alexandre Dieulot开发的Instant.page库。

预取的工作原理

就服务器和移动设备的性能提升和低利用率而言，以上是最佳组合。该功能尊重您的移动设备（Android、iPhone）是否启用了数据保护程序或低数据模式。如果打开，则不会预加载任何内容。

由于此功能适用于鼠标悬停，因此不会显示在速度测试工具上。但我们鼓励您在启用后点击您的网站。你应该能感觉到不同！

亚马逊和其他公司发现，消除100毫秒的延迟可以提高1%的销售额。但是网络上的延迟很难克服。

Instant.page使用即时预加载——它在用户点击页面之前预加载页面。

（1）桌面端

在用户点击链接之前，他们将鼠标悬停在该链接上。当用户悬停65毫秒时，有二分之一的机会点击该链接，因此instant.page此时开始预加载，页面预加载平均超过300毫秒。

另一种选择是在用户开始按下鼠标而不预加载时加载页面。这使得未使用的请求为零，同时仍将页面加载平均提高了80毫秒。

您还可以在悬停时或在链接可见时立即预加载，并在用户开始按下鼠标时触发点击，从而使您的页面成为世界上最快的页面。

（2）移动端

用户在释放之前开始触摸他们的显示器，平均留出90毫秒让页面预加载。

另一种选择是在链接可见时立即预加载链接。

欺骗大脑

人脑将不到100毫秒的动作视为瞬间。因此，instant.page让您的页面即使在3G上也感觉即时（假设您的页面渲染速度很快）。

轻松使用您的服务器和用户的数据计划

仅当用户很有可能访问页面时才会预加载页面，并且仅预加载HTML ，尊重您的用户和服务器的带宽和CPU。

它使用被动事件侦听器和requestIdleCallback以使您的页面保持流畅。它尊重数据保护模式。它是1kB并在其他所有内容之后加载。它是免费和开源的（MIT许可证）。

具有数据属性的附加选项

您可以使用以下data-instant属性启用即时页面的其他选项。只需将这些属性中的任何一个添加到文档中的标记，剩下的就交给我们了。

您可以在instant.page了解更多关于这些不同属性的作用。有关将其中一些属性添加到标记的一些方法，请参见下文。

data-instant-allow-query-string
data-instant-allow-external-links
data-instant-whitelist
data-instant-intensity="mousedown"
data-instant-intensity="mousedown-only"
data-instant-intensity="150"
data-instant-intensity="viewport"
data-instant-intensity="viewport-all"
data-instant-mousedown-shortcut

页面加载后添加JavaScript

第一种方法是在页面加载结束时触发JavaScript。可以将以下代码添加到WPTurbo中的页脚代码框中。

假设您想更改脚本在预加载前等待多长时间（以毫秒为单位）的数据强度时间。您可以像这样添加它：

document.body.setAttribute('data-instant-intensity', '150');	

一次只能使用一个data-instant-intensity属性，但您可以将其与其他属性混合搭配。因此，例如，这将起作用：

document.body.setAttribute('data-instant-intensity', '150');
document.body.setAttribute('data-instant-allow-external-links', 'true');	

注意：上述方法会向您的站点添加一个额外的请求。

与body标签合并

第二种方法是在呈现页面时合并现有body标记中的属性。这不需要额外的请求。可以将以下代码添加到 WPTurbo 中的页脚代码框中。这是一个例子：

预加载时间设置

默认情况下，instant.page在悬停链接后以及移动用户开始触摸其显示屏时预加载65毫秒。还有其他选择。

按下鼠标时预加载

要在用户开始按下鼠标按钮时加载页面，在释放它之前，将其data-instant-intensity="mousedown"作为属性添加到。

页面预加载平均需要80毫秒。

要在桌面上以这种方式使用而不是在移动设备上预加载，请使用data-instant-intensity="mousedown-only".

调整悬停延迟

对于一些具有大量点击目标的网站，例如一些电子商务网站，65毫秒规则不适用：它会为每个访问的页面预加载两次以上。

要增加悬停延迟，请在属性中传递毫秒数，例如150ms: data-instant-intensity="150"。

或者，如果您不关心提出很多请求，则可以减少它。

在链接可见后立即预加载链接

在小型移动设备（例如智能手机）上，如果您希望您的页面在更多情况下是即时的，您可以在链接可见时立即预加载它们。

为此，请将data-instant-intensity="viewport"其作为属性添加到。

"viewport-all"如果您不担心发出大量请求，您也可以使用 来在其他外形尺寸上执行此操作。

请注意，如果用户使用2G或启用了数据保护程序，它将回退到使用默认选项。

按下鼠标时触发点击

如果您想更快地触发点击，请将data-instant-mousedown-shortcut其作为属性添加到。请注意，这可能与现有脚本冲突。

（此功能从v5.1开始是可选的，在5.0中默认启用，您需要使用data-instant-no-mousedown-shortcut它来禁用它。）

未预加载的页面

默认情况下，不会预加载URL中带有查询字符串（“？”）的页面，因为它们有时会触发操作（例如注销或删除某些内容）。

使用查询字符串将页面列入白名单

如果您想让所有带有查询字符串的页面都被预加载，data-instant-allow-query-string请在中添加一个属性。

如果您只想允许预加载带有查询字符串的选择链接，请为其添加一个data-instant属性：

Page 2

黑名单页面

要手动将触发操作的链接列入黑名单，data-no-instant请为其添加属性：

Log out

这主要在您使用时使用data-instant-allow-query-string，否则默认情况下带有查询字符串的链接已经被列入黑名单。

外部链接

默认情况下不预加载外部链接，以允许它们都data-instant-allow-external-links向添加属性。

要仅允许某些外部链接，data-instant请为其添加属性。

仅预加载部分链接（白名单模式）

如果您只想预加载特定链接，data-instant-whitelist请在中添加a并通过向链接添加data-instant属性来标记要预加载的链接。

内容拦截器

出于可疑的原因，预取被某些内容拦截器（例如uBlock Origin）视为侵犯隐私。请务必在您的网站上禁用内容拦截器以查看正在发出的预加载请求。

Firefox中的uBlock Origin完全禁用预取；如果您使用它，您需要暂时完全禁用扩展程序，而不仅仅是为您的站点关闭它。

这只会影响使用EasyPrivacy列表的内容拦截器的用户。它适用于AdBlock；而uBlock Origin的用户是少数。如果您想让instant.page为您网站上具有隐私内容拦截器的用户工作，您可以自行托管该脚本。

技术细节

使用 <link href=”url “> 完成预加载。

源代码有200行可读。

浏览器支持

Instant.page是渐进式增强——对不支持它的浏览器没有影响。

Chrome和基于Chromium的浏览器从61版（2017年9月发布）开始全面支持。

Firefox支持（从2006年开始！），但如果页面没有被缓存（这是一个开放的错误），它将重新下载页面。

不兼容的浏览器

Safari 13.0支持 但默认禁用。希望它将在2020年9月在Safari 14.0中启用。

UC浏览器不支持模块，因为它基于Chromium 57。基于Chromium 69的支持模块的新版本于2018年10月宣布，但尚未发布。

安全CDN

Instant.page的脚本由Cloudflare Workers托管，因此没有服务器可以入侵。

此外，它使用子资源完整性让现代浏览器验证文件未被篡改。它作为一个模块加载，因此大多数旧浏览器不会执行它。

自托管

也可以自己托管脚本。下载最新版本，然后在之前添加一个模块脚本标签：

你也可以通过npm安装它：

npm i instant.page

历史

在hover和touchstart上预加载网页的想法来自我的一个旧库InstantClick，它于2014年1月推出，它使用Ajax和history.pushState而不是，将网站转换为单一的页面应用。它使网站更加流畅，但需要额外的工作。

不幸的是，InstantClick主要只是一个概念证明，因为它没有很好的文档。

Google在2018年12月发布的quicklink会在链接显示后立即预加载带有的链接，这清楚地表明我应该专注于构建一个“精简”、更易于使用的InstantClick版本，即Instant.page，于2019年2月推出。

未来相关项目

InstantClick提供了最流畅的体验，同时仍然不需要像框架一样多的工作（提供较少的结果），所以我正在考虑在2020年晚些时候再次开发它。它将重命名为“instant.page extra”。

内容没看懂？ 不太想学习？想快速解决？ 有偿解决： 联系专家

阿里云企业补贴进行中： 马上申请

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心。

购买腾讯云产品享受折上折，更有现金返利:同意关联，立享优惠