MENU

网站预加载JS脚本 instant.page

March 27, 2019 • Read: 6834 • 网站优化阅读设置

  • 本篇文章介绍了一个网站预加载的脚本 instant.page
  • 作用是可以预加载用户想访问的页面,当用户真正点击链接后,就会直接从缓存中读取,以此提升网站的访问速度。

原理介绍及作用

在逛夏目友人帐的网站时无意间看到这样一个脚本,号称可以瞬间提高网站页面加载速度。我一直对网站加载速度的优化很感兴趣,于是便立即拿来试试,效果果然如他说的那样不错。

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

  • 在用户点击网站链接之前,他们将鼠标悬停在该链接上。当用户徘徊65毫秒时,他们将点击该链接有两个机会,因此instant.page此时开始预加载,平均超过300毫秒,以便页面预加载。
  • instant.page是渐进式增强 - 对不支持它的浏览器没有影响。

效果演示

经过我的测试,发现以下几点:

  • instant.page对站内访问速度的提升的确很给力。然而它只会预加载自己的站内链接,而不会预加载其他外链。

如图所示,当鼠标在左侧文章链接悬停超过65ms后,右侧Network即会对文章页面进行预加载。而悬停未超过65ms时,则不会进行预加载(红色部分)

instant.page演示

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

如图所示(数据仅供参考),在我3月25日凌晨使用了instant.page脚本之后,PV和请求量几乎是成倍的增长。(对于使用CDN全站加速的童鞋可能要多考虑一下了,因为请求数也是要收费的。

PV演示

  • 使用instant.page只会预加载html页面,而不会加载图片等资源。(可以看到上图,并没有太多的流量损耗)因此点击预加载的页面是秒开的,图片在点击之后才会加载,不用担心与lazyload的各种不兼容问题。

食用方法

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

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

<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>

二. 自托管

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

<script src="`存放路径`/instantclick-1.2.2.js" type="module"></script>

三. 用我的
脚本放在又拍云,不用担心拖慢速度。

<script src="https://cdn.zrahh.com/js/instantclick-1.2.2.js" type="module"></script>

参考自康康夏目友人帐以及instant.page官网

Leave a Comment

62 Comments
  1. AdviseRed AdviseRed     Windows 10 /    Google Chrome

    快点给老子更!!!!!!!!@(滑稽)

  2. 哥斯拉 哥斯拉     Windows 7 /    Google Chrome

    高科技的东西,我试试能不能弄好。

    1. 左岸 左岸     MacOS /    Google Chrome

      @哥斯拉蛮好弄得,引入一段js就好啦,不懂问我

  3. shansan shansan     Windows 10 /    Google Chrome

    脚本不错,偷偷收藏@(滑稽)

    1. 左岸 左岸     MacOS /    Google Chrome

      @shansan@(滑稽)

  4. 心语难诉 心语难诉     Windows 10 /    Google Chrome

    你站点的访客量还算可以啊!平均一天六七百୧(๑•̀⌄•́๑)૭

    1. 左岸 左岸     MacOS /    Google Chrome

      @心语难诉哈哈还行吧,主要是Python笔记给撑场面@(你懂的)

  5. 头条新闻 头条新闻     Windows 7 /    Google Chrome

    文章不错支持一下吧,非常喜欢

  6. 林逸吖 林逸吖     Android Oreo /    Google Chrome

    食用干货@(滑稽)

    1. 左岸 左岸     MacOS /    Google Chrome

      @林逸吖非常不错哦,推荐使用@(滑稽)

  7. 枫灵er 枫灵er     Windows 10 /    Google Chrome

    巧了,我还正在考虑要不要把脚本下载下来自己用呢。才发现你已经做了

    1. 左岸 左岸     MacOS /    Google Chrome

      @枫灵er2333直接用我的吧嘿嘿#(脸红)

  8. Anjl Anjl     Windows 10 /    Google Chrome

    我就知道你这里有干货#(击掌) 好羡慕你们网站能用表情的人#(哭泣)

    1. 左岸 左岸     Android Pie /    Google Chrome

      @Anjl2333要不你问问主题作者吧,他们应该遇到过知道怎么解决@(滑稽)

  9. 头条 头条     Windows 7 /    Google Chrome

    文章不错支持一下吧

  10. 微信选房 微信选房     Windows 10 /    Google Chrome

    好久没到左岸老弟这儿来逛逛了,今天来一拨儿日常好评,网站做得不错,有前途

    1. 左岸 左岸     MacOS /    Google Chrome

      @微信选房欢迎老哥!@(滑稽)