使用instant.page,一段代码为你的网站加速

love2wind

 2021-09-30  /   📝技巧教程,🎃源码服务  /   89 人浏览  /   0 条评论  /   全文共461字

今天不知道写点啥,刚才看网站后台,发现加载了个instant.page的JS,干脆就水一篇关于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="//cdn.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>

参考文章

 赞  赏

如果觉得我的文章对你有用,请随意打赏

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开   或者 扫一扫,即可进行扫码赞赏哦

原创文章,版权属于:涅槃博客 - love2wind
本文最后更新于2021年09月30日20时28分31秒,已超过16天没有更新,若内容或图片失效,请留言反馈
本文链接:https://love2wind.cn/archives/2209.html(转载时请注明本文出处及文章链接)
作品采用:《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

发表评论

涅槃博客

涅槃博客

Love2wind's blog