instant.page预加载JS脚本,让你的网页载入速度更快更即时

亚马逊和其他公司发现,消除100毫秒的延迟可使销售额提高1%。

无论是不是电子商务网站,速度已经成为每个网站争抢流量、留住用户甚至是搜索引擎最佳化的关键。要提高网站速度的方法非常多,重新检查原始码是第一要务,将过度影响速度的部分移除,其他像是透过内容传递网路(CDN)进行全站加速也是个很好的作法。关于网站速度检查可参考【16个在线免费测速网站工具】,有些很好用的工具能帮助开发者发现网站过慢等问题。

本文这次要介绍的是一个网站预加载的脚本instant.page,作用是可以预加载用户即将访问的页面,当用户真正点击此链接后,能够从缓存中读取,因而提高网站的访问速度。

instant.page预加载JS脚本,让你的网页载入速度更快更即时 技术教程 第1张

作用原理:

instant.page运用浏览器prefetch技术(预读取),缩小使用者将鼠标移动到链接上、点选链接再到整个网页内容载入中间的几毫秒延迟时间。用官网上的话说:在用户点击网站链接之前,他们将鼠标悬停在该链接上。当用户徘徊65毫秒时,他们将点击该链接有两个机会,因此instant.page开始预加载,平均超过300毫秒,以便页面预加载。

这是一种欺骗大脑的概念,因为人类的时间感知力不到100毫秒,即使在3G移动网路也能感受到即时性。instant.page原始码只有125行,开放原始码,程式部分使用Cloudflare Workers托管,这也意味着使用serverless方式确保程式码不会遭到入侵或窜改,亦能拥有最好的延展性。

使用方法:

STEP 1:打开instant.page 官方网站,首页就会有非常完整的说明。代码如下:

instant.page预加载JS脚本,让你的网页载入速度更快更即时 技术教程 第2张
<script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>

STEP 2:选择将官方脚本下载后保存到服务器使用,然后在</ body>之前添加一个模块脚本标签:

<script src="instantpage-3.0.0.js" type="module" defer></script>

STEP 3:Wordpress用户可以直接搜索安装:【instant.page】插件,点击启用便可实现上述效果。

温馨提示:

1、instant.page是渐进式增强模组,对不支持这项技术的浏览器不会有任何影响。

2、预设情况下instant.page不会预先载入链结中带有查询符号(问号)的页面,因为它们有时候会触发一些操作(例如登入或删除某些东西),不过如果你要让整个页面都有效果,也可以加入参数至中,或是针对不同的链结个别设定。

3、使用付费CDN并开了全站CDN的网站,谨慎使用。不过不用担心的是,预加载只是加载html页面,图片等文件不会加载,所以不会有太多的流量损耗。

参与评论