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

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

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

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

<link href=“https://domain.com/post”>
<link href=”https://domain.com/post”>
<link href="https://domain.com/post">

预取的工作原理

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

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

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

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

(1)桌面端

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

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

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

(2)移动端

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

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

欺骗大脑

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

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

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

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

具有数据属性的附加选项

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

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

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
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
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中的页脚代码框中。

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

<script type=‘text/javascript’>
document.body.setAttribute(‘data-instant-intensity’, ‘150’);
</script>
<script type=’text/javascript’>
document.body.setAttribute(‘data-instant-intensity’, ‘150’);
</script>
<script type='text/javascript'>
document.body.setAttribute('data-instant-intensity', '150');
</script>

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

<script type=‘text/javascript’>
document.body.setAttribute(‘data-instant-intensity’, ‘150’);
document.body.setAttribute(‘data-instant-allow-external-links’, ‘true’);
</script>
<script type=’text/javascript’>
document.body.setAttribute(‘data-instant-intensity’, ‘150’);
document.body.setAttribute(‘data-instant-allow-external-links’, ‘true’);
</script>
<script type='text/javascript'>
document.body.setAttribute('data-instant-intensity', '150');
document.body.setAttribute('data-instant-allow-external-links', 'true');
</script>

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

与body标签合并

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

<body
data-instant-intensity=‘mousedown’
data-instant-allow-external-links
>
</body>
<body
data-instant-intensity=’mousedown’
data-instant-allow-external-links
>
</body>
<body
data-instant-intensity='mousedown'
data-instant-allow-external-links
>
</body>

预加载时间设置

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

按下鼠标时预加载

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

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

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

调整悬停延迟

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

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

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

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

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

为此,请将data-instant-intensity="viewport"其作为属性添加到<body>。

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

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

按下鼠标时触发点击

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

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

未预加载的页面

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

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

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

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

<a href=“articles?page=2” data-instant>Page 2</a>
<a href=”articles?page=2″ data-instant>Page 2</a>
<a href="articles?page=2" data-instant>Page 2</a>

黑名单页面

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

<a href=“logout?token=f2d2650ce6” data-no-instant>Log out</a>
<a href=”logout?token=f2d2650ce6″ data-no-instant>Log out</a>
<a href="logout?token=f2d2650ce6" data-no-instant>Log out</a>

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

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

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

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

如果您只想预加载特定链接,data-instant-whitelist请在<body>中添加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支持<link>(从2006年开始!),但如果页面没有被缓存(这是一个开放的错误),它将重新下载页面。

不兼容的浏览器

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

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

安全CDN

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

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

自托管

也可以自己托管脚本。下载最新版本,然后在</body>之前添加一个模块脚本标签:

<script src=“instantpage-5.1.1.js” type=“module” defer></script>
<script src=”instantpage-5.1.1.js” type=”module” defer></script>
<script src="instantpage-5.1.1.js" type="module" defer></script>

你也可以通过npm安装它:

npm i instant.page
npm i instant.page
npm i instant.page

历史

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

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

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

未来相关项目

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

重要声明

本网站的文章部分内容可能来源于网络,如有侵犯你的权益请联系邮箱:wxzn8@outlook.com
站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!本站资源大多存储在云盘,如发现链接失效请反馈,我们会及时更新。

给TA打赏
共{{data.count}}人
人已打赏
WordPress优化学习

WordPress上CDN加速能够极大地提升网站速度体验

2023-1-5 21:03:10

WordPress优化学习

深入了解预加载关键图像技术

2023-1-5 21:03:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索