Web Stage - Day 1 (Google I/O 2025)

Key Concepts

• Baseline: A standardized approach to web feature availability, categorized into "Newly Available" and "Widely Available," indicating cross-browser support.
• Interop Project: A collaborative effort among browser vendors to ensure consistent implementation of web standards.
• Web Platform Dashboard: A tool providing real-time data on web feature availability across different browsers.
• Client-side AI: Running AI models directly in the browser, offering benefits like zero latency and enhanced privacy.
• Hybrid AI: Combining client-side and cloud-based AI models to provide a consistent user experience across devices.
• Core Web Vitals: A set of metrics (LCP, INP, CLS) used to measure the performance and user experience of web pages.
• View Transitions: A web API that enables smooth and animated transitions between different states or pages on a website.
• Styleable Select: A new feature that allows developers to style the <select> element using CSS.
• Passkeys: A passwordless authentication method that uses cryptographic keys stored on a user's device.

Baseline and Interoperability

• The Problem: Developers lack confidence in using new web features due to inconsistent browser support.
• Interop Project 2025: Aims to address inconsistencies in areas like anchor positioning, view transitions, and the navigation API.
• Baseline Platform: Provides clarity on feature availability, categorized as:
  • Limited Availability: Feature in only one or two browsers, suitable for polyfills.
  • Readily Available: Feature in most browsers, can be planned for.
  • Widely Available: Feature available for 30 months, safe for production use.
• Statistics:
  • 197 new features have become widely available since 2020.
  • Expect at least 150 more features to become available in the next 30 months.
• Tools:
  • Feature Dashboard: Tracks baseline, newly available, and widely available features.
  • Web Platform Dashboard: Provides data for developers to include in their tooling.
  • MDN: Integrated Baseline support in over 70% of its pages.
  • RUMvision: Combines Baseline data with real user monitoring to identify unnecessary polyfills.
  • ESLint Plugins: CSS ESLint and HTML ESLint plugins support Baseline rules.
  • Stylelint Plugin: Officially supported Baseline plugin for Stylelint users.
  • VS Code and WebStorm: Baseline information available directly in the IDE.

AI on the Web

• Web as an AI Platform: The web's accessibility makes it ideal for delivering AI experiences.
• Client-side AI Benefits: Zero network latency, cost-effectiveness, enhanced privacy, offline functionality.
• Libraries: MediaPipe and Transformers.js use Wasm and WebGPU for fast in-browser AI.
• Built-in AI APIs:
  • Summarizer API: Compiles long texts into concise summaries (Chrome 138).
  • Language Detector and Translator APIs: Detects and translates languages (Chrome 138).
  • Prompt API: Sends natural language requests to Gemini (available for Chrome Extensions).
• Adobe Acrobat Chrome Extension Example: Uses the Prompt API with multimodal input to generate text summaries from scanned documents.
• New AI APIs (Origin Trials):
  • Proofreader API: Identifies grammar errors in inputted text.
  • Writer API: Generates content matching a specific topic and context.
  • Rewriter API: Adjusts copy for tone and length.
• Hybrid AI Approach: Combines client-side and cloud-based AI for consistent experience.
  • Firebase Hybrid SDK: Detects device capabilities and chooses between client-side or cloud-based models.

Chrome DevTools Enhancements

• AI Assistance for Styling: End-to-end debugging for styling issues using Gemini.
• Network Panel Gemini Integration: Debugs network requests, security headers, and CORS issues.
• Performance Panel Gemini Integration: Identifies slow-running functions and provides actionable insights.
• Reimagined Performance Panel:
  • Vitals information in one place.
  • Real Chrome User Experience data.
  • Lighthouse-powered Insights tab for LCP, INP, and CLS.
  • Summary tab for breakdown of first and third-party scripts.

Web Performance Improvements

• Core Web Vitals Impact: Saved 30,000 years of time surfing the web in 2024.
• LCP Subparts: Break down LCP time into distinct parts for easier bottleneck identification.
• Speculation Rules API: Programmatically tells Chrome which pages to prefetch or prerender.
  • Cloudflare's Speed Brain uses speculative loading and saw a 45% LCP improvement.
• Scheduler.yield API: Improves INP by pausing long JavaScript tasks.
• Long Animation Frames (LoAF) API: Identifies rendering updates taking longer than 50ms.
• Compression Dictionary Transport: Differentially serves static assets, reducing data transfer.
  • Google Search reduced HTML payload by 23% and improved LCP by up to 9%.

Expressive UI Capabilities

• View Transitions: Enable seamless navigation and app-like experiences.
  • google.com added View Transitions to power AI Mode in Search.
  • Frameworks have adopted view transitions for easier use.
• New UI Primitives:
  • Scroll-button and Scroll-marker: Enable carousels with just CSS.
  • Styleable Select: Allows styling of <select> elements using CSS.
    • appearance: base-select property puts the element into a configurable state.
• Temu Case Study:
  • MPA View transitions increased user session duration by 10% and page views by 15%.
  • Carousels, Popover, Anchor Positioning, and customizable select improved page performance and reduced CPU load by 10-15%.

User Experience Improvements

• Autofill: Automatically fills form fields with saved information.
  • Shopify saw a 45% higher checkout completion rate with autofill.
• Automated Password Change: Automatically changes compromised passwords stored in Google Password Manager (starting in 2025).
• Passkeys: Passwordless authentication method synced across platforms.
  • New API to automatically create passkeys after successful password sign-in.

Rachel Andrew's Presentation: Faster Web Development with Baseline

• Rapid Platform Evolution: Web platform features are becoming available across browsers much faster.
• Container Queries Example: Became Baseline Newly available in five months.
• Cascade Layers Example: Became Baseline Newly available in just over a month.
• Baseline Definition:
  • Newly Available: Shipped in Chrome, Edge, Firefox, and Safari.
  • Widely Available: 30 months after Baseline Newly available.
• Custom Baseline: Developers can create their own Baseline based on their user data.
• Web-features Data: Open data set maintained by the WebDX Community Group.
• RUM Archive Insights Integration: Lets users see the number of users supported if they select a Baseline year.
• Baseline Years:
  • Baseline 2022: 98% of tracked users supported.
  • Baseline 2023: 93% of users supported.
• RUMvision Integration: Uses RUM data to identify which Baseline year to adopt.
• Google Analytics Integration: Export data from Google Analytics and import it into the tool to see a report.
• Netlify Extension: Shows support for different Baseline years and Widely available on sites.
• Browserslist-config-baseline: Configures browserslist targets in Baseline terms.
• ESLint for CSS: Has a use-baseline rule.
• HTML-eslint: Flags HTML elements and attributes that are too new to use in production.
• Stylelint: Officially supports a plugin called stylelint-plugin-use-baseline.
• VS Code Integration: Baseline data directly integrated into hovercards.
• Clearleft and Wix Adoption: Clearleft adopted Baseline Widely available as their default level of support for client work. Wix decided to use Baseline Widely available as their threshold for adopting new web features.
• Angular Framework: From version 20, they will be using Baseline Widely available at the time of release as their supported feature threshold for all new versions.
• Progressive Enhancement: Use Baseline as a way to reduce the number of features you need to make a call on whether they are ok to use as a progressive enhancement or even with a polyfill.
• text-wrap: balance Example: A feature that can be used as a progressive enhancement.
• New CSS and UI Features:
  • @property: Now Baseline Newly available.
  • CSS light-dark() function: Now Baseline Newly available.
  • Relative color syntax: Lets you dynamically adjust color values in your CSS.
  • Style container queries: Will become Widely available in August 2025.
• Interop 2025 Features:
  • sideways-rl and sideways-lr values for the CSS writing-mode property: Now Baseline Newly available.
  • Anchor positioning: Shipped in Chrome 125 and is now part of Interop 2025.
  • Largest Contentful Paint (LCP) and Interaction to Next Paint (INP) metrics: By implementing the LargestContentfulPaint API and the Event Timing API across browsers.
  • element: Has been included in Interop 2025 as there are a number of features that make disclosure widgets with more useful.
  • @scope rule: Lets you limit the reach of your selectors.
  • scrollend: With the scrollend event, the browser does all this difficult evaluation for you.
  • View transitions: Are part of Interop 2025.

Conclusion

The presentation highlights the advancements in Chrome and the web platform, focusing on AI integration, performance improvements, and enhanced UI capabilities. The emphasis on Baseline and Interop projects aims to provide developers with clarity and confidence in using new web features, ensuring cross-browser compatibility and a more predictable development experience. The availability of various tools and APIs empowers developers to build faster, more interactive, and more accessible web experiences.