Instant.page - 提高网站预加载的性能的方法

510 阅读2分钟

这个简短的教程讲述了instant.page tool ,如何提高网站页面性能。

Instant.page允许及时预加载/预取URL,这确实意味着在加载/点击URL之前加载URL。

预取网址是如何工作的?

网站有很多内部锚链接,用户点击它并导航到该页面。这是用户在网站上的通常行为。

有了Instant.page 工具,它可以在用户点击链接以及悬停链接之前,自动在后台预取URL。

在鼠标悬停链接和点击链接之间有一个时间差,在这个时间差中,这个工具在用户点击之前预加载锚点链接。这将提高实际点击发生后的性能。

重要说明

  • 预加载内部锚点链接
  • 适用于桌面和移动网站
  • 鼠标悬停时预装图片
  • 默认情况下,外部链接不会被预加载

优势

  • 开放源代码
  • 体积小,易于安装
  • 支持主要的浏览器
  • 减少页面加载,提高转化率
  • 在谷歌的SEO方面有更好的排名

你可以找到更多关于Instant.page的信息

安装

安装到你的网站是很简单的。

请将下面的脚本标签放在HTML页面的正文结束标签之前。

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

有些时候,在以下的使用情况下,页面的重新加载不是预先设定的,而是用instant.page加载的。

  • 从应用程序中注销
  • 删除或修改触发数据库API的操作
  • 外部链接

instant.page为锚点链接提供data-no-instant 属性,以忽略预取给定的链接。

这个工具预加载所有的内部链接,但是外部链接默认不预加载。

所以,首先,你必须在body标签中添加data-instant-allow-external-links 属性。接下来,在body标签内,将data-instant 添加到外部锚点链接。

Wordpress插件

WordPress用户可以配置插件来配置基于wordpress的网站。

插件可以找到(这里)[wordpress.org/plugins/ins…

浏览器扩展

它有Chrome插件,可以更快地加载URL预载

你可以在Chrome浏览器中下载和配置(这个)[chrome.google.com/webstore/de…]

浏览器支持

你必须使用 ,以便在某个浏览器中获得支持。如果浏览器支持预取选项,你可以使用这个工具。

总结

提高页面性能对网站的加载速度很有帮助,从而提高网站的转换率。它很简单,很容易与任何网站整合。