怎么通过instant.page即时页面预加载提升网站访问速度

作弊延迟

Instant.page 使用即时预加载——它在用户点击页面之前预加载页面。

在PC端

在用户点击链接之前，他们将鼠标悬停在该链接上。当用户悬停 65 毫秒时，有二分之一的机会点击该链接，因此 instant.page 此时开始预加载，页面预加载平均超过 300 毫秒。

另一种选择是在用户开始按下鼠标而不预加载时加载页面。这使得未使用的请求为零，同时仍将页面加载平均提高了 80 毫秒。

您还可以在悬停时或在链接可见时立即预加载，并在用户开始按下鼠标时触发点击，从而使您的页面成为世界上最快的页面。

在手机端

用户在释放之前开始触摸他们的显示器，平均留出90 毫秒让页面预加载。

另一种选择是在链接可见时立即预加载链接。

人脑将不到 100 毫秒的动作视为瞬间。因此，instant.page 让您的页面即使在 3G 上也感觉即时（假设您的页面渲染速度很快）。

仅当用户很有可能访问页面时才会预加载页面，并且仅预加载 HTML ，尊重您的用户和服务器的带宽和 CPU。

它使用被动事件侦听器和 requestIdleCallback 以使您的页面保持流畅。它尊重数据保护模式。它是 1 kB并在其他所有内容之后加载。它是免费和开源的。

立即通过instant.page即时页面预加载提升网站访问速度：

将这段 HTML 片段放在 < / body> 之前：

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

但是此脚本是官方（https://instant.page/）的，储存在国外服务器，对国内访问不太友好，李海博客建议大家使用bootcdn加速：

将这段 HTML 片段放在 < / body> 之前：

<script type="module" src="https://cdn.bootcss.com/instant.page/3.0.0/instantpage.js"></script>

如果不喜欢用bootcdn，可以将该JS脚本储存到自己的服务器上，然后再根据以下格式在</ body> 之前引用：

<script type="module" src="存放路径"></script>