Google’s Web Platform Team Highlights Performance, Tooling, and DevTools Updates

At the digital web.dev LIVE event, held from June 30th to July 2nd, Google’s web platform team shared updates across performance metrics, developer tooling, and accessibility features. The announcements were aimed at helping developers keep their sites fast, stable, and inclusive.

Core Web Vitals as a Shared Baseline

Central to the event was the continued push for the Web Vitals initiative, which provides unified guidance and metrics for measuring user experience. Google Search has indicated that page experience, with Core Web Vitals at its foundation, will become a ranking criterion. The 2020 set of Core Web Vitals focuses on three pillars of user experience:

  • Largest Contentful Paint (LCP) — measures perceived load speed and marks when the main content is likely loaded.
  • First Input Delay (FID) — measures responsiveness, quantifying the delay users feel when first trying to interact with a page.
  • Cumulative Layout Shift (CLS) — measures visual stability by quantifying unexpected movement of page content.

Google’s team shared best practices for optimizing these metrics and demonstrated how to use Chrome DevTools to explore your site or app’s vital values.

tooling.report For Choosing Your Build Tool

The web’s complexity has made build tools essential, yet they themselves are complex to navigate. To assist developers and tooling authors, Google introduced tooling.report. This site helps you choose a build tool, decide whether migrating tools is worthwhile, or incorporate best practices into your existing setup.

The report is based on a suite of tests designed around web development best practices. The initial release covers webpack v4, Rollup v2, Parcel v2, and Browserify+Gulp, with flexibility for more tools. The team worked with tool authors to ensure their tools are used correctly and fairly. Developers can propose new tests via GitHub issues or contribute to expanding the tool coverage.

What’s New in Chrome DevTools

Chrome DevTools received updates aimed at reducing developer friction and enhancing problem diagnosis.

  • Issues Tab: To cut down on console noise, a new tab groups critical issues into three categories: cookie problems, mixed content, and Cross-Origin-Embedder-Policy (COEP) issues.
  • Core Web Vitals in Timeline: LCP, FID, and CLS metrics are now directly visible in the DevTools timeline for easier tracking.
  • Color Vision Deficiency Emulator: This new feature lets developers simulate vision deficiencies, including blurred vision and various types of color blindness, to help build more accessible sites.

Lighthouse 6.0 Brings Updated Metrics and Audits

Lighthouse, Google’s open-source auditing tool, launched version 6.0 with a focus on providing a balanced view of user experience. The update brings lab-based support for the Core Web Vitals, adding LCP, TBT (Total Blocking Time, the lab equivalent of FID), and CLS. Three older metrics were removed: First Meaningful Paint, First CPU Idle, and Max Potential FID, due to variability and newer metrics being more reflective of user experience. Score weights were also adjusted.

The new version introduces a scoring calculator that lets you compare version 5 and version 6 scores, with audit reports linking directly to your results. New audits were added with a focus on JavaScript analysis and accessibility. Google has shared details on these changes in its sessions on the latest in speed tooling and Puppeteer.

All sessions from the event are available online, and the web.dev newsletter provides a way to receive further updates.