让你的网页载入更即时,只需加入一段程式码

亚马逊公司(Amazon)发现100毫秒(0.1秒)网站延迟会影响1%销售额,但网站速度问题很难改善,无论是不是电子商务网站,速度已经成为每个网站争抢流量、留住使用者甚至是搜寻引擎最佳化关键。要提高网站速度的方法非常多,依照我的经验,重新检查原始码是第一要务,将过度影响速度的部分移除,其他像是透过内容传递网路(CDN)进行图片影片分流也是个很好的作法,关于网站速度检查可参考「16个免费网站测速工具,分析网页效能表现」一文,有些很好用的工具能帮助开发者发现网站过慢等问题。

网路测速服务加入检测上传速度、网路延迟功能

本文要介绍一个很有趣的小程式「instant.page」,能在短短一分钟让你的网站变快!听起来是不是很神奇呢?花了一些时间了解这个工具的运作原理,其实不难理解,instant.page运用浏览器prefetch技术(预先取回链结),缩小使用者将滑鼠游标移动到链结上、点选链结再到整个网页内容载入中间的几毫秒延迟时间。根据网站说明,这是一种欺骗大脑的概念,因为人类的时间感知力不到100毫秒,即使在3G行动网路也能感受到即时性。

instant.page原始码只有125行,开放原始码,程式部分使用Cloudflare Workers托管,这也意味着使用serverless方式确保程式码不会遭到入侵或窜改,亦能拥有最好的延展性。这个概念来自于InstantClick,不过运作方式不太一样(InstantClick没有好的说明文件),最近Google释出的quicklink 会在显示链结时自动加入prefetch,开发者认为他应该专注在建构一个更精简的版本,于是有了instant.page。

我已经在网站上使用instant.page,读者可以感受一下速度的差异。

网站名称:instant.page

网站地址:https://instant.page/

使用教学

STEP 1

开启instant.page 官方网站,首页就会有非常完整的说明。

而它的使用方式真的非常简单,直接复制网站内的程式码,点选Copy snippet再把这段程式码贴到网站的之前,大功告成!网站现在就有内部链结prefetch的能力。

根据instant.page官方的技术细节,目前Google Chrome浏览器完整支援,Firefox也支援不过如果页面没有被快取就会重新下载页面,Safari没有支援,UC Browser还没支援这模组,但应该会在今年支援,Edge不支援prefetch不过会采用Chrome引擎。

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

STEP 2

在首页有个Test your clicking speed 按钮,可以测试一下你将游标移动到链结上、再点击链结的时间差,依照instant.page 说明,当使用者点选链结前,会将游标停在链结上,时间超过65 微秒(这个时间非常短)时就会开始预先载入该链结内容,如此一来在点选链结后就能达到即时显示页面的效果。

STEP 3

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

从instant.page的「Page not preloaded」可以查到白名单和黑名单的设定方式教学。

值得一试的三个理由:

  1. 运用prefetch 技术,在游标移动至链结时预先获取内容
  2. 开放原始码,程式码只有125 行(1 kb)
  3. 使用Cloudflare Workers 托管,确保程式安全与最佳延展性
「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!