整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
CSDN 编者按】谷歌通过官博发文称，在通过谷歌搜索和 Chrome 浏览器的通力合作，以及重磅引入 Core Web Vitals（CWV，网站性能指标）后，Chrome 浏览器给用户节省了 1 万年的等待时间，以及超过 12000 年的等待网页响应用户输入时间。
Chrome 作为时下主流浏览器，在 pc、移动端的市场占有率一直处于遥遥领先地位。近日，谷歌在 Chromium Blog 上表示，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一直在努力将后台标签页保持在用户的视线之外。在 Windows 11 上实施的后台标签页限制运行于 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 的 WordPress 6.2，WordPress 6.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%。
以上所列举的数据不仅仅只是数据变化，更多的是带来了用户体验的提升。
原文地址：https://blog.chromium.org/2023/11/how-core-web-vitals-saved-users-10000.html
T之家 9 月 28 日消息，谷歌 Chrome 106 正式版更新相比 105 变化没有那么大，但仍然包含一些有趣的功能，还弃用了一些功能。
在谷歌 Chrome 106 中弃用了三个功能。在 requestFileSystem () 方法中不推荐使用持久配额类型，因为给代码增加了不必要的复杂性，由于其使用率低，这尤其不受欢迎； HTTP / 2 推送流将遭受同样的命运，Chrome 将不再接收、存储在内存中或使用此配置发送的流；同样，Chrome 106 也放弃了对 cookie 域名属性中的非 ASCII 字符的支持，以符合 RFC 6265bis 规范中的最新标准化。
在新功能方面，Chrome 106 一项主要改进是支持 SerialPort 中的自带缓冲区 (BYOB)。谷歌描述如下：
“开发人员可以通过调用 getReader ({mode: 'byob'}) 来检测对 BYOB 读取器的支持，因为旧实现在传递新参数时会抛出 TypeError。BYOB（或“自带缓冲区”）读取器允许开发人员指定读取数据的缓冲区，而不是为每个块分配新缓冲区的流。除了潜在地降低内存压力之外，这还允许开发人员控制接收到的数据量，因为流返回的数据量不能超过提供的缓冲区中空间。从端口读取特定数量的数据能力使这个 API 对于习惯于针对串行设备的 Windows 和 POSIX API 进行编程的开发人员更加熟悉，这些 API 以同样的“自带缓冲区”原则运行。相比之下，当前的 API 要求开发人员针对多余的不需要的数据进行防御性编码，而不是只读取他们准备处理的内容。”
除此之外，无前缀 hyphenate-character 属性 CSS 属性现在很稳定，将随 Chrome 106 一起提供。“-webkit-hyphenate-character”属性将在稍后未指定的日期弃用。
Chrome 106 的另一个关键改进是支持 Intl.NumberFormat API v3 。此版本具有以下新功能：
添加 3 个新函数来格式化数字范围：formatRange / formatRangeToParts / selectRange
分组枚举
新的舍入 / 精度选项
舍入优先级
将字符串解释为小数
舍入模式
符号显示为负
此外，还为 WebCodecs 中的音频和视频接口引入了出队回调。它允许开发人员在编码和解码接口中找出队列大小是否减少，而不是设置定时函数来随机检查相同。
IT之家获悉，Chrome 106 现在支持 CSS“ic”长度单位。这用于表示日文和中文字体的“相对于水象形文字的高级度量”的长度，并且已经存在于 Safari 和 Firefox 中。展望未来，CORS 将通过 Signed HTTP Exchange 在子资源预取和加载中强制执行。
此版本的 Chrome 中也有一些实验性功能。有两个开发者试验被锁定在 flag 中。第一个是将文件系统访问 API 中的异步方法更新为同步方法。这将提高性能并为 API 带来一致性。其次，谷歌将继续其 UA 用户代理减少计划的第 5 阶段。这个想法是为了提高隐私，同时减少在解析复杂的 User-Agent 字符串时出错的机会。
同样，两项能力也已进入 Origin 试验阶段。匿名 iframe 提供了一种通过临时上下文在外部 iframe 中加载文档的方法。由于它是 Cross-Origin-Embedder-Policy (COEP) 的概括，因此消除支持 COEP 的第三方 iframe 作为嵌入到 COEP 页面的先决条件的要求。此试用将持续到 Chrome 108。
现在也通过 Origin 试用版提供弹出式 API，它允许开发人员在 Web 应用程序之上的交互式瞬态 UI 元素。这类似于“对话框”元素，但具有新功能，例如包括光标关闭行为、弹出交互管理、动画、事件支持和非模态模式。
接下来是 Chrome 107 浏览器，它将于 9 月 29 日进入 Beta 通道，并将于 10 月 25 日进入稳定版频道。
下将以Linux为例
一、Linux安装chrome
获取安装包
# wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm
安装依赖
# yum install -y lsb
# yum install -y libXScrnSaver
# yum install liberation-fonts
# yum install vulkan
本地安装
# yum localinstall google-chrome-stable_current_x86_64.rpm
命令执行完成以后可通过以下命令查看chrome的版本
# google-chrome -version
如果正常显示chrome版本号表示我们的chrome已经安装完成
二、生成图片和PDF文件
1、生成图片
#通过URL地址生成
google-chrome --headless --disable-gpu --screenshot=/data/app-server/google/2.png --window-size=630,1100 --hide-scrollbars --no-sandbox https://resource.xgjk.info/form/1660635773921_1973.html
#通过本地文件生成
google-chrome-stable --no-sandbox --headless --disable-gpu --screenshot=test.png -run-all-compositor-stages-before-draw --window-size=400,1200 /data/app-server/google/chufang.html
2、生成PDF
#通过URL地址生成
google-chrome --headless --disable-gpu --no-sandbox --print-to-pdf-no-header --print-to-pdf=/data/app-server/google/18.pdf https://resource.xgjk.info/form/1660635773921_1973.html
#通过本地文件生成
google-chrome --headless --disable-gpu --no-sandbox --print-to-pdf-no-header --print-to-pdf=/data/app-server/google/18.pdf /data/app-server/google/chufang.html
--screenshot 图片位置
--window-size 图片宽高
--print-to-pdf PF文件位置
*请认真填写需求信息，我们会在24小时内与您取得联系。
