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

MENU

网站预加载JS脚本 instant.page

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

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

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

    1. 左岸 左岸     MacOS /    Google Chrome

      @shansan@(滑稽)

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

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

    1. 左岸 左岸     MacOS /    Google Chrome

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

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

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

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

    食用干货@(滑稽)

    1. 左岸 左岸     MacOS /    Google Chrome

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

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

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

    1. 左岸 左岸     MacOS /    Google Chrome

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

  6. Anjl Anjl     Windows 10 /    Google Chrome

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

    1. 左岸 左岸     Android Pie /    Google Chrome

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

  7. 头条 头条     Windows 7 /    Google Chrome

    文章不错支持一下吧

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

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

    1. 左岸 左岸     MacOS /    Google Chrome

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

  9. 熊猫小A 熊猫小A     Windows 10 /    Google Chrome

    这个和 instant click 的原理几乎是相同的,所以也有相同的问题:会把后端统计数据搞乱,包括阅读量统计,以及你文中的宝塔统计。
    针对这个问题 instant click 的方案是允许设置为按下鼠标时开始预加载,而不是悬浮时……但是这样效果就打了一些折扣了。

    1. 左岸 左岸     Android Pie /    Google Chrome

      @熊猫小A2333确实是,不过我是觉得阅读统计和PV统计这些无所谓,也不算个明显的缺点吧,利大于弊#(亲亲)

  10. 芸玖 芸玖     Windows 7 /    FireFox

    确实是个好东西,感觉速度快了不少,可惜我没有博客@(小乖)

    1. 左岸 左岸     MacOS /    Google Chrome

      @芸玖2333为什么不弄个个人博客呢,记录点东西#(亲亲)

    2. 芸玖 芸玖     Windows 7 /    FireFox

      @左岸懒。。。我看你们的就行啦::quyin:1huaji::

    3. 左岸 左岸     Android Pie /    Google Chrome

      @芸玖#(傻笑)