柚子素材 - www.yozsc.com上线啦!!!

MENU

网站预加载JS脚本 instant.page

March 27, 2019 • Read: 4652 • 网站优化

  • 本篇文章介绍了一个网站预加载的脚本 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

已有 59 条评论
  1. 崔先森 崔先森     Windows XP /    Google Chrome

    只加载html?这不自己自定义格式就....@(不高兴)

    1. 左岸 左岸     Android Pie /    Google Chrome

      @崔先森预加载html就可以保证页面秒开@(你懂的),自定义格式有啥用呀#(皱眉)

  2. 爱MM图 爱MM图     MacOS /    Google Chrome

    来看看,学习学习

    1. 左岸 左岸     Android Pie /    Google Chrome

      @爱MM图::quyin:1huaji::

  3. 七越 七越     Android Oreo /    Google Chrome

    只会copy告辞::quyin:hematemesis::

    1. 左岸 左岸     Android Pie /    Google Chrome

      @七越2333,复制粘贴大法最好用了@(滑稽)

  4. 一起微笑 一起微笑     Windows 7 /    Google Chrome

    似乎没啥效果

    1. 左岸 左岸     MacOS /    Google Chrome

      @一起微笑可以审查元素,看一下Network末尾,鼠标悬停时有没有加载html

  5. 灰常记忆 灰常记忆     Android Oreo /    Google Chrome

    这个可以试试

    1. 左岸 左岸     MacOS /    Google Chrome

      @灰常记忆你的ip在美国哎,应该不愁流量、请求次数啥的。预加载对这种ping高的网站提升更明显,非常推荐使用!

    2. 灰常记忆 灰常记忆     Android Oreo /    Google Chrome

      @左岸我用的是美国的机器,流量2T就两个站,简直浪费…… 现在我用的主题自带ajax,等换了主题就可以用上这个。

    3. 左岸 左岸     MacOS /    Google Chrome

      @灰常记忆流量很多233,可以试试哦@(吐舌),换个风格也不错,我也前些日子刚换了模板@(笑眼)

  6. 离黍的信 离黍的信     Windows 7 /    Google Chrome

    有空试试

    1. 左岸 左岸     MacOS /    Google Chrome

      @离黍的信好啊,效果很不错的@(你懂的)

  7. 青山 青山     Windows 7 /    Google Chrome

    你别删你文件哈,用你的了。
    我自己建个文件打开显示乱码

    1. 左岸 左岸     MacOS /    Google Chrome

      @青山不会删的@(滑稽)
      脚本放在又拍云,不用担心拖慢速度

    2. 崔先森 崔先森     Windows XP /    Google Chrome

      @青山@(你懂的)显示乱码的理由不成立,换一个@(捂嘴笑)

  8. Lesun Lesun     Windows 10 /    Google Chrome

    访问速度确实很不错,不知道是不是因为这个代码的原因。。可能服务器占主要原因吧@(哈哈)

    1. 左岸 左岸     MacOS /    Google Chrome

      @Lesun站内访问的话,脚本起大作用了。图片加载速度是CDN和优化的功劳@(笑眼)

  9. 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好高,最近咋了这是#(小眼睛),之前还挺快的。

  10. fly fly     Windows 10 /    Google Chrome

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

    1. 左岸 左岸     MacOS /    Google Chrome

      @fly已经发给你喽~