教程-使用js脚本预加载为网站提高访问速度

发布于 2020-05-07  2,335 次阅读


这是一个很简单很玄学的js脚本,可以让你的网站加载更快,根据我目前的测试效果来看确实比较理想,原理就是通过捕捉鼠标悬浮的链接进行 预加载(几乎所有网站都能正常使用) 。脚本加速指站内加速,但只会预加载html页面,不会加载图片等资源,所以完全不用担心与流量损耗等问题。

教程-使用js脚本预加载为网站提高访问速度插图

预加载

资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。

instant.page 使用即时预加载技术,在用户点击之前预先加载页面。当用户的鼠标悬停在一个链接上超过 65 毫秒时,浏览器会对此页面进行预加载,当用户点击链接后,就从预加载的缓存中直接读取页面内容,从而达到缩短页面加载时间的目的。

调用方法

在/body 前添加:

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

WordPress调用方法,把 js 文件 instantpage.js 上传到主题的 JS 目录下,然后在主题 footer.php 中 /body 前添加即可:

<script src="<?php echo get_template_directory_uri(); ?>/js/instantpage.js" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>

也可以直接使用我的,使用 jsDeliver CDN 加速,速度还可以:

<script src="https://cdn.jsdelivr.net/gh/tperch/jsd/instantclick-1.2.2.js" type="module"></script>

使用此脚本后我发现统计数据不对了,因为预加载会被统计成正常浏览次数,也算是个 BUG 吧,对于强迫症来说,这不能忍!!!

然后就找到了另一个脚本:InstantClick
官网地址:instantclick.io
GitHub地址:https://github.com/dieulot/instantclick/

这个脚本通过鼠标的click来预加载,效果虽然略弱于instant.page,但统计总算正常了。


这是励志成为一个优秀产品经理的的学生的奋斗笔记。