替网站加速的JS 脚本： instant.page

 

有一项技术叫做 prefetch，即预加载技术，当用户有意向访问某个页面之前，浏览器首先对此页面进行预加载，当用户真正点击链接后，会从预加载的缓存中直接读取页面内容，缩短页面的加载时间。

本文介绍的 instant.page，就是使用这项技术的一个 JS 脚本，脚本会根据用户鼠标在链接上的停留时间进行判断，当达到 65 毫秒，用户有一半的机会打开此链接，instant.page 将会对此页面进行预加载。

使用

使用官方提供的带有 Cloudflare 加速的脚本。

instant.page 的使用非常简单：

<script src="//instant.page/5.1.0" type="module"></script>

只需要把这行代码添加到网站的 </body> 之前即可。

https://instant.page/

--------------------------

关于instant.page

    instant.page官网：https://instant.page

instant.page宣称可让网站加载时间缩短到 1 分钟以内，并提高 1% 的转化率。其作用是可以预加载用户想访问的页面，当用户真正点击链接后，就会直接从缓存中读取，以此提升网站的访问速度。

instant.page 原理的话我们不必深层了解，只需知道：

    使用即时预加载技术，在用户点击之前预先加载页面。当用户的鼠标悬停在一个链接上超过 65 毫秒时，浏览器会对此页面进行预加载，当用户点击链接后，就从预加载的缓存中直接读取页面内容，从而达到缩短页面加载时间的目的。

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

    使用 instant.page 会显著增加自己的网站的 PV 以及请求量。

    使用 instant.page 只会预加载 html 页面，而不会加载图片等资源。因此点击预加载的页面是秒开的，图片在点击之后才会加载，不用担心与 lazyload 的各种不兼容问题。

使用方法一、使用官方提供的带有 Cloudflare 加速的脚本

建议服务器在国外的朋友使用。只要把这行代码添加到网站的 </body>标签之前即可。（一般都可以在后台直接添加）

    <script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>

二、使用国内公共CND

Jsdelivr

    <script src="//gcore.jsdelivr.net/npm/instant.page@5.1.0/instantpage.min.js"></script>

字节跳动

    <script src="//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/instant.page/5.1.0/instantpage.min.js"></script>

    <script src="//s0.pstatp.com/cdn/expire-1-M/instant.page/1.2.2/instantpage.min.js" type="application/javascript"></script>

BOOTCDN

    <script src="https://cdn.bootcdn.net/ajax/libs/instant.page/5.1.0/instantpage.min.js"></script>

二。自托管

建议服务器在国内的朋友使用。只需将下面这段 js 点击查看上传到自己服务器，然后在 </body>标签之前根据路径添加下面的代码即可。

    <script src="`存放路径`/instantpage.min.js" type="module"></script>

参考文章

    instant.page官网

----------------------

related post:

https://briteming.blogspot.com/2022/01/instantpage.html