What's new in Chrome

Key Concepts

• Interop Project: A collaborative effort among browser vendors to address compatibility issues.
• Baseline Project: Provides clarity on feature support across browsers, categorized as limited, newly available, and widely available.
• Client-side AI: Running AI models directly in the browser for benefits like low latency and enhanced privacy.
• Built-in AI APIs: Chrome's APIs for common AI tasks, designed for efficiency and ease of use.
• Multimodal Input: The ability to process various types of data (text, images, audio) in AI models.
• Core Web Vitals: Key metrics for measuring and optimizing web page experience (LCP, INP, CLS).
• Speculation Rules API: Allows prefetching and prerendering pages for faster navigation.
• Compression Dictionary Transport: A standard for differentially serving static assets, reducing data transfer.
• UI Primitives: Fundamental building blocks for UI components like carousels and select boxes.
• Passkeys: A passwordless authentication method.
• Autofill: Automatically filling in form fields with saved information.

1. Addressing Clarity and Compatibility

• The Problem: Developers lack confidence due to inconsistent implementation of web standards across different browsers.
• Interop Project: Aims to fix compatibility issues by focusing on key areas identified by developers. Target areas for 2025 include anchor positioning, view transitions, and the navigation API.
• Baseline Project: Provides clarity on feature support across browsers, categorized into:
  • Limited Availability: Feature in only one or two browsers, requires polyfills.
  • Newly Available: Feature interoperable across major browser engines, ready for planning.
  • Widely Available: Feature supported for 30 months, safe for production use.
• Progress: Since 2020, 197 features have become widely available (e.g., streams, broadcast channels, :is pseudo-selectors, dialogue element). Expecting 150+ more in the next 30 months (e.g., popover, :has(), container queries, HTTP/3).
• Web Platform Dashboard (webstatus.dev): Shows Baseline status for features.
• Integration: Baseline data is used on web.dev, MDN (integrated across 70% of pages), and in tools like RUMvision.
• RUMvision Example: By combining Baseline data with real user monitoring, they found customers were serving unnecessary polyfills to 97% of their users.
• Linters: ESLint (with CSS lint and HTML ESLint plugins) and Stylelint have Baseline support to warn developers about using features beyond the target Baseline.
• IDE Integration: Baseline is available in Visual Studio Code and coming to WebStorm, showing feature availability on hover.

2. AI on the Web

• Web as a Platform for AI: The web offers instant access to AI-enhanced experiences via links.
• Client-side AI Benefits: Zero network latency, cost-effectiveness, enhanced privacy, offline functionality.
• Technologies: WebAssembly and WebGPU enable libraries like MediaPipe and transformer.js to access hardware directly for fast model execution.
• Built-in AI APIs:
  • Summarization API (Chrome 138): Compiles long text into concise summaries (paragraphs, bullet points, markdown).
  • Language Detector and Translator API (Chrome 138): Detects source language and translates into 39+ languages.
  • Prompt API (available in Chrome extensions): Sends natural language requests to Gemini.
• Adobe Acrobat Extension Example: Uses the Prompt API and multimodal support to analyze historic stock certificates, extract text summaries, and enable users to chat with an AI assistant.
• Multimodal Prompt API: Adds image and audio input to the Prompt API for analyzing and extracting data from various sources.
• New APIs (Origin Trials):
  • Proofreader API: Labels errors in text, explains them, and offers corrections.
  • Writer API: Generates content matching a topic and context.
  • Rewriter API: Adjusts the tone and length of content.
• Hybrid Approach (Firebase): The Firebase Web SDK can detect device capabilities and choose between client-side models or Gemini on the server.

3. Chrome DevTools Enhancements

• AI Assistance: Gemini integration for styling, network issues, and performance advice.
• Styling: AI assistance for debugging styling issues, suggesting fixes, and applying them directly to the source code.
• Network Panel: Gemini integration for explaining network request issues, security headers, and debugging CDN and CORS issues.
• Performance Panel: Gemini integration for identifying slow-running functions and providing actionable insights.
• Core Web Vitals: All Core Web Vitals information in one place, with real Chrome user experience data.
• Insights Tab: Powered by Lighthouse, providing guided insights for LCP, INP, and CLS issues.
• Summary Tab: Breakdown of first and third-party contributions to slowness.

4. Web Performance Improvements

• Core Web Vitals Impact: Saved 30,000 years of time surfing the web in 2024. Good LCP increased by 8%, good INP by 12%.
• LCP Subparts: Breaks down LCP time into phases for bottleneck identification.
• Speculation Rules API: 8% of page loads benefit from prefetching and prerendering.
• Cloudflare Speed Brain: Uses speculative loading, showing a 45% improvement in LCP for prefetched sites.
• Scheduler.yield API: Improves INP by pausing long tasks. 6% of website page loads use this API.
• Long Animation Frames (LoAF) API: Identifies visual jank on the page.
• Compression Dictionary Transport: Reduces data transfer by differentially serving static assets. Google Search reduced HTML payload by 23% and improved LCP by almost 2%.

5. UI Improvements

• View Transitions: google.com added view transitions to power the UI for AI mode in search.
• New UI Primitives:
  • Carousels: Built with CSS using scroll snap, scroll button, and scroll marker.
  • Stylable Select: CSS stylable select element with rich HTML content.
• Temu Example: User session duration increased by 10% and user page views increased by 15% after launching multi-page application View Transitions API. CPU load reduced by 10-15% with new APIs.

6. User Experience Improvements

• Autofill: Measures the impact of browser autofill on forms.
• Shopify Example: Guest checkouts using Autofill had a 40% higher checkout completion rate.
• Google Password Manager: Automated password change feature.
• Passkeys: Synchronized and saved across platforms. Websites can automatically request passkey creation.
• New API: Allows asking the user's Password Manager to create a passkey automatically.

Synthesis/Conclusion

The presentation highlights Chrome's efforts to enhance the web by addressing clarity and compatibility issues, integrating AI capabilities, improving DevTools, boosting web performance, and refining UI and user experience. The focus is on empowering developers with tools and APIs to build faster, more accessible, and more engaging web experiences. Key initiatives include the Interop and Baseline projects, built-in AI APIs, Core Web Vitals optimization, and new UI primitives. The ultimate goal is to make the web more consistent, seamless, and enjoyable for users.