web.dev 实时总结

总结了我们在为期 3 天的在线社区活动期间宣布的重大新闻和更新,并提醒您即将举办的区域活动。

我们刚刚结束了为期三天的活动 web.dev LIVE,其中一些 Web 社区在线上齐聚一堂,讨论 Web 开发的状态。我们每天在不同的区域时区开始,Google 员工本着帮助开发者使用工具和指南来保持网络稳定、强大和可访问的精神,分享了一轮更新、新闻和技巧。

如果您错过了部分直播,所有会议都已录制,您可以在 YouTube 上观看。 我们还将在全球各地举办区域活动,这些活动由 Google 开发者社区组织,将提供与我们在 web.dev LIVE 期间所涵盖主题相关的深入探究。

让我们来回顾一下这三天里分享的一些新闻和动态。

网页指标

Chrome 团队宣布推出 Web Vitals 计划,旨在提供统一的指南、指标和工具,帮助开发者在网络上提供出色的用户体验。Google 搜索团队最近还宣布,他们将把网页体验作为排名标准进行评估,并将 Core Web Vitals 指标作为其基础。

2020 年 Core Web Vitals 的三大支柱是网页内容的加载性能、互动性和视觉稳定性,这些支柱由以下指标衡量:

Core Web Vitals 示意图。
  • Largest Contentful Paint 用于衡量感知加载速度,并将网页主要内容可能已加载的时间点标记在网页加载时间轴中。
  • First Input Delay 用于衡量响应能力,并量化用户在首次尝试与网页互动时的体验。
  • Cumulative Layout Shift 用于衡量视觉稳定性,并量化网页内容意外移动的程度。

在 web.dev LIVE 上,我们分享了有关如何针对 Core Web Vitals 进行优化以及如何使用 Chrome 开发者工具探索网站的 Vitals 值的最佳实践。我们还分享了许多其他与性能相关的演讲,您可以在 web.dev/live 的第 1 天日程中找到这些演讲。

tooling.report

针对 Web 这样广泛的平台进行开发可能具有挑战性。构建工具通常是 Web 开发项目的核心,在处理 Web 开发者和产品生命周期方面发挥着关键作用。

我们都见过笨拙的 build 配置文件,因此为了帮助 Web 开发者和工具作者克服 Web 的复杂性,我们构建了 tooling.report。该网站可帮助您为下一个项目选择合适的构建工具,确定是否值得从一个工具迁移到另一个工具,或者了解如何将最佳实践纳入工具配置和代码库。

我们设计了一套测试,用于确定哪些构建工具可让您遵循 Web 开发最佳实践。我们与构建工具作者合作,确保我们正确使用他们的工具并公平地展示它们。

tooling.report 界面的屏幕截图。

tooling.report 的初始版本涵盖 webpack v4、Rollup v2、Parcel v2 和 Browserify(搭配 Gulp),这些似乎是目前最热门的构建工具。我们构建了 tooling.report,以便在社区的帮助下灵活添加更多构建工具和更多测试。

如果我们遗漏了应测试的最佳实践,请在 GitHub 问题中提出。如果您想编写测试或添加我们未包含在初始集中的新工具,欢迎您贡献力量!

在此期间,您可以详细了解我们构建 tooling.report 的方法,并观看 web.dev LIVE 中的会议。

网络上的隐私和安全

Chrome 团队坚信,开放的网络应尊重用户隐私,并保留关键用例,让网络继续人人皆宜。

2019 年,Chrome 提议更新 Cookie 标准,默认将 Cookie 限制在第一方环境中,并要求将第三方上下文中的 Cookie 明确标记为第三方 Cookie。具体而言,这提供了一条防范跨站请求伪造攻击的防线。Chrome、Firefox、Edge 和其他浏览器现在正在采用该提案。

虽然 Chrome 决定在新冠肺炎疫情期间暂时回滚这些更改,但遗憾的是,在人们最脆弱的危机期间,您也会看到此类攻击有所增加。因此,随着 Chrome 84 稳定版的发布(2020 年 7 月中旬),这些变更将再次开始在所有 Chrome 版本(从 80 及更高版本)中推出。如需了解详情,请参阅 SameSite Cookie 指南以及 web.dev LIVE 讲座。

此外,在 Privacy Sandbox 的旗帜下,Chrome 正在引入多项标准提案,旨在支持让人们能够使用 Web 平台谋生的用例,但以更好地尊重用户隐私的方式进行。Chrome 正在积极征求对这些提案的反馈,并参与 W3C 的开放论坛,讨论这些提案以及其他方提交的提案。如需详细了解此计划,请观看开放式网络的安全性与隐私权讲座。

最后,从用户安全角度来看,Spectre 漏洞意味着在一个浏览器进程中运行的恶意代码可能能够读取与该进程关联的任何数据,即使这些数据来自不同的来源。浏览器针对此问题的一种缓解措施是网站隔离,即将每个网站放入单独的进程中。如需了解详情,请观看有关新的跨域开放者和嵌入者政策(COOP 和 COEP)的 web.dev LIVE 讲座。

打造功能强大的 Web 应用

Chrome 希望您能自由打造最优质的 Web 应用,让您能够触达各种设备上的最多用户。结合 PWA 的可安装性和可靠性,以及功能项目 (Project Fugu),Chrome 专注于三个方面,以缩小平台专用应用与 Web 之间的差距,帮助您构建和提供出色的体验。

首先,Chrome 团队一直在努力让 Web 开发者和用户更好地控制安装体验,在多功能框中添加安装宣传,等等。尽管网络无处不在,但对某些企业来说,在商店中上架应用仍然很重要。为了提供帮助,Chrome 推出了 Bubblewrap,这是一个库和 CLI,可让您轻松将 PWA 纳入 Play 商店。事实上,PWABuilder.com 现在在后台使用 Bubblewrap。只需点击几下鼠标,您就可以生成 APK 并将 PWA 上传到 Play 商店,前提是您满足条件。

其次,Chrome 提供了与操作系统的更紧密集成,例如,通过 Web Share API 调用系统级共享服务来共享照片、歌曲或任何内容,或者在从其他安装式应用共享时接收内容。您可以使用应用标记让用户及时了解最新动态,或巧妙地通知他们有新活动。此外,用户现在可以更轻松地使用应用快捷方式快速启动操作,该功能将在 Chrome 84(2020 年 7 月中旬)中推出。

最后,Chrome 一直在开发新功能,以实现以前无法实现的新场景,例如在用户本地文件系统上读取和写入文件的编辑器,或获取本地安装的字体列表,以便用户在设计中使用。

在 web.dev LIVE 期间,我们讨论了许多其他功能和特性,这些功能和特性可让您提供与平台专用应用相同的功能和体验。如需查看所有会议,请访问 web.dev/live 查看第 2 天的日程安排。

Chrome 开发者工具和 Lighthouse 6.0 的新变化

Chrome 开发者工具:新增了“问题”标签页、色觉缺陷模拟器,并支持 Web Vitals

Chrome 开发者工具最强大的功能之一是能够发现网页上的问题,并提醒开发者注意。随着我们进入隐私至上的网络新阶段,这一点尤为重要。 为了减少控制台中的通知疲劳和混乱,Chrome 开发者工具推出了“问题”标签页,该标签页首先关注三种类型的关键问题:Cookie 问题、混合内容和 COEP 问题。观看 web.dev LIVE 讲座,了解如何使用“问题”标签页查找和解决问题。

“问题”标签页的屏幕截图。

此外,随着 Core Web Vitals 成为 Web 开发者需要跟踪和衡量的最关键指标集之一,开发者工具希望确保开发者能够轻松跟踪其网站在这些阈值方面的表现。因此,这三个指标现在已纳入 Chrome 开发者工具的“性能”面板中。

最后,随着越来越多的开发者关注无障碍功能,开发者工具还引入了色觉缺陷模拟器,让开发者可以模拟视力模糊和其他类型的视觉缺陷。您可以在 DevTools 的新变化讲座中详细了解此功能和许多其他功能。

视觉缺陷模拟器的屏幕截图。

Lighthouse 6.0:新指标、Core Web Vitals 实验室测量、更新后的性能得分和新审核

Lighthouse 是一款开源自动化工具,可帮助开发者提升网站性能。在最新版本中,Lighthouse 团队专注于根据指标提供数据分析,让您能够从关键维度全面了解用户体验的质量。

为确保一致性,Lighthouse 增加了对 Core Web Vitals 的支持:LCP、TBT(FID 的代理,因为 Lighthouse 是实验室工具,而 FID 只能在现场测量)和 CLS。Lighthouse 还移除了三个旧指标:首次有效渲染时间、首次 CPU 空闲时间和最大潜在 FID。这些移除是出于指标可变性等考虑,以及更新的指标能更好地反映 Lighthouse 试图衡量的用户体验部分。 此外,Lighthouse 还根据用户反馈,对每个指标在总体性能得分中的权重进行了一些调整。

Lighthouse 还添加了评分计算器,通过提供版本 5 和版本 6 评分之间的比较,帮助您探索性能评分。当您使用 Lighthouse 6.0 运行审核时,报告会附带一个指向计算器的链接,其中会填充您的结果。

最后,Lighthouse 添加了许多新审核,重点关注 JavaScript 分析和无障碍功能。

新审核列表。

如需了解详情,请观看速度工具的新变化。

了解详情

感谢社区中所有与我们一起讨论 Web 平台机遇和挑战的人。

本文总结了此次活动的一些亮点,但精彩远不止于此。请务必查看所有讲座,如果您希望直接在收件箱中收到更多内容,请订阅 web.dev 简报。此外,您还可以访问 web.dev/live 上的区域活动部分,查找您所在时区即将举行的社区活动!