巧用即时页面提高页面加载速度

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

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

预取的工作原理

以上是在服务器和移动设备的性能改进和低利用率方面的最佳组合。此功能会考虑您的移动设备(Android、iPhone)是否启用了数据保护程序或低数据模式。如果打开，不会预加载任何内容。

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

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

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

(1)桌面端

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

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

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

(2)移动终端

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

另一种选择是在链接可见时就预加载它们。

欺骗大脑

人脑在不到100毫秒内的动作被视为一瞬间。因此，instant.page让你的页面即使在3G上也有即时的感觉(假设你的页面渲染很快)。

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

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

它使用被动事件侦听器和requestIdleCallback来保持页面流畅。它尊重数据保护模型。它的大小是1kB，加载其他所有东西之后。它是免费和开源的(麻省理工学院许可)。

带有数据属性的附加选项

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

您可以在instant.page上了解更多关于这些不同属性的功能。下面是一些将这些属性添加到标签的方法。

data-instant-allow-query-stringdata-instant-allow-external-linksdata-instant-whitelistdata-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’);

一次只能使用一个数据即时强度属性，但您可以将其与其他属性混合搭配使用。例如，这是可行的:

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

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

与正文标签合并

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

预加载时间设置

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

按下鼠标时预加载

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

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

要在桌面上以这种方式使用它，而不是将其预加载到移动设备上，请使用data-instant-intensity = ” mousedown-only “。

调整悬停延迟

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

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

或者，如果你不在乎提出很多要求，你可以减少它。

链接一出现就预加载。

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

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

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

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

按下鼠标时触发点击。

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

(此功能在5.1版中是可选的，在5.0版中默认启用。您需要使用数据-即时-无鼠标按下-快捷方式来禁用它。)

未预加载的页面

默认情况下，带有查询字符串(“？)没有预加载)，因为它们有时会触发动作(例如注销或删除某些内容)。

使用查询字符串的白名单页面。

如果您希望预加载所有带有查询字符串的页面，data-instant-allow-query-string请在。

如果您只想允许预加载带有查询字符串的选择链接，请为其添加一个数据即时属性:

Page 2

黑名单页面

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

Log out

这个主要是你用的时候用data-instant-allow-query-string，否则带查询字符串的链接默认已经被列入黑名单了。

外部链接

默认情况下不会预加载外部链接，以允许它们都向数据即时允许外部链接添加属性。

只允许一些外部链接，数据即时请添加属性。

仅预加载部分链接(白名单模式)

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

内容拦截器

出于可疑的原因，预取被一些内容阻止程序(如uBlock Origin)视为侵犯隐私。请务必在您的网站上禁用内容拦截器，以查看正在进行的预加载请求。

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

这只会影响使用EasyPrivacy列表内容阻止程序的用户。它适用于AdBlock；uBlock Origin的用户是少数。如果您希望instant.page为网站上带有隐私内容拦截器的用户工作，您可以自己托管脚本。

技术细节

使用url ” >完成预加载。

有200行源代码可读。

浏览器支持

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

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

火狐支持(从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主要是一个概念证明，因为它没有得到很好的证明。

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

未来相关项目

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