slow-loading-website-1.jpg

说明

有一项技术叫做prefetch，这个技术，其实说白了，就是一项预加载技术，当用户有意向访问某个页面之前，浏览器首先对此页面进行预加载，当用户真正点击链接后，会从预加载的缓存中直接读取页面内容，缩短页面的加载时间。

而如何来使用这项技术？其实在html5的链接标签中有一个rel属性，其中有个参数就是prefetch，不过使用的人不多。

本文介绍的instant.page，就是使用这项技术的一个脚本，脚本会根据用户鼠标在链接上的停留时间进行判断，当达到65毫秒，用户有一半的机会打开此链接，instant.page将会对此页面进行预加载。

使用

1、使用官方提供的带有Cloudflare加速的脚本

instant.page的使用非常简单，首先打开官网：https://instant.page，会看到一个非常简洁的页面，并得到一行代码：

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

只需要把这行代码添加到网站的 </body> 之前即可。

2、自托管

由于官方的JS脚本是存储在国外的，所以建议各位直接将脚本保存到本地进行加载，缩短脚本载入的时间。只需下载js文件并上传到自己服务器 —> 本站下载

然后在</body>标签之前根据路径添加下面的代码即可。

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

相关推荐

  1. Fontmin：简单易用的字体压缩方案！
  2. 代码适配与自适应网站，谁更利于SEO？
  3. 现代 Javascript 教程 – 零基础学习 JavaScript 开源教程
  4. 被恶意镜像了怎么办？网站防镜像的几大招数
  5. typecho复制文章自带版权信息
  6. 给typecho站点文章添加更多HTML标签支持
文章作者：喵斯基部落
原文地址：https://www.moewah.com/archives/1675.html
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。非商业转载及引用请注明出处（作者、原文链接），商业转载请联系作者获得授权。