网站系统-谷歌放豪言:Chrome 浏览器给用户节约了1万年的网页等待时间

Chrome 作为时下干流阅读器,在 pc、移动端的市场占有率一向处于遥遥领先地位。近日,谷歌在 ChromiumBlog上表明,Chromium团队在引进Core Web Vitals(CWV,网站功用目标)体会优化之后,Chrome 阅读器(桌面版和 Android 版)现已为用户节省了一万年的网页加载时刻。
图片
图源:statcounter
谷歌在文章中介绍了 CWV 目标改进的布景、优化办法进而进步用户体会,网站系统,让网页加载变得更快的同时,开发者生态体系也在尽力改进网页功用。以下是对原文的编译。
2020年,谷歌引进了 Web Vitals 根本质量信号,旨在保证更好的用户体会。如今,有40% 的网站经过了所有的中心网络目标,网页加载的和呼应交互都变得更加快速。借此,本文将详细记录这次功用优化旅程以及在阅读器和生态体系中完成这些成果所做的具体作业。
Chrome 对速度的追求
高效快速地供给信息和服务一向是谷歌业务的中心,也是 Chrome 团队的作业动力。长期以来,他们注意到,即便网站在一段时刻之内改进了功用,但随着时刻的推移,功用会随之下降,即便Chrome 查找速度再快,当页面加载缓慢时,用户体会也会受到影响。
已然无法帮助这些网站进步功用,那该如何进步用户体会呢?为此,谷歌查找团队和Chrome 团队展开协作,合力解决网页功用、加载等诸多用户体会问题。
界说快速网络
他们检查了数百万个网页之后,给那些快速、用户友爱的网页界说了一个公共规范(开始发布在《Web Vitals 背面的科学》),并将规范和数据发布到开放的生态体系获取一些反馈。其次,他们还引进了中心网络目标(CWV),比如具有突破性目标的最大内容制作(LCP),进而可以检查用户在某个网页的停留时长。
2021年8月,谷歌更新了查找排名算法,这里边考虑了是否满意 CWV 所确认的速度和可用性规范等要素。
小改变带来的大进步
在引进 CWV 等目标及调整后,Chrome 的均匀页面加载速度快了166毫秒。到目前为止,该项目已为用户节省了超过10000年的网页等候加载时刻,以及超过12000年的等候网页呼应用户输入时刻。而且,网络的速度还在不断进步。在跟踪了符合 CWV 的导航次数改进后,他们得到了最新的数据是,移动端为64.45%(比原来64% 高了一点)桌面端68.39%(原来是67%)。Chrome 数据团队猜测年底的经过率会达到约69%。
图片
多项优化办法
后退/行进缓存(bfcache)旨在经过启用即时的后退和行进导航来改进阅读体会。BFCache 的命中率在 Android(3.6%)和桌面(1.8%)上逐月进步。
另一个具有特别影响的优化示例是PreconnectOnAnchorInteraction 功用,它在指针按下而不是指针抬起时衔接到来历。这个完全推出的功用在 Android/桌面上使中位数 LCP 改进了6/10毫秒(0.4/1%),而且跨源 LCP 在 Android 和桌面上改进了约60毫秒。该功用的推出还导致内容广告收入增加了0.08%,凸显了功用优化对用户参与度和生态体系健康的严重影响。
预烘托功用,经过在用户实际访问之前对页面进行烘托,使页面可以当即加载。经过在地址栏直接输入 URL 加载页面时进行预烘托,依据平台不同,中位数 LCP 可以进步500-700毫秒(14-25%),大局中位数 LCP 在所有导航中进步了6.4毫秒。他们目前正在推出由地址栏发起的查找的预烘托功用。
Chrome一向在尽力将后台标签页保持在用户的视野之外。在 Windows11上实施的后台标签页约束运转于 EcoQOS,以及在 macOS 上的使命人物和 QoS 调整,现已改进了最大内容制作(LCP)和与下一次制作的交互(INP)。
Web 现代化可以运转各种类型的应用程序,这也需要管理这种作业负荷。他们一向在优化多个活动标签页下的 Chrome,而且很高兴地陈述,在曩昔6个月中经过调度和争用的改进,INP 进步了5%,LCP 进步了2%。
在2022年,他们还对 Chrome 的页面加载代码进行了有针对性的改进。这导致 Android 上的 LCP 进步了10%,CWV 经过率进步了1.5%。
Chrome的烘托器也进行了一些改进。烘托器的主线程包含 JavaScript、烘托和图像加载的使命队列。一些改变优化了这些使命的优先级,以完成最佳的CWV,这些改进包含:高优先级的图像加载、推迟后优先合成、SVG 栅格优化。
图片
Chrome 优先加载 HTML 中解析的前五个图像的示例。这将 LCP 从3.1秒改进到了2.5秒。
对生态的影响
博客中列举了CWV对给网站生态带来的变化,其中最重要的成果是驱动超三分之一的内容管理体系WordPress的功用改进,对比根据 LCP的 WordPress6.2,WordPress6.3的主题加载速度进步了27%,经典主题加载速度进步了18% 。
图片
经过 CWV 三项中心目标(LCP、FID、CLS)并获得“杰出”体会的 Web 占比
在 JavaScript 框架上,Chrome Aurora 与 Next.js、Angular 和 Nuxt 合作发布根据功用为要点的功用,如 next/script 组件、NgOptimizedImage 和nuxt/google-fonts。在2022年,Next.js 的经过率从20.4% 进步到27.3%,Angular 的经过率从7.6% 进步到13.2%,Nuxt 的经过率从15.8% 进步到20.2%。
在商业方面,功用优化带来了明显的增加。例如,RedBus 改进了 INP,并观察到转化率增加了7%。Economic Times 改进了 INP,页面阅读量增加了42%,跳出率减少了49%。Meesho 成功将 LCP 从6.9秒降低到2.5秒,跳出率减少了16.6%,转化率增加了3%。
以上所列举的数据不仅仅只是数据变化,更多的是带来了用户体会的进步。