随着 Core Web Vitals 的重要性日益增强，网站所有者和开发者越来越关注性能和关键用户体验。Google 提供了许多工具来帮助评估、优化和监控网页，但不同的数据源和有效使用方式往往会让用户感到困惑。本指南提出了一种将多种工具相结合的工作流程，并阐明了这些工具在开发过程中的意义和方式。

了解 2025 年 2 月与基准相关的各种活动。

ruby-align 现已纳入 Baseline

发布时间：2025 年 2 月 20 日 可靠地下载大型 AI 模型是一项具有挑战性的任务。如果用户的互联网连接中断或关闭您的网站或 Web 应用，他们会丢失部分下载的模型文件，并且在返回您的网页后必须重新开始。通过将 Background Fetch API 用作渐进式增强功能，您可以显著提升用户体验。 Browser Support Source Background Fetch API 要求您的应用 注册服务工件 。

了解 rel=prefetch 资源提示及其用法。

了解如何识别和解决布局偏移。

Cumulative Layout Shift (CLS) 是一项指标，用于量化用户遇到网页内容突然偏移的频率。在本指南中，我们将介绍如何优化导致 CLS 的常见原因，例如没有尺寸或动态内容的图片和 iframe。

CSS scrollbar-color 和 scrollbar-gutter 已在所有主流浏览器引擎中推出，因此已成为“新推出的 Baseline”功能。

这是 Baseline 月度摘要的第一期，涵盖了 2025 年 1 月 Google 和 Web 开发者社区的 Baseline 动态。

WebAssembly 垃圾回收和 Wasm 尾调用优化现已在所有主流浏览器引擎中推出，因此它们已成为新的基础配置。

这篇博文介绍了 Largest Contentful Paint (LCP) 指标并说明了如何测量该指标

Promise.try 现已在所有主流浏览器引擎中推出，成为了新推出的 Baseline 功能。

简短说明

发布时间：2024 年 1 月 13 日 您可以使用 AI、传统机器学习模型和较新的大语言模型 (LLM) 构建许多令人惊叹的项目。借助 LLM，计算机可以生成新内容、撰写摘要、分析文本的情感等。在过去几年里，人们有机会使用 Gemini 和 ChatGPT 等应用，这些应用使用先进的自然语言处理 (NLP) 技术与用户进行对话。 Google 开发者专家 Christian Liebel 撰写了一篇文章，介绍了如何使用 LLM 向网站或 Web 应用添加聊天机器人。 在本系列中，您将：

发布时间：2024 年 1 月 13 日 本文是关于 LLM 和聊天机器人的三篇系列文章中的第一篇。第 2 部分介绍了如何 使用 WebLLM 构建聊天机器人 ，第 3 部分介绍了如何 使用 Prompt API 。 大语言模型 (LLM) 正成为软件开发中的重要构建块：LLM 非常适合生成和处理自然语言文本，可实现数据提取、总结等应用场景，或协助与用户数据进行对话。 在本系列文章中，我将介绍设备端 LLM 的优点和缺点，并引导您使用两种本地和离线方式（基于 Web 的 LLM 运行时

有人告诉你不要阻塞主线程并拆分长任务，但执行这些任务意味着什么呢？

借助 CSS 遮罩，您可以选择将图片用作遮罩层。这意味着，您可以使用图片、SVG 或渐变作为遮罩，在不使用图片编辑器的情况下制作有趣的效果。

web-features 数据集、Web 平台状态信息中心、基准状态微件等！回顾一下 2024 年的基准。

本文介绍了延迟加载以及您可以用于延迟加载视频的选项。

模块预加载提供了一种以声明方式提前加载 JavaScript 模块的方法。

为了优化用户体验，了解用户如何与您的表单互动至关重要。浏览器自动填充功能在此过程中发挥着重要作用。了解如何收集和分析有关用户如何在表单中使用自动填充功能的数据。

毒性内容检测功能可保护您的用户，并营造更安全的在线环境。在第 2 部分，我们将学习如何构建客户端 AI 工具，以便在源头检测和减少毒性内容。

本文介绍了总阻塞时间 (TBT) 指标，并说明了如何衡量该指标

了解如何在真实环境和实验室环境中衡量网站的 Web Vitals。

关于如何分解 LCP 并确定有待改进的关键方面的分步指南。

衡量网站是否运行正常的基本指标

以下是 Chrome 确定的一系列最佳实践，它们是优化网站性能和提升 Core Web Vitals 的最大机遇

CSS content-visibility 属性现已面向 Baseline Newly 提供。

核心网页指标阈值背后的研究和方法

您浏览了现场数据，发现存在一些缓慢的互动。下一步是详细了解如何手动测试这些互动，并找出这些互动背后的原因。

本文介绍了 Baseline 的起源故事、Google 的参与以及 WebDX 社区小组的所有权。

了解如何优化网页，让用户在使用浏览器的后退和前进按钮时能够即时加载。

CSS 嵌套功能得到了大幅改进！

此博文介绍了 First Input Delay (FID) 指标，并说明了如何衡量该指标

了解如何使用调试信息对性能数据进行归因，以帮助您通过数据分析发现和修复真实用户的问题

@property 对 CSS 的性能有何影响？

了解如何利用 Google 工具将 Core Web Vitals 与广告收入关联起来。

在浏览器中存储数据有多种选择。哪种方式最符合您的需求？

这篇博文将介绍加载属性以及如何使用该属性来控制 iframe 的加载。

了解构建多个 PWA 重复使用同一域名的推荐和不推荐方法及其优缺点。

分步互动式教程，介绍如何构建服务器以管理推送通知订阅并将 Web 推送协议请求发送到推送服务。

优秀或出色的渐进式 Web 应用有何特点？

渐进式 Web 应用可安装性标准。

为 PWA 更改 Web 应用清单中的图标、快捷方式、颜色和其他元数据所需的操作。

Web 应用清单是一个简单的 JSON 文件，用于告知浏览器您的 Web 应用应采取的行为。

了解如何基于脚本 Nonce 或哈希部署 CSP，以深度防范跨站脚本攻击。

本文可帮助 Web 开发者根据给定设备选择合适的硬件 API。

了解如何使用相关源请求 (Related Origin Request)，以允许在您的各个网站上重复使用通行密钥。

此博文将介绍加载属性以及如何使用该属性来控制图片的加载。

为了在您的网站上投放经过优化的图片，首先要选择适当的图片格式。此帖子可帮助您做出正确的选择。

利用自定义指标，您可以衡量和优化您的网站为网站带来的独特体验。

了解如何将 Web Vitals 数据发送到 Google Analytics 4 媒体资源，以及如何导出此类数据以便在 BigQuery 和 Looker Studio 中进行分析。

本指南概述了网站在请求用户授予敏感功能（例如摄像头、麦克风和位置信息）的使用权限时应遵循的最佳做法，以最大限度减少不必要的提示和禁止访问。

了解 Cookie 通知对性能、效果衡量和用户体验有何影响。

网络开发者可以使用 Media Session API 自定义媒体通知并响应媒体相关事件，例如跳转或轨道变化。

要在实验室中重现缓慢的互动问题，以优化网站的 Interaction to Next Paint，您需要依靠现场数据来找到它们。本指南介绍了如何执行此操作。

使用 tabindex 属性明确设置元素的标签页位置。

这篇博文介绍了 Time to First Byte (TTFB) 指标，并说明了如何对其进行测量。

了解如何调整提示，以便在不同的 LLM、模型和模型大小中实现首选结果。

这篇博文介绍了 Interaction to Next Paint (INP) 指标，并说明了其工作原理和测量方式，并就如何改进该指标提供了建议。

description：使用 light-dark() 函数定义可响应所用配色方案的颜色。

本指南面向希望从 WebAssembly 中受益的 Web 开发者，您将学习如何借助正在运行的示例，利用 Wasm 外包 CPU 密集型任务。

在 CSS 网格中，您可以使用 `grid-template-columns` 和 `grid-template-rows` 属性分别定义线条名称并跟踪网格列和行的大小。支持插值这些属性可以让网格布局在不同状态之间平滑过渡，而不是在动画或过渡的中间点贴靠。

了解如何使用 Gamepad API 控制网页游戏。

inert 属性是一种全局 HTML 属性，它简化了移除和恢复元素用户输入事件（包括焦点事件和来自辅助技术的事件）的方式。

依赖方可以通过检查 AAGUID 来确定通行密钥的来源。了解其运作方式。

通过名为 ExampleScript 的合成玩具语言示例，了解如何使用 Binaryen.js API 用 JavaScript 编写和优化 WebAssembly 模块。

通过 <model-viewer> 网络组件，您可以以声明方式在网页上使用 3D 模型。

音频/视频捕获功能长期以来一直是 Web 开发的“圣杯”。 多年来，我们一直依赖浏览器插件（ Flash 或 Silverlight ）来完成此任务。 快来！ 此时，HTML5 可以派上用场。这可能并不明显，但 HTML5 的兴起确实带来了对设备硬件的大量访问。 Geolocation API （GPS）、 Orientation API （加速度计）、 WebGL （GPU）和 Web Audio API （音频硬件）就是很好的例子。这些功能非常强大，可公开基于系统底层硬件功能的高级

了解如何在 WebAuthn 中使用“userVerification”

了解 RUM 数据为什么会显示与 CrUX 不同的核心网页指标数据。

因此，构建包容且人人皆可访问的网站非常重要。我们可以针对至少六个关键的残疾领域进行优化：视觉、听觉、行动不便、认知、言语和神经系统。

第三方脚本提供广泛多样的实用功能，使得网络更具动态性。了解如何优化第三方脚本的加载，以降低其对性能的影响。

了解如何防止在用户的密码管理工具中已有通行密钥时创建新的通行密钥。

IndexedDB 基础知识。

现在您可以使用的值得信赖、强大且稳定的 CSS 了。

了解如何针对 Time to First Byte 指标进行优化。

主机、网站和源有何区别？什么是 eTLD+1？本文介绍了相关信息。

了解什么是可发现的凭据，以及如何打造适合您的使用场景的用户体验。

如果网站和应用运行不佳，用户就会注意到，因此优化渲染性能至关重要！

当元素的内容矩形改变大小时，“ResizeObserver”会通知您，以便您相应地做出反应。

除了避免不必要的资源下载，在提高网页加载速度上您可以采取的最有效措施就是，通过优化和压缩其余资源来最大限度减小总下载大小。

本文介绍了如何使用 OffscreenCanvas API 在 Web 应用中渲染图形时实现性能提升。

此博文介绍了 First Contentful Paint (FCP) 指标，并说明了如何衡量该指标

本文全面介绍了内容分发网络 (CDN)。此外，还介绍了如何选择、配置和优化 CDN 设置。

有关用户退出网站时应该怎么做的实用开发者指南。

这篇博文介绍了可交互时间 (TTI) 指标并说明了如何衡量该指标

Fetch Priority API 用于指示资源相对于浏览器的相对优先级。它能够实现最佳加载效果并改进核心网页指标。

关于 :user-valid 和 :user-invalid 伪类，以及如何使用它们来改善输入验证的用户体验。

了解业务决策者和非开发者如何改进核心网页指标。

了解并避免在对字符串应用 base64 编码和解码时出现的常见问题。

subgrid 支持网格共享性，允许嵌套网格与祖先和同级对齐。

在当今的数字世界中，在线广告是我们所有人享受的免费网络的关键组成部分。但是，如果广告植入不当，可能会导致浏览速度变慢，让用户感到沮丧，并降低互动度。了解如何在不影响网页速度的情况下有效加载广告，确保顺畅的用户体验，并为网站所有者最大限度地发掘创收机会。

了解什么是代码覆盖率，并探索衡量代码的四种常用方法。

确定需要测试的内容以及可以排除的内容。

确定要测试的内容、定义测试用例并确定优先级。

以用户为中心的效果指标是一项重要的工具，可帮助您了解和改善网站的体验，让真实用户受益。

了解预加载自适应图片以确保出色用户体验的全新精彩可能性。

一种根据用户的偏好调整字体的方法，让用户在阅读您的内容时能感到最得心应手。

了解如何将不同的测试类型组合成与您的项目契合的合理策略。

让我们从基础知识开始吧！了解两种常规测试模式和三种常见的测试自动化类型。

您应定期审核资源，以确保每个资源都有助于提供更好的用户体验。

介绍了 WebAssembly（有时缩写为 Wasm），它是一种可执行程序的可移植二进制代码格式和对应的文本格式，以及用于促进此类程序与其主机环境之间交互的软件接口。

mkbitmap C 程序依次读取图像并对其应用以下一项或多项操作：反转、高通过滤、缩放和阈值。每项操作都可以单独控制和开启或关闭。本文介绍了如何将 mkbitmap 编译为 WebAssembly。

如何在 Web 应用中安全地显示用户控制的内容。

文件系统标准引入了来源私有文件系统 (OPFS)，作为一个存储端点，该端点对网页的来源是私有的，对用户不可见，可选择性地提供对一种经过高度优化以提升性能的特殊文件的访问权限。 现代浏览器支持源私有文件系统，并且该系统已由 Web 超文本应用技术工作组 ( WHATWG ) 在 文件系统 Living Standard 中标准化。 浏览器支持 来源 当您想到计算机上的文件时，可能会想到文件层次结构：文件按文件夹整理，您可以使用操作系统的文件浏览器浏览这些文件夹。例如，在 Windows

简要介绍如何在生态系统中采用 AVIF，以及开发者可以通过 AVIF 从静态图片和动画中获得何种性能和质量优势。

了解如何优化网站的 Interaction to Next Paint。

您只需了解 Baseline 中的部分功能即可。

加载脚本时，浏览器需要一些时间在执行之前对其进行评估，这可能会导致任务耗时较长。了解脚本评估的工作原理，以及您可以采取哪些措施来防止脚本评估在网页加载期间导致耗时较长的任务。

DOM 大小大可能是决定互动是否快速的因素。详细了解 DOM 大小与 INP 之间的关系，以及在网页包含大量 DOM 元素时，您可以采取哪些措施来缩减 DOM 大小，以及如何通过其他方式限制渲染工作。

输入延迟会严重影响总互动延迟，并会对网页的 INP 造成不利影响。在本指南中，了解什么是输入延迟，以及如何减少输入延迟以提高互动速度。

使用 JavaScript 呈现 HTML 与呈现由服务器发送的 HTML 不同，这可能会影响性能。请在本指南中了解不同之处，以及您可以采取哪些措施来确保网站的呈现效果（尤其是在涉及互动的情况下）。

由 PHP 提供支持的完整 WordPress 平台，可通过 WebAssembly 在浏览器中运行

这篇博文介绍了 Cumulative Layout Shift (CLS) 指标并说明了如何衡量该指标。

得益于 WebAssembly，这里现在展示了各种工具。

渐进式 Web 应用可以提交到 Android Play 商店、Microsoft Store 等应用商店。

使用源代码映射改善 Web 调试体验。

现在您可以使用的值得信赖、强大且稳定的 CSS 了。

在 CSS 中计算正弦、余弦、正切等值。

requestVideoFrameCallback() 方法可让网络作者注册一个回调，该回调会在新的视频帧发送至合成器时在呈现步骤中运行。

对 Google Developers Experts (GDE) 计划成员的系列访谈之一。

我们来使用作用域自定义属性和 background-clip 来实现动画渐变文字效果 前往 CodePen 并创建一个新的 Pen。 为文本创建标记。我们使用包含“Speedy”一词的标题： 然后，为 body 设置较深的 background-color ： 将文本的 font-size 调高。使用 clamp 使其具有响应能力： 为我们要使用的颜色创建两个自定义属性。使用这些颜色将 linear-gradient 应用于 background ，并将其旋转 90 度：

这篇博文宣布了媒体应用一系列新的模式。

这本 Chrometober 是如何生动展现卷轴式图书的，分享有趣又惊悚的提示与技巧。

基本概述了如何构建颜色自适应且易于访问的提示自定义元素。

通行密钥使网站的用户帐号更加安全、更简单、更易于使用且无密码。本文介绍了如何允许用户为您的网站创建通行密钥。

通行密钥使网站的用户帐号更加安全、更简单、更易于使用且无密码。本文介绍了应如何设计通过通行密钥实现无密码登录，同时兼顾现有密码用户的需求。

简要介绍如何构建颜色自适应、响应迅速且易于访问的 FAB 组件。

了解如何针对核心网页指标优化网页字体。

对 Google Developers Experts (GDE) 计划成员的系列访谈之一。

我们来使用作用域自定义属性和 animation-timing-function 制作一个动画 CSS 加载器 前往 CodePen 并创建一个新的 Pen。 为加载器创建标记。请注意内嵌自定义属性的使用： 您还可以使用生成器 ( Pug ) 配置行数： 为我们的加载器添加一些样式： 使用绝对定位和 calc 与 transform 的组合来定位线条： 根据 --index 应用不透明度： 开始行动吧！ 请注意使用 steps(var(--count)) 来获得正确的效果 ✨ 完成！🎉

简要介绍了用于测试和验证设计的无障碍色彩对比度的三种工具和方法。

本教程介绍了如何构建网站的无障碍主导航。您将了解语义 HTML、无障碍功能，以及如何使用 ARIA 属性有时弊大于利。

利用以下便捷的 CSS 伪选择器，您可以实现选择模态元素。

探索如何利用 CSS 重现视错觉的有趣探索。

针对 Core Web Vitals 优化代码和跟踪代码管理器。

了解设置列表样式的一些实用且富有创意的方式。

在设计系统和组件库中使用自定义属性的优势。

了解如何使用单独的平移、旋转和缩放 CSS 属性以直观的方式处理转换。

了解在 CSS 中为边框添加动画效果的几种方法

BBC 为其网站部署了 HSTS，以提高安全性和性能。欢迎了解 HSTS 的意义，以及 HSTS 能为您提供哪些帮助。

了解监控核心网页指标的工具可能会报告不同的数字，以及如何解读这些差异。

GDE Enrique Fernandez Guerra 对他的非政府组织 HelpDev 进行开源宣传。

停止对 Internet Explorer 的支持对于 Maersk.com 的客户和开发者来说意味着什么。

HTML5Rocks，很高兴认识你。

了解如何设置第一方 Cookie，以确保安全性和跨浏览器兼容性，并在第三方 Cookie 逐步淘汰后最大限度降低破坏的可能性。

Web Audio API 可以正确实现 AV 同步。

圆锥渐变可用于创建一些有趣的效果，例如这个漂亮的边框示例。 Adam Argyle 创建了此 CodePen （最初通过此 Tweet 在 Twitter 上分享），其中展示了如何使用 圆锥渐变 创建边框。 Terry Mun 以富有创意的方式 分叉 了 Adam 的 CodePen，并创建了此 CodePen 。将鼠标悬停在元素上，您会看到渐变发生变化，这得益于一些 JavaScript 代码更新了存储旋转角度的 CSS 自定义属性。 这些示例使用 border-image-source

了解使用 JavaScript 库或框架时需要做出的决策。

使用 Fetch API 时捕获错误。

从客户端 JavaScript 环境的角度了解框架和库之间的差异。

此资源可帮助您快速了解航站楼的导航路线。

更新了 Google Fonts CSS API - 它的工作原理、使用方式，以及它如何高效地提供网页字体。

GOV.UK 放弃了前端的 jQuery 依赖项。您永远无法猜测发生了什么。（是的，您会。）

简要介绍如何构建颜色自适应、响应式和无障碍组件。

不妨了解什么是浏览器预加载扫描程序、它如何帮助提升性能，以及如何避免这些问题。

让您能更轻松地构建网站。

如何使用当前的分析工具衡量网页指标

Web Google 开发者专家，介绍了指导计划如何帮助他们成为领导者。

通过大量示例分享可变字体的实用指南。

使用 Josh W Comeau 的这款工具，即可制作出精美的渐变效果，变得超级简单。

一系列关于首要痛点的数据分析，收集自与 Web 开发者的多次一对一对话。

查看图片工具的状态。

了解作用域及其在 JavaScript 中的工作原理。

简要介绍了如何使用“”元素构建颜色自适应、响应式且易于访问的小型和大型模态窗口。

了解如何调试网页上的媒体播放错误。

对 Google Developers Experts (GDE) 计划成员的系列访谈之一。

在初始视口内提前加载图片，同时尽可能延迟加载其余图片，这样可以减少加载的字节数，同时提升 Web Vitals 指标。

简要介绍如何使用 `` 元素构建易于访问的彩色加载栏。

尽可能简化注册表单和登录表单。 保存登录表单中的凭据，以便用户在返回时无需重新登录。 如需存储表单中的用户凭据，请执行以下操作： 在继续操作之前，请检查您的表单是否包含 autocomplete 属性。这有助于 Credential Management API 从表单中查找 id 和 password ，并构建凭据对象。 这还有助于不支持 Credential Management API 的浏览器了解其语义。如需详细了解自动填充功能，请参阅 Jason Grigsby 撰写的 这篇文章 。

用户代理字符串更改、Chrome 和 Firefox 为减轻影响而采取的策略，以及您可以如何提供帮助。

有关如何构建自适应网站图标的基础概览。

了解如何使用 Emscripten 通过 WebAssembly 将 2D 图形渲染到网页上的画布。

忘记或滥用 Cache-Control 标头可能会对网站安全和用户隐私产生负面影响。获取关于高价值网站的建议。

衡量网站是否运行正常的基本指标

了解如何将 gPhoto2 移植到 WebAssembly，以便从 Web 应用中通过 USB 控制外接摄像头。

使用网络错误日志记录 (NEL) 收集客户端网络错误。

了解如何在使用所有浏览器的用户的同时使用最新的 WebAssembly 功能。

了解如何使用 WebAssembly 和 Fugu API 将与外部设备交互的代码移植到 Web。

简要介绍如何构建易于使用的自适应主题切换组件。

了解如何在 WebAssembly 库中嵌入 JavaScript 代码以与外界进行通信。

Oculus Quest 2 是一款虚拟现实 (VR) 头戴设备，由 Meta 旗下部门 Oculus 开发。开发者现在可以构建和分发利用 Oculus Quest 2 的多任务处理功能的 2D 和 3D 渐进式 Web 应用 (PWA)。本文介绍了相关体验，以及如何在 Oculus Quest 2 上构建、旁加载和测试 PWA。

简要介绍 Designcember 的节假日日历式体验所用的流程和工具。

这张图展示了利用环境光传感器和窗口控件叠加层功能在网络上重新创建太阳能计算器的程序。

在很长一段时间里，您不得不借助变通方法和库来创建 JavaScript 值的深层副本。Android 平台现在附带了“StructuredClone()”是一种用于深层复制的内置函数。

简要介绍如何构建自适应且可访问的消息框组件。

Chrome 推出界面基金，用于向设计工具、CSS 和 HTML 设计人员提供公益金。

简要介绍如何构建响应式、自适应且易于访问的 3D 游戏菜单。

试用新的 Lighthouse API 来衡量整个用户流中的性能和最佳做法。

了解 PageSpeed Insights 的最新动态，帮助您更好地衡量和优化网页及网站的质量。

汇总了 2021 年 Chrome 开发者峰会上发布的所有重要公告，点击链接即可了解详情。

了解如何衡量动画、如何看待动画帧以及网页整体流畅性。

在过去的三年中，Chrome 一直致力于为那些想要挑战浏览器极限的 Web 应用提供强力支持。Photoshop 就是其中之一。几年前，直接在浏览器中运行像 Photoshop 一样复杂的软件这样的想法是很难想象的。但是，通过使用各种新的网络技术，Adobe 现已将 Photoshop 公开测试版引入到网络中。

简要介绍如何构建响应迅速、自适应、可访问的多选组件，以便对用户体验进行排序和过滤。

了解使用 Navigation API 和 Resource Timing API 评估现场加载性能的基础知识。

新的 Sanitizer API 旨在构建强大的处理器，以便将任意字符串安全地插入页面。本文介绍此 API 并解释其用法。

本文档介绍了加载第三方嵌入时可以采用的性能最佳实践、高效的加载技术，以及有助于减少热门嵌入的布局偏移的布局偏移终止工具。

解答关于 SPA、核心网页指标和 Google 旨在解决当前衡量限制的计划的常见问题。

preventDefault 和 stopPropagation ：何时使用哪种方法以及每种方法的确切用途。 JavaScript 事件处理通常很简单。在处理简单（相对扁平）的 HTML 结构时，这一点尤为重要。不过，当事件在元素层次结构中传播时，情况会变得更加复杂。通常，此时开发者会联系 stopPropagation() 和/或 preventDefault() 来解决他们遇到的问题。如果您曾经想过：“我只会尝试 preventDefault() ，如果不行，再尝试