这个简短的教程讲述了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…]
浏览器支持
你必须使用 ,以便在某个浏览器中获得支持。如果浏览器支持预取选项,你可以使用这个工具。
总结
提高页面性能对网站的加载速度很有帮助,从而提高网站的转换率。它很简单,很容易与任何网站整合。