MENU

网站预加载JS脚本 instant.page

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

  • 本篇文章介绍了一个网站预加载的脚本 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. BigCoke BigCoke     Android Pie /    Google Chrome

    pjax不好吗@(滑稽)

    1. 左岸 左岸     MacOS /    Google Chrome

      @BigCoke这个脚本作者有一个旧库instantclick使用的是pjax,而instant.page算是一个新版的instantclick,使用的是Google的 link rel =“prefetch”href =“ url ”,用作者的话来说就是更精简、易用@(滑稽)

    2. BigCoke BigCoke     Windows 7 /    Google Chrome

      @左岸引用了一下你的cdn,最近速度有些鸡肋@(滑稽)

    3. 左岸 左岸     MacOS /    Google Chrome

      @BigCokeTTFB好高,最近咋了这是#(小眼睛),之前还挺快的。

  2. fly fly     Windows 10 /    Google Chrome

    你要不把评论特效的js发给我一起调用了

    1. 左岸 左岸     MacOS /    Google Chrome

      @fly已经发给你喽~

  3. fly fly     Windows 10 /    Google Chrome

    我已经调用你的了~23333

    1. 左岸 左岸     MacOS /    Google Chrome

      @fly看了下你网站已经起作用了@(滑稽)

  4. fly fly     Windows 10 /    Google Chrome

    我用你的行不行啊~@(笑眼)

    1. 左岸 左岸     MacOS /    Google Chrome

      @fly当然可以啊2333@(滑稽)

  5. 刘大喵 刘大喵     Windows 10 /    FireFox

    @(阴险)太黑了,在用户不知道的情况下偷偷加载

    1. 左岸 左岸     Android Pie /    Google Chrome

      @刘大喵@(你懂的)一切为了用户体验,况且流量损耗不大。

    2. 刘大喵 刘大喵     Windows 10 /    FireFox

      @左岸@(捂嘴笑)so..我转走了

    3. 左岸 左岸     Android Pie /    Google Chrome

      @刘大喵2333转吧!加个转载链接就好@(滑稽)

  6. funs funs     Android Oreo /    Google Chrome

    这个挺不错的,受教了

    1. 左岸 左岸     MacOS /    Google Chrome

      @funs推荐使用!::quyin:1huaji::

  7. 夏目贵志 夏目贵志     Windows 7 /    Google Chrome

    像我这样 10pv的 可以忽略不计 23333

    1. 左岸 左岸     Android Pie /    Google Chrome

      @夏目贵志大佬说笑了,宝塔的统计不太准应该。无奈这两天百度统计炸了,拿不出数据来。::quyin:die::

    2. 从良未遂 从良未遂     Windows 7 /    FireFox

      @夏目贵志打开你的博客发现css没有加载

    3. 左岸 左岸     Android Pie /    Google Chrome

      @从良未遂哈哈,他的博客就是这样的风格。