MENU

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

March 21, 2020 • Read: 1060 • 教程

前言

前段时间用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文件已经放在腾讯云存储了,不用担心引入脚本的速度,哈哈哈~

Archives Tip
QR Code for this page
Tipping QR Code