web.dev 实时总结

总结了在为期 3 天的在线社区活动中公布的重大新闻和更新,并提醒他们即将到来的地区性活动。

为期 3 天的 web.dev LIVE 活动刚刚结束,届时部分网络社区将齐聚一堂,讨论网络开发现状。我们每天的会议都在不同的地区时区开始,Google 员工分享了一系列最新动态、资讯和提示,本着帮助开发者提供工具和指南的精神,确保了 Web 的稳定性、强大性和无障碍性。

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

我们来深入了解一下这三天分享的一些资讯和动态。

网页指标

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

2020 年 Core Web Vitals 的三大支柱是网页内容的加载、互动和视觉稳定性,具体表现如下:

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

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

tooling.report

针对网络如此广泛的平台进行开发可能并非易事。构建工具通常位于 Web 开发项目的核心位置,在处理开发者和产品生命周期方面发挥着关键作用。

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

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

Tooling.report 界面的屏幕截图。

Tooling.report 的初始版本涵盖 webpack v4、Rollup v2、Parcel v2 和 Browserify with Gulp,它们似乎是目前最热门的构建工具。我们构建了 tooling.report,它在社区的帮助下可以灵活地添加更多构建工具和额外的测试。

如果我们缺少应测试的最佳做法,请在 GitHub 问题中提出建议。如果您已准备好编写测试或添加初始集中未包含的新工具,我们欢迎您随时贡献

在此期间,您可以详细了解我们构建 tooling.report 的方法,并观看来自 web.dev 的直播活动直播

网络上的隐私权和安全

Chrome 坚信开放的网络尊重用户隐私,并维护一些关键用例,以确保每个人都能顺利使用网络。

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

虽然 Chrome 鉴于 COVID-19 决定暂时回滚这些更改,但不幸的是,在人们最容易受到侵害的危机期间,此类攻击的数量也会增加。因此,随着 Chrome 84 稳定版(2020 年 7 月中旬),这些变更将重新开始在 Chrome 80 及更高版本上。如需了解详情,请参阅 SameSite Cookie 指南web.dev 在线会话

此外,在 Privacy Sandbox 横幅下,Chrome 还将推出一些标准提案,这些提案旨在支持各种使用情形,让用户能够通过网络平台谋生,同时更好地保护用户隐私。Chrome 正在积极寻求关于这些提案的反馈,并且正在参与 W3C 的公开论坛,以讨论这些提案以及其他各方提交的提案。如需详细了解该计划,请参阅开放网络的安全和隐私权会议。

最后,从用户安全性方面来看,Spectre 是一个漏洞,这意味着在一个浏览器进程中运行的恶意代码或许能够读取与该进程关联的任何数据,即使这些代码来自另一个来源。浏览器缓解此问题的一种方法是网站隔离,即将每个网站放在单独的进程中。如需了解详情,请观看有关新的跨域打开者和嵌入器政策(COOP 和 COEP)的 web.dev 直播会议。

构建具有强大功能的 Web

Chrome 希望您可以随意打造最高品质的 Web 应用,最大限度地覆盖使用各种设备的用户。Chrome 将 PWA 的可安装性和可靠性与功能项目 (Project Fugu) 相结合,致力于缩小平台专用应用与 Web 之间的差距,帮助您打造并提供出色的体验。

首先,Chrome 团队一直在努力让 Web 开发者和用户更好地控制安装体验向多功能框添加安装宣传内容以及实现更多功能。尽管网络无处不在,但对某些企业而言,将应用发布到商店仍然非常重要。为了提供帮助,Chrome 推出了 Bubblewrap,这是一个库和 CLI,可让您轻而易举地将 PWA 上传到 Play 商店。事实上,PWABuilder.com 现在在后台使用气泡封装功能。只需点击几下鼠标,即可生成 APK 并将您的 PWA 上传到 Play 商店(只要您符合条件)。

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

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

在 web.dev 上线期间,我们谈到了很多其他功能,这些功能可让您像平台专用应用一样提供相同体验和相同功能。如需查看第 2 天时间表中的所有会议,请访问 web.dev/live

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

Chrome 开发者工具:新增了“问题”标签页、颜色缺陷模拟器和网页指标支持

Chrome 开发者工具最强大的功能之一是能够发现网页上的问题,并提醒开发者注意问题。随着我们进入以隐私保护为先的网络的下一阶段,这一点最为重要。为了减少控制台中的通知疲劳和杂乱,Chrome 开发者工具推出了“问题”标签页,该标签页重点关注 3 种主要问题:Cookie 问题混合内容COEP 问题。首先,观看 web.dev 直播会议,了解如何通过“问题”标签页查找和解决问题

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

此外,随着核心网页指标成为 Web 开发者需要跟踪和衡量的最关键指标之一,开发者工具希望确保开发者能够轻松跟踪自己在这些阈值方面的表现。这三个指标现在都显示在 Chrome 开发者工具的“Performance”面板中。

最后,随着专注于无障碍功能的开发者越来越多,开发者工具还引入了色觉缺陷模拟器,让开发者能够模拟视觉模糊和其他类型的视觉缺陷。如需详细了解此功能以及许多其他功能,请参阅 DevTools 的新变化会议。

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

Lighthouse 6.0:新增了指标、Core Web Vitals 实验室测量结果、更新后的性能得分以及新的审核功能

Lighthouse 是一款自动化开源工具,可帮助开发者提高其网站的性能。在最新版本中,Lighthouse 团队专注于根据指标提供数据洞见,让您可以根据关键维度平衡用户体验的质量。

为确保一致性,Lighthouse 添加了对以下核心网页指标的支持:LCPTBT(这是 FID 的代理,因为 Lighthouse 是一种实验室工具,只能在现场衡量 FID)和 CLS。Lighthouse 还移除了三个旧指标:首次有效绘制时间首次 CPU 空闲时间最大潜在 FID。之所以进行这些移除,是因为指标变异性等因素以及较新的指标能够更好地反映 Lighthouse 尝试衡量的用户体验。此外,Lighthouse 还根据用户反馈,对每个指标在总体性能得分中所占的比例进行了一些调整。

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

最后,Lighthouse 还增加了一系列新的审核,重点关注 JavaScript 分析和无障碍功能。

新审核的列表。

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

了解详情

感谢加入我们讨论 Web 平台的机遇和挑战的所有人。

这篇博文总结了本次活动的一些亮点,但还有很多精彩内容。请务必观看所有专题演讲活动,并订阅 web.dev 简报,以便直接在收件箱中查看更多内容。访问 web.dev/live 上的地区活动部分,查找您所在时区即将举办的社区活动!