[预加载]一个能让网站速度提升100倍以上的方法

前言

前段时间用Typecho搭建了一个博客网站：盘先森，后来就一直在研究SEO，以及如何让网站提升访问速度。

除了加CDN和图片懒加载之外，偶然在其它网站看到了预加载的技术，于是也给我的网站加一个预加载，方便以后大家在访问的时候速度会快一些。

预加载

预加载是在网站在全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。

预加载效果图

经过测试，发现给网站加了预加载之后，网站提升速度有了飞跃的提升。

当用户的鼠标在页面的某一链接停放超过65ms时，网站会提前预加载该链接内容。

只加载html页面，用户点击链接后会秒开，接着才会加载图片、视频等资源，所以也不用太过于流量过度消耗的问题。

如何使用预加载

使用方法非常非常简单，就是直接在网站中引入js文件即可(</body>标签之前)。

<script src="`文件路径`/instantclick.js" type="module"></script>

1、大家可以新建一个instantclick.js的文件，然后复制源码到文件中，接着直接引用就可以了。

2、或者直接引用我的js文件：https://tencent.panzi666.com/js/instantclick.js。

<script src="https://tencent.panzi666.com/js/instantclick.js" type="module"></script>

预加载弊端

如果用户仅仅是把鼠标停留在链接上不进行点击该，也会预加载链接的内容。

无形当中增加网站后端的负担，如果网站加了CDN，无形当中就消耗CDN的流量了。

但只加载html页面，用户点击链接后会秒开，接着才会加载图片、视频等资源，所以也不用太过于流量过度消耗的问题。

如果大家的服务器没那么好，或者心疼你们的CDN流量，可以直接引用我的instantclick.js文件。

我的这个js文件已经放在腾讯云存储了，不用担心引入脚本的速度，哈哈哈~