Instant.page是一个免费的开源库,它使用即时预加载,这意味着它会在用户点击页面之前预加载页面。仅当用户很有可能访问页面时才会预加载页面,并且仅预加载HTML,尊重您的用户和服务器的带宽和CPU。它使用被动事件侦听器,以便您的页面保持流畅,并且在用户启用数据保护程序时不会预加载。
即时页面功能可让您在用户将鼠标悬停在链接上后在后台自动预取URL。这导致几乎瞬时的加载时间,并改善了用户体验和感知性能(网站感觉有多快)。我们利用Alexandre Dieulot开发的Instant.page库。
预取的工作原理
就服务器和移动设备的性能提升和低利用率而言,以上是最佳组合。该功能尊重您的移动设备(Android、iPhone)是否启用了数据保护程序或低数据模式。如果打开,则不会预加载任何内容。
由于此功能适用于鼠标悬停,因此不会显示在速度测试工具上。但我们鼓励您在启用后点击您的网站。你应该能感觉到不同!
亚马逊和其他公司发现,消除100毫秒的延迟可以提高1%的销售额。但是网络上的延迟很难克服。
Instant.page使用即时预加载——它在用户点击页面之前预加载页面。
(1)桌面端
在用户点击链接之前,他们将鼠标悬停在该链接上。当用户悬停65毫秒时,有二分之一的机会点击该链接,因此instant.page此时开始预加载,页面预加载平均超过300毫秒。
另一种选择是在用户开始按下鼠标而不预加载时加载页面。这使得未使用的请求为零,同时仍将页面加载平均提高了80毫秒。
您还可以在悬停时或在链接可见时立即预加载,并在用户开始按下鼠标时触发点击,从而使您的页面成为世界上最快的页面。
(2)移动端
用户在释放之前开始触摸他们的显示器,平均留出90毫秒让页面预加载。
另一种选择是在链接可见时立即预加载链接。
欺骗大脑
人脑将不到100毫秒的动作视为瞬间。因此,instant.page让您的页面即使在3G上也感觉即时(假设您的页面渲染速度很快)。
轻松使用您的服务器和用户的数据计划
仅当用户很有可能访问页面时才会预加载页面,并且仅预加载HTML ,尊重您的用户和服务器的带宽和CPU。
它使用被动事件侦听器和requestIdleCallback以使您的页面保持流畅。它尊重数据保护模式。它是1kB并在其他所有内容之后加载。它是免费和开源的(MIT许可证)。
具有数据属性的附加选项
您可以使用以下data-instant
属性启用即时页面的其他选项。只需将这些属性中的任何一个添加到文档中的标记,剩下的就交给我们了。
您可以在instant.page了解更多关于这些不同属性的作用。有关将其中一些属性添加到标记的一些方法,请参见下文。
data-instant-allow-query-string data-instant-allow-external-links data-instant-whitelist data-instant-intensity="mousedown" data-instant-intensity="mousedown-only" data-instant-intensity="150" data-instant-intensity="viewport" data-instant-intensity="viewport-all" data-instant-mousedown-shortcut
页面加载后添加JavaScript
第一种方法是在页面加载结束时触发JavaScript。可以将以下代码添加到WPTurbo中的页脚代码框中。
假设您想更改脚本在预加载前等待多长时间(以毫秒为单位)的数据强度时间。您可以像这样添加它:
document.body.setAttribute('data-instant-intensity', '150');
一次只能使用一个data-instant-intensity
属性,但您可以将其与其他属性混合搭配。因此,例如,这将起作用:
document.body.setAttribute('data-instant-intensity', '150'); document.body.setAttribute('data-instant-allow-external-links', 'true');
注意:上述方法会向您的站点添加一个额外的请求。
与body标签合并
第二种方法是在呈现页面时合并现有body标记中的属性。这不需要额外的请求。可以将以下代码添加到 WPTurbo 中的页脚代码框中。这是一个例子:
预加载时间设置
默认情况下,instant.page在悬停链接后以及移动用户开始触摸其显示屏时预加载65毫秒。还有其他选择。
按下鼠标时预加载
要在用户开始按下鼠标按钮时加载页面,在释放它之前,将其data-instant-intensity="mousedown"
作为属性添加到。
页面预加载平均需要80毫秒。
要在桌面上以这种方式使用而不是在移动设备上预加载,请使用data-instant-intensity="mousedown-only"
.
调整悬停延迟
对于一些具有大量点击目标的网站,例如一些电子商务网站,65毫秒规则不适用:它会为每个访问的页面预加载两次以上。
要增加悬停延迟,请在属性中传递毫秒数,例如150ms: data-instant-intensity="150"
。
或者,如果您不关心提出很多请求,则可以减少它。
在链接可见后立即预加载链接
在小型移动设备(例如智能手机)上,如果您希望您的页面在更多情况下是即时的,您可以在链接可见时立即预加载它们。
为此,请将data-instant-intensity="viewport"
其作为属性添加到。
"viewport-all"
如果您不担心发出大量请求,您也可以使用 来在其他外形尺寸上执行此操作。
请注意,如果用户使用2G或启用了数据保护程序,它将回退到使用默认选项。
按下鼠标时触发点击
如果您想更快地触发点击,请将data-instant-mousedown-shortcut
其作为属性添加到。请注意,这可能与现有脚本冲突。
(此功能从v5.1开始是可选的,在5.0中默认启用,您需要使用data-instant-no-mousedown-shortcut
它来禁用它。)
未预加载的页面
默认情况下,不会预加载URL中带有查询字符串(“?”)的页面,因为它们有时会触发操作(例如注销或删除某些内容)。
使用查询字符串将页面列入白名单
如果您想让所有带有查询字符串的页面都被预加载,data-instant-allow-query-string
请在中添加一个属性。
如果您只想允许预加载带有查询字符串的选择链接,请为其添加一个data-instant
属性:
Page 2
黑名单页面
要手动将触发操作的链接列入黑名单,data-no-instant
请为其添加属性:
Log out
这主要在您使用时使用data-instant-allow-query-string
,否则默认情况下带有查询字符串的链接已经被列入黑名单。
外部链接
默认情况下不预加载外部链接,以允许它们都data-instant-allow-external-links
向添加属性。
要仅允许某些外部链接,data-instant
请为其添加属性。
仅预加载部分链接(白名单模式)
如果您只想预加载特定链接,data-instant-whitelist
请在中添加a并通过向链接添加data-instant
属性来标记要预加载的链接。
内容拦截器
出于可疑的原因,预取被某些内容拦截器(例如uBlock Origin)视为侵犯隐私。请务必在您的网站上禁用内容拦截器以查看正在发出的预加载请求。
Firefox中的uBlock Origin完全禁用预取;如果您使用它,您需要暂时完全禁用扩展程序,而不仅仅是为您的站点关闭它。
这只会影响使用EasyPrivacy列表的内容拦截器的用户。它适用于AdBlock;而uBlock Origin的用户是少数。如果您想让instant.page为您网站上具有隐私内容拦截器的用户工作,您可以自行托管该脚本。
技术细节
使用 <link href=”url “> 完成预加载。
源代码有200行可读。
浏览器支持
Instant.page是渐进式增强——对不支持它的浏览器没有影响。
Chrome和基于Chromium的浏览器从61版(2017年9月发布)开始全面支持。
Firefox支持(从2006年开始!),但如果页面没有被缓存(这是一个开放的错误),它将重新下载页面。
不兼容的浏览器
Safari 13.0支持 但默认禁用。希望它将在2020年9月在Safari 14.0中启用。
UC浏览器不支持模块,因为它基于Chromium 57。基于Chromium 69的支持模块的新版本于2018年10月宣布,但尚未发布。
安全CDN
Instant.page的脚本由Cloudflare Workers托管,因此没有服务器可以入侵。
此外,它使用子资源完整性让现代浏览器验证文件未被篡改。它作为一个模块加载,因此大多数旧浏览器不会执行它。
自托管
也可以自己托管脚本。下载最新版本,然后在之前添加一个模块脚本标签:
你也可以通过npm安装它:
npm i instant.page
历史
在hover和touchstart上预加载网页的想法来自我的一个旧库InstantClick,它于2014年1月推出,它使用Ajax和history.pushState而不是,将网站转换为单一的页面应用。它使网站更加流畅,但需要额外的工作。
不幸的是,InstantClick主要只是一个概念证明,因为它没有很好的文档。
Google在2018年12月发布的quicklink会在链接显示后立即预加载带有的链接,这清楚地表明我应该专注于构建一个“精简”、更易于使用的InstantClick版本,即Instant.page,于2019年2月推出。
未来相关项目
InstantClick提供了最流畅的体验,同时仍然不需要像框架一样多的工作(提供较少的结果),所以我正在考虑在2020年晚些时候再次开发它。它将重命名为“instant.page extra”。
内容没看懂? 不太想学习?想快速解决? 有偿解决: 联系专家
阿里云企业补贴进行中: 马上申请
腾讯云限时活动1折起,即将结束: 马上收藏
同尘科技为腾讯云授权服务中心。
购买腾讯云产品享受折上折,更有现金返利:同意关联,立享优惠
本文来自投稿,不代表新手站长_郑州云淘科技有限公司立场,如若转载,请注明出处:http://www.cnzhanzhang.com/6825.html