Typecho 预加载提升网站访问速度

2023 年 05 月 15 日

3030 次浏览

977字数

> 本站近四年运行在阿里云1H1G的轻量服务器上，整站共计1GB多，也没挂CND，使用后效果明显提升

Instant.page是一个免费的开源库，它使用即时预加载，这意味着它会在用户点击页面之前预加载页面。仅当用户很有可能访问页面时才会预加载页面，并且仅预加载HTML，尊重您的用户和服务器的带宽和CPU。它使用被动事件侦听器，以便您的页面保持流畅，并且在用户启用数据保护程序时不会预加载。

### 原理

其实简单来说，就是当用户鼠标悬停在站内链接上超过65ms时，他们就有点开该链接的概率，因此instant.page就进行预加载，然后用户访问该页面时浏览器就是从cache里面读取，因此加快了页面打开速度。

**PC端：** 当用户的鼠标在链接上悬停了65毫秒时，这个脚本开始预加载页面；还有一种就是在用户开始按下鼠标时 ，开始预加载页面。

**移动端：** 用户在滑动屏幕时，链接可见时，就开始预加载。

仅当用户很有可能会访问页面时才预加载页面，并且只会预加载 html 页面，不会加载图片等资源，所以不用担心与流量损耗等问题。
instant.page 是渐进式增强 - 对不支持它的浏览器没有影响。

官网地址：[https://instant.page](https://instant.page/)
GitHub 地址：[https://github.com/instantpage/instant.page](https://github.com/instantpage/instant.page)

### typecho 调用方法

#### 引用官方JS

在你网站的`</body>` 标签前添加：

```
<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>
```

使用此脚本后浏览数据增加，因为预加载会被统计成正常浏览次数。

### 注意事项

引入代码必须放置在`</body>`前面，而不是`<head></head>`中，否则会因为页面没有完全加载完毕，而导致instant.page无法使用

instant.page 是渐进式增强 - 对不支持它的浏览器没有影响。
instant.page只会预加载自己的站内链接，而不会预加载其他外链。

参考：[黑桃三](https://heitaosan.com/article/121)

最后修改：2023 年 05 月 15 日