网页预加载有什么用？Prefetch网页预加载技术

原文链接：https://www.chenweiliang.com/cwl-1053.html

文章目录

• 1 网页预加载是什么？
  • 1.1 Prefetch 网页预加载有什么用？
  • 1.2 Prefetch 预加载让网页加载更快
  • 1.3 网页加载慢怎么解决 ？
• 2 如何使用网页预加载技术？
  • 2.1 网页预加载JS脚本代码

网页加载速度，会影响到你建站好了后，在搜索引擎的SEO排名。

网页预加载是什么？

有一种称为prefetch的技术，这项技术实际上是一种预加载技术。

• 当用户有意访问页面时，浏览器对该网页进行预加载。


• 当用户实际点击链接时，用户会从预加载的缓存直接读取页面内容，并减少页面加载时间。


• 亚马逊和其他人发现100毫秒的延迟占销售额的1％，但网络上的延迟很难克服。

Prefetch 网页预加载有什么用？

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

• 在用户点击链接之前，他们将鼠标悬停在该链接上。


• 当用户徘徊65毫秒时，他们将有机会点击该链接，因此instant.page此时开始预加载，平均超过300毫秒，以便页面预加载。


• 在移动设备上，用户在释放之前开始触摸他们的显示器，平均花费90毫秒来预加载页面。

 

• 你也可以单击导航菜单进行体验。

Prefetch 预加载让网页加载更快

• 人类大脑即时感知行动时间不到100毫秒。


• 因此，instant.page预加载技术，能让你的网站即使在3G上也能感受到即时（假设你的网页呈现速度很快）。

网页加载慢怎么解决 ？

页面仅在用户很有可能访问它们时，预先加载，并且它仅预加载该页面的HTML，尊重用户和服务器的带宽和CPU。

• 它使用被动事件侦听器，以使你的页面保持平滑。


• 当用户启用数据保护时（从版本1.2.2开始），它不会预加载。


• 它是1 kB并且在其他所有内容之后加载。它是免费和开源的（麻省理工学院许可证）。

如何使用网页预加载技术？

实际上，html5的链接标记中有一个rel属性，其中一个是prefetch，但使用者的数量很小。

本文介绍的instant.page，就是一个使用此技术的脚本。

• 此脚本将根据用户鼠标悬停在链接上的时间来判断。


• 当它达到65毫秒时，用户有一半的机会打开链接，Instant.page会预加载此页面。

网页预加载JS脚本代码

1）官方提供带有Cloudflare加速的JS脚本 ▼

instant.page的使用非常简单，只需将以下代码，添加到你网站的</body>标签之前即可。

<script src="//instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>

2）自托管由陈沩亮提供 ▼

• 脚本放在云中，Instantclick-1.2.2.js，因此你不必担心放慢速度。 

请将以下代码，添加到你网站的</body>标签之前即可：

<script src="https://img.chenweiliang.com/javascript/instantclick-1.2.2.js" type="module"></script>

欢迎转载《网页预加载有什么用？Prefetch网页预加载技术》
陈沩亮版权所有，转载请注明出处链接：https://www.chenweiliang.com/cwl-1053.html


网站地址：https://www.chenweiliang.com/



欲学更多秘技，请关注微信公众号：cwlboke