Instant-page.jpg

主理人说

优化网页加载速度的方法有很多种:

1.后端读取优化 - 使用数据库缓存(网页结构相对静态化)减少数据库读取,缩短TTFB时长;
2.本地缓存优化 - 延长静态资源过期时间,减少每次加载页面浏览器对服务器请求数(Request);
3.缩短物理距离 - 使用CDN,加速静态资源的全球访问;(CDN是什么?)
4.资源提前加载 - 使用 instantpage.js 在你点击网页前即开始加载网页(加载并放入浏览器缓存?),在你点击时加载已完成;

本文将就第 4 点做说明;

Instant.Page

Instant.page 使用即时预加载,在用户单击页面之前预加载页面。

项目官网:https://instant.page/
项目托管:https://github.com/instantpage/instant.page

部署 instantpage.js

1.下载 instantpage.js 文件或站外引用;

假设你的主题文件在进入你的主题文件在 /usr/themes/handsome/ ,下载 instantpage.js 到该目录;

$ cd /usr/themes/handsome/;
$ wget https://raw.githubusercontent.com/instantpage/instant.page/master/instantpage.js;

2.找到主题文件内的 footer.php ,本示例中该 footer.php/usr/themes/handsome/component下,将此HTML代码段放在</body>之前,打开 footer.php ,在</body>之前粘贴 <<script src="/usr/themes/handsome/instantpage.js" type="module"></script> 效果如下;

<<script src="/usr/themes/handsome/instantpage.js" type="module"></script>
</body>
</html>

如何查看是否生效

instantpage.js 网页预加载 - 加载优化 - 即时加载.png

1.打开 Chrome - 开发者工具,或其他带浏览器开发者工具,如上图;
2.鼠标移到任意文章链接,即可查看 instantpage.js 是否发起网页预加载行为
3.上图中红色框住部分,即代表该页面由 instantpage.js 发起;
4.以上;

FAQ

1.脚本配置完毕记得先清除CDN缓存;
2.使用无痕模式打开网站;
3.未生效问题可查看官方答疑:https://instant.page/blacklist

最后修改:2024 年 04 月 04 日 04 : 25 PM