本篇文章介绍了一个网站预加载的脚本 instant.page
作用是可以预加载用户想访问的页面,当用户真正点击链接后,就会直接从缓存中读取,以此提升网站的访问速度。
原理介绍及作用
在逛夏目友人帐的网站时无意间看到这样一个脚本,号称可以瞬间提高网站页面加载速度。我一直对网站加载速度的优化很感兴趣,于是便立即拿来试试,效果果然如他说的那样不错。
instant.page原理的话我们不必深层了解,只需知道:在用户点击网站链接之前,他们将鼠标悬停在该链接上。当用户徘徊65毫秒时,他们将点击该链接有两个机会,因此instant.page此时开始预加载,平均超过300毫秒,以便页面预加载。
instant.page是渐进式增强 - 对不支持它的浏览器没有影响。
效果演示
经过我的测试,发现以下几点:instant.page对站内访问速度的提升的确很给力。然而它只会预加载自己的站内链接,而不会预加载其他外链。
如图所示,当鼠标在左侧文章链接悬停超过65ms后,右侧Network即会对文章页面进行预加载。而悬停未超过65ms时,则不会进行预加载(红色部分)
使用instant.page会显著增加自己的网站的PV以及请求量。
如图所示(数据仅供参考),在我3月25日凌晨使用了instant.page脚本之后,PV和请求量几乎是成倍的增长。(对于使用CDN全站加速的童鞋可能要多考虑一下了,因为请求数也是要收费的。)
使用instant.page只会预加载html页面,而不会加载图片等资源。(可以看到上图,并没有太多的流量损耗)因此点击预加载的页面是秒开的,图片在点击之后才会加载,不用担心与lazyload的各种不兼容问题。
食用方法
一. 使用官方提供的带有Cloudflare加速的脚本
建议服务器在国外的朋友使用。只要把这行代码添加到网站的