Articles
Optimize long tasks
You've been told "don't block the main thread" and "break up your long tasks", but what does it mean to do those things?
Setting up a payment method
A payment transaction using Web Payments starts with the discovery of your payment app. Learn how to set up a payment method and get your payment app ready for merchants and customers to make payments.
Apply effects to images with the CSS mask-image property
CSS masking gives you the option of using an image as a mask layer. This means that you can use an image, an SVG, or a gradient as your mask, to create interesting effects without an image editor.
Baseline 2024: more tools to help web developers
web-features dataset, Web Platform Status dashboard, Baseline status widget and more! Take a look back on Baseline in 2024.
Prefetch resources to speed up future navigations
Learn about rel=prefetch resource hint and how to use it.
Lazy loading video
This post explains lazy loading and the options available to you to lazy loading video.
Preload modules
Module preload offers a way of declaratively loading JavaScript modules ahead of time.
Measure browser autofill on your forms
To optimize user experience, it's essential to understand how users interact with your forms. Browser autofill plays a significant role in this process. Learn how to collect and analyze data on how users use autofill in your forms.
Part 1: Client-side AI to combat online toxicity
"Protect your users and create a safer online environment with toxicity detection. In part one, we share the context you need to deploy AI to mitigate toxicity at its source: users' keyboards."
Part 2: Build client-side AI toxicity detection
Toxicity detection protects your users and creates a safer online environment. In part two, we learn how to build a client-side AI tool to detect and mitigate toxicity at its source.
Total Blocking Time (TBT)
This post describes the Total Blocking Time (TBT) metric and explains how to measure it
Web Vitals
Essential metrics for a healthy site
Getting started with measuring Web Vitals
Learn how to measure your site's Web Vitals in both real-world and lab environments.
The most effective ways to improve Core Web Vitals
A collection of best practices that Chrome has identified as the biggest opportunities to optimize web performance and improve Core Web Vitals
Optimize Largest Contentful Paint
A step-by-step guide on how to break down LCP and identify key areas to improve.
The CSS content-visibility property is now Baseline Newly available
The CSS content-visibility property is now Baseline Newly available.
Compare LLM capability with summarization
Evaluate the results of different models and prompts with the LLM as a judge technique. Instead of relying on human judgment, model validation is delegated to another LLM.
How the Core Web Vitals metrics thresholds were defined
The research and methodology behind Core Web Vitals thresholds
Core Web Vitals workflows with Google tools
With the growing importance of Core Web Vitals, site owners and developers increasingly focus on performance and key user experiences. Google provides many tools to help evaluate, optimize, and monitor pages, but users are often confused by the different sources of data and how to use them effectively. This guide proposes a workflow combining several tools and clarifies where and how they make sense along the development process.
Manually diagnose slow interactions in the lab
You've looked through your field data, and it turns out that you have some slow interactions. The next step is to learn more about how to manually test those interactions, and identify the causes behind them.
Baseline
This article explains the origin story of Baseline, Google's involvement, and the ownership of the WebDX Community Group.
Back/forward cache
Learn to optimize your pages for instant loads when using the browser's back and forward buttons.
CSS nesting improves with CSSNestedDeclarations
CSS nesting is getting a whole lot better!
First Input Delay (FID)
This post introduces the First Input Delay (FID) metric and explains how to measure it
Debug performance in the field
Learn how to attribute your performance data with debug information to help you identify and fix real-user issues with analytics
Benchmarking the performance of CSS @property
What impact does @property have on the performance of your CSS?
Improve performance and UX for client-side AI
Discover the benefits of client-side AI, including low latency, reduced server-side costs, no API key requirements, increased user privacy, and offline access.
Correlating Core Web Vitals and ad revenue with Google tools
Learn how you can use Google tools to help correlate your Core Web Vitals with ad revenue.
It's time to lazy-load offscreen iframes!
This post covers the loading attribute and how to use it to control the loading of iframes.
Storage for the web
There are many different options for storing data in the browser. Which one is best for your needs?
Building multiple Progressive Web Apps on the same domain
Explore the recommended and not recommended ways of building multiple PWAs reusing the same domain with their pros and cons.
The Web Push Protocol
A step-by-step interactive tutorial that shows you how to build a server that manages push notification subscriptions and sends web push protocol requests to a push service.
What makes a good Progressive Web App?
What makes a good, or great Progressive Web App?
How Chrome handles updates to the web app manifest
What it takes to change icons, shortcuts, colors, and other metadata in your web app manifest for your PWA.
What does it take to be installable?
Progressive Web App installability criteria.
Add a web app manifest
The web app manifest is a simple JSON file that tells the browser how your web app should behave.
Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)
Learn how to deploy a CSP based on script nonces or hashes as a defense-in-depth against cross-site scripting.
Accessing hardware devices on the web
This article helps Web developers pick the right hardware API based on a given device.
Allow passkey reuse across your sites with Related Origin Requests
Learn how to use Related Origin Requests to allow passkey reuse across your sites.
Browser-level image lazy loading for the web
This post covers the loading attribute and how it can be used to control the loading of images.
Choose the right image format
Selecting the right image format is the first step in delivering optimized images on your website. This post helps you to make the right choice.
Custom metrics
Custom metrics let you measure and optimize aspects of your site's experience that are unique to your site.
Measure and debug performance with Google Analytics 4 and BigQuery
Learn how to send Web Vitals data to Google Analytics 4 properties and export the data for analysis in BigQuery and Looker Studio.
Web permissions best practices
This guide outlines best practices for websites to follow when asking users for permission to access sensitive capabilities (such as camera, microphone, and location) to minimize unnecessary prompts and blocked access.
Best practices for cookie notices
Learn about how cookie notices affect performance, performance measurement, and UX.
Customize media notifications and playback controls with the Media Session API
Web developers can customize media notifications and respond to media related events such as seeking or track changing with the Media Session API.
Find slow interactions in the field
Before you can reproduce slow interactions in the lab to optimize your website's Interaction to Next Paint, you'll need to lean on field data to find them. Learn how to do just that in this guide.
Using tabindex
Use the tabindex attribute to explicitly set an element's tab position.
Time to First Byte (TTFB)
This post introduces the Time to First Byte (TTFB) metric and explains how to measure it.
Understand LLM sizes
Take a look at a few real-world LLMs and the practical implications of different model sizes.
Practical prompt engineering for smaller LLMs
Learn how to adjust your prompts to achieve your preferred results across different LLMs, models, and model sizes.
Optimize Time to First Byte
Learn how to optimize for the Time to First Byte metric.
Interaction to Next Paint (INP)
This post introduces the Interaction to Next Paint (INP) metric and explains how it works, how to measure it, and offers suggestions on how to improve it.
CSS color-scheme-dependent colors with light-dark()
description: Define colors that react to the used color-scheme with the light-dark() function.
WebAssembly performance patterns for web apps
In this guide, aimed at web developers who want to benefit from WebAssembly, you'll learn how to make use of Wasm to outsource CPU-intensive tasks with the help of a running example.
CSS animated grid layouts
In CSS Grid, the `grid-template-columns` and `grid-template-rows` properties allow you to define line names and track sizing of grid columns and rows, respectively. Supporting interpolation for these properties allows grid layouts to smoothly transition between states, instead of snapping at the halfway point of an animation or transition.
Play the Chrome dino game with your gamepad
Learn to control web games with the Gamepad API.
The inert attribute
The inert property is a global HTML attribute that simplifies how to remove and restore user input events for an element, including focus events and events from assistive technologies.
Meet the Web.dev AI Team
Meet the tech writers and developer relations team.
Upgrade your site search: Contextual answers with generative AI
There are numerous ethical considerations when using AI tools and generating new content.
Ethics and AI
There are numerous ethical considerations when using AI tools and generating new content.
What is Artificial Intelligence?
The acronym AI is often used interchangeably to represent various types of technologies which make up the AI field.
Determine the passkey provider with AAGUID
Relying parties can determine where the passkey comes from by examining AAGUID. Find out how it works.
Compiling to and optimizing Wasm with Binaryen
Using the example of a synthetic toy language called ExampleScript, learn how to write and optimize WebAssembly modules in JavaScript using the Binaryen.js API.
The <model-viewer> web component
The <model-viewer> web component lets you use 3D models on a web page declaratively.
Capture audio and video in HTML5
Audio/Video capture has been the "Holy Grail" of web development for a long time. For many years we've had to rely on browser plugins ( Flash or Silverlight ) to get the job done. Come on! HTML5 to the rescue. It might not be apparent, but the rise
userVerification deep dive
Learn how to use `userVerification` in WebAuthn
Why is CrUX data different from my RUM data?
Learn about reasons why RUM data can show different Core Web Vitals numbers from CrUX.
Accessibility for web developers
It's important to build sites that are inclusive and accessible to everyone. There are at least six key areas of disability we can optimize for: visual, hearing, mobility, cognition, speech and neural.
Load Third-Party JavaScript
Third-party scripts provide a wide range of useful features, making the web more dynamic. Learn how to optimize the loading of third-party scripts to reduce their impact on performance.
Largest Contentful Paint (LCP)
This post introduces the Largest Contentful Paint (LCP) metric and explains how to measure it
Prevent creation of a new passkey if one already exists
Learn how to prevent creating a new passkey if one already exists in the user's password manager.
Work with IndexedDB
A guide to the basics of IndexedDB.
5 CSS snippets every front-end developer should know in 2024
Toolbelt worthy, powerful, and stable CSS you can use today.
What are the parts of a URL?
What's the difference between a host, site and origin? What is an eTLD+1? This article explains.
Discoverable credentials deep dive
Learn what are discoverable credentials and how to build user experiences that suit your use case.
Rendering performance
Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!
ResizeObserver: it's like document.onresize for elements
`ResizeObserver` notifies you when an element's content rectangle changes size so that you can react accordingly.
Optimize the encoding and transfer size of text-based assets
Next to eliminating unnecessary resource downloads, the best thing you can do to improve page load speed is to minimize the overall download size by optimizing and compressing the remaining resources.
OffscreenCanvas—speed up your canvas operations with a web worker
This document explains how you can use the OffscreenCanvas API to achieve performance improvements when rendering graphics in your web app.
First Contentful Paint (FCP)
This post introduces the First Contentful Paint (FCP) metric and explains how to measure it
Content delivery networks (CDNs)
This article provides a comprehensive overview of content delivery networks (CDNs). In addition, it explains how to choose, configure, and optimize a CDN setup.
What makes for a good sign-out experience?
Practical developer guidance about what to do when a user logs out of the website.
Time to Interactive (TTI)
This post introduces the Time to Interactive (TTI) metric and explains how to measure it
Optimize resource loading with the Fetch Priority API
The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals.
The :user-valid and :user-invalid pseudo-classes
About the :user-valid and :user-invalid pseudo-classes and how to use them to improve the user experience of input validation.
Optimize Core Web Vitals for business decision makers
Learn how business decision makers and non-developers can improve Core Web Vitals.
The nuances of base64 encoding strings in JavaScript
Understand and avoid common problems when applying base64 encoding and decoding to strings.
CSS subgrid
Subgrid enables grid shareability, allowing nested grids to align to ancestors and siblings.
Effectively loading ads without impacting page speed
In today's digital world, online advertising is a critical part of the free web we all enjoy. However, poorly implemented ads can lead to a slower browsing experience, frustrating users and diminishing engagement. Learn how to effectively load ads without impacting your page speed, ensuring a seamless user experience, and maximizing revenue opportunities for website owners.
Four common types of code coverage
Learn what code coverage is and discover four common ways to measure it.
To test or not to test, a technical perspective
Determine what you need to test and what you can rule out.
Defining test cases and priorities
Determine what to test, define your test cases, and prioritize.
User-centric performance metrics
User-centric performance metrics are a critical tool in understanding and improving the experience of your site in a way that benefits real users.
Preload responsive images
Learn about new and exciting possibilities for preloading responsive images to ensure great user experience.
Adapting typography to user preferences with CSS
A method to adapt a font to your users' preferences, so they're maximally comfortable reading your content.
Pyramid or Crab? Find a testing strategy that fits
Discover how to combine different testing types into a reasonable strategy that matches your project.
Three common types of test automation
Let's start with the basics! Exploring the two general testing modes and three common types of test automation.
Eliminating Unnecessary Downloads
You should audit your resources periodically to ensure that each resource is helping deliver a better user experience.
What is WebAssembly and where did it come from?
An introduction to WebAssembly (sometimes abbreviated Wasm), the portable binary-code format and corresponding text format for executable programs as well as software interfaces for facilitating interactions between such programs and their host environment.
Compiling mkbitmap to WebAssembly
The mkbitmap C program reads an image and applies one or more of the following operations to it, in this order: inversion, highpass filtering, scaling, and thresholding. Each operation can be individually controlled and turned on or off. This article shows how to compile mkbitmap to WebAssembly.
Securely hosting user data in modern web applications
How to securely display user-controlled content on web applications.
The origin private file system
The File System Standard introduces an origin private file system (OPFS) as a storage endpoint private to the origin of the page and not visible to the user that provides optional access to a special kind of file that is highly optimized for
Deploying AVIF for more responsive websites
An overview of how AVIF is adopted in the ecosystem, and what kind of performance and quality benefits developers can expect from AVIF for still images and animations.
Optimize Interaction to Next Paint
Learn how to optimize your website's Interaction to Next Paint.
Baseline features you can use today
Learn about just some of the features that are part of Baseline.
Client-side rendering of HTML and interactivity
Rendering HTML with JavaScript is different than rendering HTML that's sent by the server—and that can affect performance. Learn the difference in this guide, and what you can do to preserve your website's rendering performance—especially where interactions are concerned.
Optimize input delay
Input delay can contribute significantly to total interaction latency and negatively affect your page's INP. In this guide, learn what input delay is, and how you can reduce it for faster interactivity.
How large DOM sizes affect interactivity, and what you can do about it
Large DOM sizes can be a factor in whether interactions are fast or not. Learn more about the relationship between DOM size and INP, and what you can do to reduce DOM size and other ways to limit rendering work when your page has lots of DOM elements.
Script evaluation and long tasks
When loading scripts, it takes time for the browser to evaluate them prior to execution, which can cause long tasks. Learn how script evaluation works, and what you can do to keep it from causing long tasks during page load.
Optimize Cumulative Layout Shift
Cumulative Layout Shift (CLS) is a metric that quantifies how often users experience sudden shifts in page content. In this guide, we'll cover optimizing common causes of CLS such as images and iframes without dimensions or dynamic content.
Using the Web Vitals extension to debug Core Web Vitals issues
The Web Vitals extension now shows you more debugging information to help you identify the root causes of Core Web Vitals issues.
Build in-browser WordPress experiences with WordPress Playground and WebAssembly
The full WordPress powered by PHP running solely in the browser with WebAssembly
Cumulative Layout Shift (CLS)
This post introduces the Cumulative Layout Shift (CLS) metric and explains how to measure it.
New functionality for developers—brought to you by WebAssembly
A showcase of tools now available on the web thanks to WebAssembly.
What are source maps?
Improve web debugging experience with source maps.
PWAs in app stores
Progressive Web Apps can be submitted to app stores like the Android Play Store or the Microsoft Store and more.
6 CSS snippets every front-end developer should know in 2023
Toolbelt worthy, powerful, and stable CSS you can use today.
Trigonometric functions in CSS
Calculate the sine, cosine, tangent, and more in CSS.
Perform efficient per-video-frame operations on video with requestVideoFrameCallback()
The requestVideoFrameCallback() method allows web authors to register a callback that runs in the rendering steps when a new video frame is sent to the compositor.
GDE community highlight: Lars Knudsen
One of a series of interviews with members of the Google Developers Experts (GDE) program.
New patterns for media apps
This blog post announces a new collection of patterns for media apps.
Speedy CSS Tip! Animated Gradient Text
Let's make that animated gradient text effect with scoped custom properties and background-clip Hop over to CodePen and create a new pen. Create the markup for your text. Let's use a header with the word "Speedy": Then, let's give our body a darker
Building Chrometober!
How the scrolling book came to life for sharing fun and frightening tips and tricks this Chrometober.
Building a tooltip component
A foundational overview of how to build a color-adaptive and accessible tooltip custom element.
Sign in with a passkey through form autofill
Passkeys make a website's user accounts safer, simpler, easier to use and passwordless. This article discusses how how a passwordless sign-in with passkeys should be designed while accommodating existing password users.
Create a passkey for passwordless logins
Passkeys make a website's user accounts safer, simpler, easier to use and passwordless. This article discusses how to allow users to create passkeys for your website.
Building a floating action button (FAB) component
A foundational overview of how to build color-adaptive, responsive, and accessible FAB components.
Best practices for fonts
Learn about how to optimize web fonts for Core Web Vitals.
Testing Web Design Color Contrast
An overview of three tools and techniques for testing and verifying accessible color contrast of your design.
GDE community highlight: Alba Silvente Fuentes
One of a series of interviews with members of the Google Developers Experts (GDE) program.
Speedy CSS Tip! Animated Loader
Let's make an animated CSS loader with scoped custom properties and animation-timing-function Hop over to CodePen and create a new pen. Create the markup for our loader. Note the use of inline custom properties: You can also use a generator ( Pug )
Building the main navigation for a website
This tutorial describes how to build an accessible main navigation of a website. You learn about semantic HTML, accessibility, and how using ARIA attributes can sometimes do more harm than good.
Is it :modal?
This handy CSS pseudo-selector gives you a way to select elements that are modal.
Best practices for tags and tag managers
Optimize tags and tag managers for Core Web Vitals.
Creative list styling
A look at some useful and creative ways to style a list.
Building a crooked grid illusion
A fun exploration of ways to recreate an optical illusion with CSS.
How Nordhealth uses Custom Properties in Web Components
The benefits of using Custom Properties in design systems and component libraries.
Finer grained control over CSS transforms with individual transform properties
Learn how you can use the individual translate, rotate, and scale CSS properties to approach transforms in an intuitive way.
CSS border animations
Looking at several ways to animate a border in CSS
New patterns
Animations, theming, components, and more layout patterns are live and ready to help kick start or inspire your UI and UX.
How the BBC is rolling out HSTS for better security and performance.
The BBC is rolling out HSTS for their website to improve security and performance. Find out what it means, and how HSTS can help you.
Why lab and field data can be different (and what to do about it)
Learn why tools that monitor Core Web Vitals metrics may report different numbers, and how to interpret those differences.
A win-win situation
GDE Enrique Fernandez Guerra on open sourcing his NGO HelpDev.
The end of Internet Explorer
What ending support for Internet Explorer meant for the customers and developers at Maersk.com.
Farewell to HTML5Rocks
So long HTML5Rocks, it's been nice knowing you.
First-party cookie recipes
Learn how to set first-party cookies to ensure security, cross-browser compatibility, and minimize chances of breakage once third-party cookies are phased out.
Synchronize audio and video playback on the web
The Web Audio API makes it possible to properly achieve AV synchronization.
Use conic gradients to create a cool border
Conic gradients can be used to create some interesting effects, such as this nice border example. This CodePen created by Adam Argyle, originally shared via this tweet on Twitter, shows how to use a conic gradient to create a border. Terry Mun
The difference between JavaScript libraries and frameworks
Understand the differences between frameworks and libraries in the context of a client-side JavaScript environment.
Choose a JavaScript library or framework
Understand the decisions around using a JavaScript library or framework.
Implement error handling when using the Fetch API
Catching errors when working with the Fetch API.
The Front-End Developer's Guide to the Terminal
This resource can help you quickly find your way around the terminal.
An API for fast, beautiful web fonts
An update on the Google Fonts CSS API—how it works, how to use it, and how it can efficiently deliver your web fonts.
GOV.UK drops jQuery from their front end.
GOV.UK dropped their jQuery dependency from their front end. You'll never guess what happened. (Yes, you will.)
Building a button component
A foundational overview of how to build color-adaptive, responsive, and accessible components.
Don't fight the browser preload scanner
Find out what the browser preload scanner is, how it helps performance, and how you can stay out of its way.
Best practices for measuring Web Vitals in the field
How to measure Web Vitals with your current analytics tool
Bridging the gap
Making it easier to build for the web.
Finding courage and inspiration in the developer community
Web Google Developers Experts on how mentoring programs empowered them to become leaders.
Variable fonts in real life
Sharing a practical guide to variable fonts, with lots of examples.
Quickly create nice CSS gradients with the CSS Gradient Creator
This tool by Josh W Comeau makes it super simple to create nice looking gradients.
Deep dive into top web developer pain points
A collection of insights on the top pain points, collected from a number of one to one conversations with web developers.
Make your site picture perfect with images.tooling.report
Check out the state of image tooling.
Global and local variable scope
Learn about scope and how it works in JavaScript.
Building a dialog component
A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the `` element.
Debug media playback errors on the web
Learn how to debug media playback errors on the web.
GDE community highlight: Nishu Goel
One of a series of interviews with members of the Google Developers Experts (GDE) program.
The performance effects of too much lazy loading
Eagerly loading images within the initial viewport—while liberally lazy loading the rest—can improve Web Vitals while loading fewer bytes.
Building a loading bar component
A foundational overview of how to build a color adaptive and accessible loading bar with the `` element.
Save Credentials from Forms
Keep your registration and sign-in forms as simple as possible. Save credentials from sign-in forms so users won't have to sign in again when they return. To store user credentials from forms: Before moving forward, check if your form includes
Chrome and Firefox soon to reach major version 100
User-Agent string changes, the strategies that Chrome and Firefox are taking to mitigate the impact, and how you can help.
Building an adaptive favicon
A foundational overview of how to build an adaptive favicon.
Drawing to canvas in Emscripten
Learn how to render 2D graphics to a canvas on the web from WebAssembly with Emscripten.
Improve security and privacy by updating HTTP Cache
Forgetting or misusing the Cache-Control header might negatively impact the security of your website and your users' privacy. Get recommendations for high-value websites.
Additional HTML elements
Essential metrics for a healthy site
Porting USB applications to the web. Part 2: gPhoto2
Learn how gPhoto2 was ported to WebAssembly to control external cameras over USB from a web app.
Network Error Logging (NEL)
Use Network Error Logging (NEL) to collect client-side network errors.
WebAssembly feature detection
Learn how to use the newest WebAssembly features while supporting users across all browsers.
Porting USB applications to the web. Part 1: libusb
Learn how code that interacts with external devices can be ported to the web with WebAssembly and Fugu APIs.
Building a theme switch component
A foundational overview of how to build an adaptive and accessible theme switch component.
Embedding JavaScript snippets in C++ with Emscripten
Learn how to embed JavaScript code in your WebAssembly library to communicate with the outside world.
PWAs on Oculus Quest 2
The Oculus Quest 2 is a virtual reality (VR) headset created by Oculus, a division of Meta. Developers can now build and distribute 2D and 3D Progressive Web Apps (PWA) that take advantage of Oculus Quest 2's multitasking feature. This article describes the experience and how to build, sideload, and test your PWA on the Oculus Quest 2.
Building Designcember
A peek into the process and tools used to build the holiday-calendar-style experience of Designcember.
Designcember Calculator
A skeuomorphic attempt at recreating a solar calculator on the web that makes use of the ambient light sensor and the window controls overlay feature.
Deep-copying in JavaScript using structuredClone
For the longest time, you had to resort to workarounds and libraries to create a deep copy of a JavaScript value. The Platform now ships with `structuredClone()`, a built-in function for deep-copying.
Building a toast component
A foundational overview of how to build an adaptive and accessible toast component.
The UI fund
Announcing the UI fund from Chrome, designed to provide grants for people who work on design tools, CSS, and HTML.
Building a 3D game menu component
A foundational overview of how to build a responsive, adaptive, and accessible 3D game menu.
Lighthouse user flows
Try out a new Lighthouse API to measure performance and best practices throughout a user flow.
Everything announced at Chrome Dev Summit 2021
A roundup of all the key announcements from the 2021 Chrome Dev Summit, with the links you need to find out more.
What's new in PageSpeed Insights
Learn about the latest in PageSpeed Insights to help you better measure and optimize your page and site quality.
Towards an animation smoothness metric
Learn about measuring animations, how to think about animation frames, and overall page smoothness.
Photoshop's journey to the web
Over the last three years, Chrome has been working to empower web applications that want to push the boundaries of what's possible in the browser. One such web application has been Photoshop. The idea of running software as complex as Photoshop directly in the browser would have been hard to imagine just a few years ago. However, by using various new web technologies, Adobe has now brought a public beta of Photoshop to the web.
Building a multi-select component
A foundational overview of how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences.
How to assess loading performance in the field with Navigation Timing and Resource Timing
Learn the basics of using the Navigation and Resource Timing APIs to assess loading performance in the field.
Safe DOM manipulation with the Sanitizer API
The new Sanitizer API aims to build a robust processor for arbitrary strings to be safely inserted into a page. This article introduces the API, and explains its usage.
Best practices for using third-party embeds
This document discusses performance best practices that you can use when loading third-party embeds, efficient loading techniques and the Layout Shift Terminator tool that helps reduce layout shifts for popular embeds.
How SPA architectures affect Core Web Vitals
Answers to common questions about SPAs, Core Web Vitals, and Google's plan to address current measurement limitations.
JavaScript eventing deep dive
preventDefault and stopPropagation: when to use which and what exactly each method does. JavaScript event handling is often straightforward. This is especially true when dealing with a simple (relatively flat) HTML structure. Things get a bit more
Bundling non-JavaScript resources
Learn how to import and bundle various types of assets from JavaScript in a way that works both in browsers and bundlers.
Building a split-button component
A foundational overview of how to build an accessible split-button component.
Using CSS Module Scripts to import stylesheets
Learn how to use CSS module scripts to import CSS stylesheets using the same syntax as JavaScript modules.
CSS accent-color
Bring your brand color to built-in HTML form inputs with one line of code.
Building a switch component
A foundational overview of how to build a responsive and accessible switch component.
User preference media features client hints headers
A set of client hint headers allows sites to obtain the user's media preferences optionally at request time, allowing servers to inline the right CSS for performance reasons. CSS media queries, and specifically user preference media features like
Building a breadcrumbs component
A foundational overview of how to build a responsive and accessible breadcrumbs component for users to navigate your site.
Using WebAssembly threads from C, C++ and Rust
Learn how to bring multithreaded applications written in other languages to WebAssembly.
PWA with offline streaming
Building a PWA with offline streaming has its challenges. In this article you will learn about the APIs and techniques that provide users with a high-quality offline media experience.
Media encryption
Learn digital rights management concepts, and the commands needed to get from a raw mov file to encrypted media packaged for MPEG-DASH or HLS using both Clear Key or Widevine encryption.
Media frameworks
Media frameworks come in both the proprietary and open-source variety, and at their core are a set of APIs that support audio and/or video playback for various container formats and transmission protocols.
Media streaming basics
Media streaming is the method for continuously delivering multimedia content from a server where the content has been split into individual chunks of data that can be joined back together during playback in a specific order through a range request using protocols such as DASH and HLS.
Find your way with field data in the Web Vitals extension update
The Web Vitals extension now shows you where your local experiences are in relation to real user experiences in the field.
CSS size-adjust for @font-face
As a web font loads, you can now adjust its scale to normalize the document font sizes and prevent layout shift when switching between fonts
Building a color scheme
A foundational overview of how to establish a dynamic and configurable color scheme
Using AVIF to compress images on your site
Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Instead of a "one-size-fits-all" approach to images, serve different image sizes to different devices.
CSS for Web Vitals
This article covers CSS-related techniques for optimizing Web Vitals.
Evolving Cumulative Layout Shift in web tooling
Starting today, a change to CLS has been rolled out across a number of Chrome's web tooling surfaces including Lighthouse, PageSpeed Insights, and Chrome UX Report.
New CSS functional pseudo-class selectors :is() and :where()
These seemingly small additions to CSS selector syntax are going to have a big impact.
New Progressive Web App training now available
A new, six part Progressive Web App training is now available, complete with a new series of codelabs to teach you how to build reliable, installable, and capable PWAs.
The new responsive: Web design in a component-driven world
User-preference based media features, container queries, and media queries for new screen types, such as foldable screens, will enable us to usehr in a new era of responsive web design.
Migrate to User-Agent Client Hints
Strategies to migrate your site from relying on the user-agent string to the new User-Agent Client Hints.
Excalidraw and Fugu: Improving Core User Journeys
A write-up of Thomas Steiner's Google I/O 2021 talk titled Excalidraw and Fugu: Improving Core User Journeys
Security headers quick reference
This article lists the most important security headers you can use to protect your website. Use it to understand web-based security features, learn how to implement them on your website, and as a reference for when you need a reminder.
ES modules in service workers
Service workers can use static imports of ES modules to bring in extra code, as an alternative to importScripts().
Building a media scroller component
A foundational overview of how to build a responsive horizontal scrollview for TVs, phones, desktops, etc.
Optimizing Web Vitals using Lighthouse
Today, we will cover new tooling features in Lighthouse, PageSpeed and DevTools to help identify how your site can improve on the Web Vitals.
Using asynchronous web APIs from WebAssembly
Learn how to invoke asynchronous web APIs when compiling traditionally synchronous languages to WebAssembly.
Keeping third-party scripts under control
Third-party scripts, or "tags" can be a source of performance problems on your site, and therefore a target for optimization. However, before you start optimizing the tags you have added, make sure that you are not optimizing tags you don't even need. This article shows you how to assess requests for new tags, and manage and review existing ones.
Customize the window controls overlay of your PWA's title bar
With the Window Controls Overlay feature, developers can customize the title bar of installed PWAs so that their PWAs feel more like apps.
Breaking down barriers using the DataTransfer API
The DataTransfer object holds data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. This article explains what you can do with the DataTransfer API.
Fill OTP forms within cross-origin iframes with WebOTP API
WebOTP API can now receive an OTP from within an iframe.
Building split text animations
A foundational overview of how to build split letter and word animations.
Evolving the CLS metric
Plans for improving the CLS metric to be more fair to long-lived pages.
Web Developer Satisfaction
Web Developer Satisfaction is a Google project to gather information about the needs of web developers. The goal is a more reliable, predictable and interoperable web platform, enabling developers to invest in and trust it, and adopt and use new features to grow the platform and their business.
Building a Settings component
A foundational overview of how to build a settings component of sliders and checkboxes.
Debug layout shifts
Learn how to identify and fix layout shifts.
JavaScript: What is the meaning of this?
Figuring out the value of `this` can be tricky in JavaScript, here's how to do it…
Programming the mini app way
This chapter introduces the way of programming the mini app way.
What are H5 and QuickApp?
This chapter provides background on H5 apps and QuickApp, which are both distinct from mini apps.
What are mini apps?
This chapter introduces the concept of mini apps and provides examples of their look and feel.
Mini app components
This chapter provides details on the components that all mini app platforms make available.
Applying the mini app programming principles to an example project
This chapter shows an example project that follows the "programming the mini app way" approach.
Mini app DevTools
This chapter provides details on the DevTools experience of various mini apps platforms.
Concluding thoughts about mini apps from a web developer
This chapter concludes the mini apps collection with the observation that thinking outside of the box and taking input and inspiration from outside of one's own bubble can definitely help when building a better future on the web..
Other mini app runtime environments
This chapter presents a number of runtime environments for mini apps that are not mobile devices.
Mini app open source projects
This chapter presents a selection of interesting mini app open source projects.
Project structure, lifecycle, and bundling
This chapter covers the project structure, the lifecycle, and the bundling of mini apps.
Mini apps and super apps
This chapter introduces the concept of super apps and presents the major super app providers.
Mini app markup, styling, scripting, and updating
This chapter looks at the mark-up, styling, scripting, and updating options of various mini apps platforms.
Mini app standardization
This chapter introduces the standardization effort that has been started for mini apps.
Streams—The definitive guide
The Streams API allows JavaScript to programmatically access streams of data received over the network and process them as desired.
Building a Tabs component
A foundational overview of how to build a tabs component similar to those found in iOS and Android apps.
A guide to enable cross-origin isolation
Cross-origin isolation enables a web page to use powerful features such as SharedArrayBuffer. This article explains how to enable cross-origin isolation on your website.
Requesting performance isolation with the Origin-Agent-Cluster header
The Origin-Agent-Cluster header cuts off synchronous access to other origins on the same domain, and hints to the browser to give your origin dedicated resources.
The CSS aspect-ratio property
Maintaining aspect ratio within images and elements is now easier to achieve with the new aspect-ratio CSS property.
Best practices for carousels
Learn how to optimize carousels for performance and usability.
WebRTC is now a W3C and IETF standard
A brief overview of the history, architecture, use cases, and future of WebRTC.
Feedback wanted: The road to a better layout shift metric for long-lived pages
Learn about our plans for improving the Cumulative Layout Shift metric and give us feedback.
Use HTTPS for local development
Most of the time, http://localhost behaves like HTTPS for development purposes. However, there are some special cases, such as custom hostnames or using secure cookies across browsers, where you need to explicitly set up your development site to
When to use HTTPS for local development
Using http://localhost for local development is fine most of the time, except in some special cases. This post explains when you need to run your local development site with HTTPS. Also see: How to use HTTPS for local development. In this post,
Building a sidenav component
A foundational overview of how to build a responsive slide out sidenav
Codelab: Building a Sidenav component
Learn how to build a responsive slide out side navigation layout component.
Centering in CSS
Follow 5 centering techniques as they go through a series of tests to see which one is the most resilient to change.
Codelab: Centering in CSS
Learn 5 different centering techniques with CSS.
Love your cache ❤️
First load performance is important, but it's not everything. Users who load your site a second time will use their cache to get access to your content—so it's key to make sure it works well too, both for speed and correctness.
Cross-browser paint worklets and Houdini.how
Learn how to implement cross-browser Houdini Paint API's and explore a world of Houdini worklets with Houdini.how.
Address form best practices codelab
Learn best practices for address forms.
Payment and address form best practices
Maximize conversions by helping your users complete address and payment forms as quickly and easily as possible.
Payment form best practices codelab
Learn best practices for payment forms.
Sign-up form best practices codelab
Use cross-platform browser features to build a simple sign-up form that's secure, accessible, and easy to use.
Automating audits with AutoWebPerf
A new modular tool that enables automatic gathering of performance data from multiple sources.
SMS OTP form best practices
Asking a user to provide an OTP (one-time password) delivered via SMS is a common way to confirm a user's phone number. This post provides you with the best practices to build an SMS OTP form with great user experience.
Sign-up form best practices
Help your users sign up, log in and manage their account details with a minimum of fuss.
Workers overview
How web workers and service workers can improve the performance of your website, and when to use a web worker versus a service worker.
Imperative caching guide
How to communicate window and service worker to perform tasks related to performance, caching and offline.
Two-way communication with service workers
How establish a two-way communication channel between the page and the service worker.
Broadcast updates to pages with service workers
How service workers can proactively communicate with the page to inform about certain events.
Disable mouse acceleration to provide a better FPS gaming experience
Web apps can now disable mouse acceleration when capturing pointer events.
Codelab: Building a Stories component
Learn how to build an experience similar to Instagram Stories on the web.
Building a Stories component
A foundational overview of how to build an experience similar to Instagram Stories on the web.
Browser-level lazy loading for CMSs
This post provides guidance on how to adopt the loading attribute in content management systems.
Schemeful Same-Site
The definition of "same-site" is evolving to include the URL scheme, so links between HTTP and HTTPS versions of a site now count as cross-site requests. Upgrade to HTTPS by default to avoid issues where possible or read on for details of what SameSite attribute values are needed.
Codelab: Build a push notification server
A step-by-step interactive tutorial that shows you how to build a server that manages push notification subscriptions and sends web push protocol requests to a push service.
Codelab: Build a push notification client
A step-by-step interactive tutorial that shows you how to build a client that subscribes the user to push notifications, displays push messages as notifications, and unsubscribes the user from push notifications.
Push notifications overview
An overview of what push notifications are, why you might use them, and how they work.
Measuring offline usage
How to track offline usage of your site so that you can make a case as to why your site needs a better offline experience.
Examples of high-performance CSS animations
Demonstrating how high performance techniques can create complex and beautiful animations.
Signed Exchanges (SXGs)
An SXG is a delivery mechanism that makes it possible to authenticate the origin of a resource independently of how it was delivered.
CSS min(), max(), and clamp()
Min, max, and clamp provide powerful CSS capabilities that enable more responsive styling with fewer liens of code. This post goes over how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS math functions.
Logical layout enhancements with flow-relative shorthands
New logical property shorthands and new inset properties for Chromium.
How to create high-performance CSS animations
To improve the performance of your CSS animations, use the transform and opacity CSS properties as much as possible, and avoid anything that triggers layout or painting.
Why are some animations slow?
Animating well is core to a great web experience. This post explains why certain types of animation perform better than others.
Handling range requests in a service worker
Make sure your service worker knows what to do when a partial response is requested.
Control camera pan, tilt, and zoom
Pan, tilt, and zoom features on cameras are finally controllable on the web.
What are third-party origin trials?
Origin trials are a way to test a new or experimental web platform feature. A third-party origin trial makes it possible for providers of embedded content to try out a new feature across multiple sites. Origin trials are a way to test a new or
Detached window memory leaks
Detached windows are a common type of memory leak that is particularly difficult to find and fix.
Create an offline fallback page
Learn how to create a simple offline experience for your app.
Create interesting image shapes with CSS's clip-path property
Using clipping in CSS can help us move away from everything in our designs looking like a box. By using various basic shapes, or an SVG, you can create a clip path. Then cut away the parts of an element you don't want to show.
Custom bullets with CSS ::marker
Use CSS to to customize the color, size or type of numbers or bullets in `` or `` elements.
Help users change passwords easily by adding a well-known URL for changing passwords
By redirecting requests to /.well-known/change-password to the change password URL, you can let users update their passwords easier than before.
Handling optional payment information with a service worker
Once a web-based payment app is registered, it's ready to accept payment requests from merchants. This article teaches you how to orchestrate a payment transaction from a service worker during runtime.
Orchestrating payment transactions with a service worker
Once a web-based payment app is registered, it's ready to accept payment requests from merchants. This article teaches you how to orchestrate a payment transaction from a service worker during runtime.
ARIA: poison or antidote?
How lying to screen readers cures accessibility, when it doesn't rub salt in it!
Debugging memory leaks in WebAssembly using Emscripten
Learn how to use WebAssembly to bring libraries, written in other languages, to the Web in a safe and idiomatic manner.
content-visibility: the new CSS property that boosts your rendering performance
The CSS content-visibility property enables web content rendering performance benefits by skipping rendering of off-screen content. This article shows you how to use this new CSS property for faster initial load times, using the auto keyword. You will also learn about the CSS Containment Spec and other values for content-visibility that give you more control over how your content renders in the browser.
Unblocking clipboard access
Async Clipboard API simplifies permissions-friendly copy and paste.
Web on Android
Learn how different components can be used to render web content inside Android apps.
Referer and Referrer-Policy best practices
Consider setting a referrer policy of `strict-origin-when-cross-origin`. It retains much of the referrer's usefulness, while mitigating the risk of leaking data cross-origins.
Building a PWA at Google, part 1
What the Bulletin team learned about service workers while developing a PWA.
Performance monitoring with Lighthouse CI
Learn how to setup Lighthouse CI and integrate it into developer workflows.
Designing the user experience of passkeys on Google accounts
Bringing better security and a better user experience to Google accounts.
@property: giving superpowers to CSS variables
Learn how to implement CSS custom properties with semantic typing, a fallback value, and more, directly in your CSS file.
Registering a web-based payment app
Learn how to register a web-based payment app to a customers' browser. You'll also learn how to debug them.
Providing shipping and contact information from an Android payment app
Learn how to modify your Android payment app to provide the user's selected shipping address as well as contact information when the merchant has requested them via the Payment Request API.
Service worker caching and HTTP caching
The pros and cons of using consistent or different expiry logic across the service worker cache and HTTP cache layers.
Web-based payment apps overview
Learn how to adapt your web-based payment app to work with Web Payments and provide a better user experience for customers.
Relating site speed and business metrics
Leverage A/B testing to evaluate the impact of site speed on your business metrics.
Using the Chrome UX Report to look at performance in the field
The Chrome UX Report (informally known as CrUX) is a public dataset of real user experience data on millions of websites. Unlike lab data, CrUX data actually comes from opted-in users in the field.
Handling navigation requests
Navigation requests are requests for HTML made whenever you enter a new URL in the navigation bar, or follow a link on a page. This is where service workers make their biggest impact on performance: by using a service worker to respond without waiting for the network, you can ensure that navigations are reliably fast and resilient.
Pixel-perfect rendering with devicePixelContentBox
Since Chrome 84, ResizeObserver supports a new box measurement called device-pixel-content-box, that measures the element's dimension in physical pixels. This is crucial for rendering pixel-perfect graphics, especially in the context of high-density screens.
Ten modern layouts in one line of CSS
This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.
web.dev LIVE wrap-up
A summary of the major news and updates that were announced during our 3-day online community event, and a reminder about upcoming regional events.
Sign-in form best practices
Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.
Progressively enhance your Progressive Web App
Learn how to progressively enhance your Progressive Web App so that it remains useful on all modern browsers, but delivers an advanced experience on browsers that support new web capabilities like file system access, system clipboard access, contacts retrieval, periodic background sync, screen wake lock, web sharing features, and many more.
Use cross-platform browser features to build a sign-in form
Use cross-platform browser features to build a simple sign-in form that's secure, accessible, and easy to use.
Web developer tools for debugging JavaScript issues in Google Search
How to debug SEO issues on individual pages or across an entire site.
Building resilient search experiences with Workbox
How to implement a resilient search experience with Workbox, using Background Sync and the Push API.
Add media to a web page
Embed a media file in a web page using the and tags.
Media file basics
You might think that you can take a video from a camera and upload it to the web as is. Preparing a video for serving from your own site is a bit more complicated.
Boldly link where no one has linked before: Text Fragments
Text Fragments let you specify a text snippet in the URL fragment. When navigating to a URL with such a text fragment, the browser can emphasize and/or bring it to the user's attention.
How to file a good browser bug
Telling browser vendors about issues you find in their browser, on a specific device or platform is an integral part of making the web platform better!
Make your PWA feel more like an app
Learn how to make your Progressive Web App feel like a "real" app by understanding how to implement platform-specific app patterns with web technologies.
Measure performance with the RAIL model
RAIL model enables designers and developers to reliably target the performance optimization work that has the highest impact on user experience. Learn what goals and guidelines the RAIL model sets out and which tools you can use to achieve them.
Speed up navigations in React with Quicklink
quicklink is a library to achieve faster subsequent page-loads by prefetching in-viewport links during idle time.
Protect your resources from web attacks with Fetch Metadata
Fetch Metadata is a new web platform feature designed to allow servers to protect themselves from cross-origin attacks.
Content reordering
When creating a layout using CSS, ensure you give the same experience for keyboard users as other users.
Web Animations API improvements in Chromium 84
Wrangling your web animations is about to get much easier.
Empowering payment apps with Web Payments
Web Payments aims to provide frictionless payment experience on the web. Learn how it works, its benefits, and get ready to integrate your payment app with Web Payments.
Life of a payment transaction
Learn how merchants integrate payment apps, how payment transactions work with the Payment Request API, and what's possible in Web Payments.
Android payment app developers guide
Learn how to adapt your Android payment app to work with Web Payments and provide a better user experience for customers.
More variable font options for the macOS system-ui font in Chromium 83
Chromium 80 had a system-ui font weight regression on macOS. The reason it broke, and the new super powers post-resolution, are worth the wait in Chromium 83.
More variable font options for the macOS system-ui font in Chromium 83
Chromium 80 had a system-ui font weight regression on macOS. The reason it broke, and the new super powers post-resolution, are worth the wait in Chromium 83.
Get things done quickly with app shortcuts
App shortcuts give quick access to a handful of common actions that users need frequently.
How Progressive Web Apps can drive business success
Build a solid business case for your PWA. Learn when you should invest, and how you can measure its success.
Preparing for AppCache removal
Details of Chrome's and other browsers' plans to remove AppCache.
Persistent storage
Persistent storage can help protect critical data from eviction, and reduce the chance of data loss.
How to define your install strategy
Best practices for combining different installation offerings to increase installation rates and avoid platform competition and cannibalization.
How CommonJS is making your bundles larger
CommonJS modules are very dynamic, which prevents JavaScript optimizers and bundles perform advanced optimizations over them.
Why you need "cross-origin isolated" for powerful features
Some web APIs increase the risk of side-channel attacks like Spectre. To mitigate that risk, browsers offer an opt-in-based isolated environment called cross-origin isolated. Learn why cross-origin isolation is needed to use powerful features such as `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` and high resolution timer with better precision.
Profiling Web Audio apps in Chrome
Learn how to profile the performance of Web Audio apps in Chrome using `about://tracing` and the **WebAudio** extension in Chrome DevTools.
Improved Next.js and Gatsby page load performance with granular chunking
Learn how both Next.js and Gatsby have improved their build output to minimize duplicate code and improve page load performance
"Same-site" and "same-origin"
"same-site" and "same-origin" are frequently cited but often misunderstood terms. This page explains what they are and how they are different.
Making your website "cross-origin isolated" using COOP and COEP
Some web APIs increase the risk of side-channel attacks like Spectre. To mitigate that risk, browsers offer an opt-in-based isolated environment called cross-origin isolated. Use COOP and COEP to set up such an environment and enable powerful features like `SharedArrayBuffer`, `performance.measureUserAgentSpecificMemory()` or high resolution timer with better precision.
Monitor your web page's total memory usage with measureUserAgentSpecificMemory()
Learn how to measure memory usage of your web page in production to detect regressions.
web.dev engineering blog #1: How we build the site and use Web Components
In this first post from the web.dev engineering team, learn about how we build the site—including our use of Eleventy and Web Components.
Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag
The color-scheme CSS property and the corresponding meta tag allow developers to opt their pages in to theme-specific defaults of the user agent stylesheet, such as, for example, form controls, scroll bars, as well as CSS system colors. At the same time, this feature prevents browsers from applying any transformations on their own.
Ensure your website is available and usable for everyone during COVID-19
How to ensure that the core functionality of your website is always available, accessible, secure, usable, discoverable, and fast.
Accessible tap targets
It's important that interactive elements have enough space around them, when used on a mobile or touchscreen device. This will help everyone, but especially those with motor impairments.
Fix an overloaded server
How to determine a server's bottleneck, quickly fix the bottleneck, improve server performance, and prevent regressions.
Accessible responsive design
We know that it's a good idea to design responsively to provide the best multi-device experience, but responsive design also yields a win for accessibility.
Color and contrast accessibility
Learn to make your pages more accessible by improving your color and contrast usage.
Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types
Introducing Trusted Types: a browser API to prevent DOM-based cross-site scripting in modern web applications.
Using a PWA in your Android app
How to open a Progressive Web App in an Android app.
Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts
By optimizing rendering cycles, Chrome 83 eliminates layout shifting when preloading optional fonts. Combining with font-display: optional is the most effective way to guarantee jank-free rendering of custom fonts.
How to set up Signed HTTP Exchanges (SXG) using nginx
How to generate a TLS certificate with SXG extensions, install tools for generating SXG files, and configure nginx to serve SXG files.
How to distribute Signed HTTP Exchanges (SXG) using nginx
How to get and serve SXG files using nginx, and the challenges of subresource prefetching.
Optimize CSS background images with media queries
Use media queries to send images that are only as large as they need to be, a technique commonly known as responsive images.
Fixing website speed cross-functionally
How other departments can help make your website speed optimization project a bigger success.
Scroll snapping after layout changes
Starting in Chrome 81, scrollers remain snapped when the page layout changes. In other words, you no longer need to add event listeners to force resnapping.
How to set up Signed Exchanges using Web Packager
Learn how to serve signed exchanges (SXGs) using Web Packager.
How to provide your own in-app install experience
Use the beforeinstallprompt event to provide a custom, seamless, in-app install experience for your users.
Positioning virtual objects in real-world views
The WebXR Hit Test API is an enhancement to the web's augmented reality that lets you place virtual objects in a real-world view.
Virtual reality comes to the web, part II
Virtual reality came to the web in Chrome 79. Based on the WebXR Device API, this launch is the foundation for both augmented and virtual reality. This article is the second in a series, focusing on the frame loop, the part of an XR session where images are shown to a viewer. Other browsers will soon be supporting the WebXR Device API, including Firefox Reality, Oculus Browser, Edge and Magic Leap's Helio browser, among others.
Augmented reality: You may already know it
If you've already used the WebXR Device API, you'll be happy to know there's very little new to learn. Entering a WebXR session is largely the same. Running a frame loop is largely the same. The differences lie in configurations that allow content to be shown appropriately for augmented reality.
Advancing the web framework ecosystem
Learn about how Chrome is investing efforts in a number of open-source tools to advance the JavaScript ecosystem
What are Progressive Web Apps?
An introduction to Progressive Web Apps (PWAs) and the three pillars that separate them from other web apps.
Adaptive icon support in PWAs with maskable icons
Maskable icons are a format that give you more control and let your Progressive Web App use adaptive icons. A maskable icon can look great on all Android devices.
Integrate PWAs into built-in sharing UIs with Workbox
How to register routes in Workbox so that your Progressive Web App shows up in system-level sharing UIs, alongside platform-specific apps.
Improving page dismissal in synchronous XMLHttpRequest()
It's common for a page or app to have unsubmitted analytics or other data at the time a user closes it. Sites use a synchronous call to XMLHttpRequest() to keep the page or app open until its data is passed to the server. It hurts the user experience and ignores better ways to save data. Chrome 80 implements a recent spec change to address this.
Threading the web with module workers
Module workers make it easy to unblock the main thread by moving expensive code to a background thread while keeping the ergonomic and performance benefits of standard JavaScript modules.
Speed tooling evolutions: highlights from Chrome Developer Summit 2019
Read about the latest developments in speed tooling including new performance metrics, updates to PageSpeed Insights and Chrome User Experience Report (CrUX), and insights from Web Almanac analysis of the web ecosystem.
Adaptive loading: improving web performance on slow devices
Learn about adaptive loading pattern, how to implement it, and how Facebook, Tinder, eBay, and other companies use adaptive loading in production.
Use web workers to run JavaScript off the browser's main thread
The browser's main thread is incredibly overworked. By using web workers to shift code off the main thread, you can significantly improve your app's reliability and user experience.
Feedback from the summer 2019 image optimization survey
Comments from survey respondents about various image optimization techniques.
Build a push notifications server
In this codelab, learn how to build a push notifications server.
Route prefetching in Next.js
How Next.js speeds up navigations with route prefetching and how to customize it. In this post you'll learn how routing in Next.js works, how it's optimized for speed, and how to customize it to best fit your needs. In Next.js, you don't need to set
Performance as a default with Next.js
Next.js takes care of many optimizations in your React app so you don’t have to Next.js is an opinionated React framework with a number of performance optimizations baked in. The main idea behind the framework is to ensure applications start and
Code splitting with dynamic imports in Next.js
How to speed up your Next.js app with code splitting and smart loading strategies. This post explains different types of code splitting and how to use dynamic imports to speed up your Next.js apps. While route-based code splitting is a good default,
Integrate with the OS sharing UI with the Web Share API
With the Web Share API, web apps are able to use the same system-provided share capabilities as platform-specific apps. The Web Share API makes it possible for web apps to share links, text, and files to other apps installed on the device in the same way as platform-specific apps.
How AMP can guarantee fastness in your Next.js app
Learn about the benefits and tradeoffs of supporting AMP in your Next.js app AMP is a web component framework that guarantees fast page loads. Next.js has built-in support for AMP. This guide first briefly describes how AMP guarantees fast page
Virtual reality comes to the web
Virtual reality came to the web in Chrome 79. Based on the WebXR Devicer API, this launch is the foundation for both augmented and virtual reality. This article is the first in a series, exploring basic concepts and describing how to enter an XR session. Other browsers will soon be supporting the WebXR Device API, including Firefox Reality, Oculus Browser, Edge and Magic Leap's Helio browser, among others.
Understanding cookies
Learn about how cookies work and what are first-party and third-party cookies.
SameSite cookie recipes
Sites can now explicitly mark their cookies for cross-site usage. Learn how to mark up your cookies to ensure that your first-party and third-party cookies continue to work after this change is implemented.
Fast ads matter
Understand the value of fast ads and how to think about ad speed.
Use push notifications to engage and re-engage users
Use push notifications to engage users with targeted, timely updates.
Get started with the Notifications API
In this codelab, learn how to request user permission and send notifications.
Use a Service Worker to manage notifications
In this codelab, learn how to manage notifications with a service worker.
Fixing layout instability
A walkthrough of using WebPageTest to identify and fix layout instability issues.
Techniques to make a web app load fast, even on a feature phone
Feature phones are making a resurgence and are popular, especially in emerging markets where 2G is the norm. Here are our learnings from making PROXX, a mobile Minesweeper clone, load fast on feature phones on 2G.
Smarter custom properties with Houdini’s new API
Though useful, CSS variables are hard to work with because they can take any value and be overridden and you can’t use transitions with them. CSS Properties and Values API Level 1 overcomes these issues.
Two ways to prefetch: <link> tags and HTTP headers
Learn how to speed up future navigations by prefetching resources.
Fixing mixed content
Find out how to fix mixed content errors on your website, in order to protect users and ensure that all of your content loads.
What is mixed content?
Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources are loaded over an insecure HTTP connection.
Going beyond images with basic video for the web
Research shows that web video lead to higher engagement and sales. Even if you haven't added video to your sites yet, it's just a matter of time until you do.
Add an Apple touch icon to your Progressive Web App
An interactive demonstration of how to specify which icon should show up on iOS home screens.
Ready Player Web
The Web platform is very mature for game development nowadays. The key to building a modern web game is embracing the best practices of game design and monetization. This post provides provides guidance towards this goal.
Progressive Web Apps in multi-origin sites
Multi-origin architectures presents many challenges when building PWAs. Explore the good and bad uses of multiple origins, and some workarounds to build PWAs in multi-origin sites.
Optimize WebFont loading and rendering
This post explains how to load WebFonts to prevent layout shifts and blank pages when WebFonts are not available when the page loads.
Reduce web font size
This post explains how to reduce the size of the WebFonts that you use on your site, so that good typography doesn't mean a slow site.
Create a Progressive Web App with the Angular CLI
Learn how to create installable progressive Angular applications.
Identify slow third-party JavaScript
Learn how to use Lighthouse and Chrome DevTools to identify slow third-party resources.
Efficiently load third-party JavaScript
Learn how to improve load times and user experience by avoiding the common pitfalls of using third-party scripts.
Use image CDNs to optimize images
Consider using an image CDN to optimize your site's images and reduce its data cost for your users.
Third-party JavaScript performance
This post describes the common kinds of third-party JavaScript and the performance issues they can cause. It also provides general guidance about how to optimize third-party scripts.
More capable form controls
New web platform features make it easier to build custom elements that work like built-in form controls.
Optimize third-party JavaScript
Learn about techniques for optimizing slow third-party resources with some help from Lighthouse.
Establish network connections early to improve perceived page speed
Learn about rel=preconnect and rel=dns-prefetch resource hints and how to use them.
Create OS-style backgrounds with backdrop-filter
Learn how to add background effects like blurring and transparency to UI elements on the web using the CSS backdrop-filter property.
Keeping things fresh with stale-while-revalidate
stale-while-revalidate helps developers balance between immediacy—loading cached content right away—and freshness—ensuring updates to the cached content are used in the future.
Virtualize large lists with the Angular CDK
Learn how to make large lists more responsive by implementing virtual scrolling with the Angular Component Dev Kit.
Route preloading strategies in Angular
Learn how to use Angular's preloading strategies for faster apps.
Optimize Angular's change detection
Learn how to optimize your Angular app's change detection to make it more responsive.
Faster web navigation with predictive prefetching
Code splitting allows you to speed up your applications, but it may slow down subsequent navigation. Predictive prefetching is an efficient way to use data analytics to smartly prefetch what the user is likely to use next, optimizing network utilization.
Adapt video to image serving based on network quality
Learn how to use the Network Information API to adapt your content based on the network quality.
Audit your Angular app's accessibility with codelyzer
Learn how to make your Angular application accessible using codelyzer.
Performance budgets with the Angular CLI
Learn how to use performance budgets directly in the Angular CLI!
Precaching with the Angular service worker
Learn how to use the Angular service worker to precache the static assets in your app.
prefers-color-scheme: Hello darkness, my old friend
Many devices now support an operating system wide dark mode or dark theme experience. This post explains how dark mode can be supported on web pages, lists best practices, and introduces a custom element named dark-mode-toggle that allows web developers to offer users a way to override their operating system level preference on specific web pages.
Route-level code splitting in Angular
Learn how to make your initial app bundle smaller by using route-level code splitting.
Top tips for web performance
Use srcset to automatically choose the right image size.
Get started: optimize an Angular application
Learn how to make your Angular application faster, more reliable, discoverable, installable, and accessible!
Web components: the secret ingredient helping power the web
This post sums up a talk on the state of web components in 2019, given by Kevin Schaaf of the Polymer Project and Caridy Patiño of Salesforce.
Use Lighthouse for performance budgets
Lighthouse now supports performance budgets. This feature, LightWallet, can be set up in under five minutes and provides feedvack on the size and quantity of page resources.
Updates to the Web Payments APIs
Since the launch of the Payment Request API in Chrome 53 and the Payment Handler API in Chrome 68, there have been quite a few changes made to their respective specifications. This post summarizes those updates and will continue accumulating those API changes.
The value of speed
Demonstrate the revenue generated by site improvements while excluding external factors such as marketing campaigns.
Address Bar Install for Progressive Web Apps on the Desktop
Progressive Web Apps are easy to install with a new install button in Chrome’s address bar (omnibox).
How can performance improve conversion?
Learn what impact website performance has on different parts of the e-commerce funnel
Service worker mindset
Working with service workers is new and unfamiliar for many web devs. This post provides some tips for wrapping your mind around them.
Patterns for promoting PWA installation
How to promote installation of Progressive Web Apps and best practices.
How do I notify users that my PWA is installable?
How to promote installation of Progressive Web Apps and best practices.
Image policies for fast load times and more
Images take up a significant amount of visual space and make up the majority of the downloaded bytes on a website. Use the new feature policies to identify oversized images.
Extract and inline critical CSS with Critical
Learn how use Critical to extract and inline critical CSS, and improve render times.
Are long JavaScript tasks delaying your Time to Interactive?
Learn to diagnose costly, work-preventing user interaction.
Extract critical CSS
Learn how to improve render times with critical CSS technique and how to choose the best tool for your project.
Speed at scale: what's new in web performance?
For Google I/O 2019, we introduced three new Web Performance initiatives that we hope will lead to better user experiences for everyone.
Introducing PROXX
PROXX as a minesweeper-like game built as a PWA. It works on a vast variety of devices and progressively enhances the visual appearance the more capable the device is.
SameSite cookies explained
Learn to mark your cookies for first-party and third-party usage with the SameSite attribute. You can enhance your site's security by using SameSite's Lax and Strict values to improve protection against CSRF attacks. Specifying the new None attribute lets you explicitly mark your cookies for cross-site usage.
Visual searching with the Web Perception Toolkit
Wouldn't it be great if users could search your site using their camera?
Adaptive serving based on network quality
Use Network Information API to adapt the assets served to users based on the quality of their connection.
Hands-on with Portals: seamless navigation on the web
The newly proposed Portals API helps keep your front-end simple while allowing seamless navigations with custom transitions. In this article, get hands-on experience using Portals to improve user experience across your site.
Minify and compress network payloads with brotli
In this codelab, learn how Brotli compression can further reduce compression ratios and your app's overall size.
web.dev at I/O 2019
For Google I/O 2019, the folks on the web.dev team have shipped a number of updates including a refreshed design, more Lighthouse docs, and a brand new blog.
What is speed?
Speed matters, but what exactly do we mean by it? What does it mean to have a fast site?
How to measure speed?
Real-world performance is highly variable due to differences in users' devices, network connections, and other factors. In this post we explore tools that can help you collect lab or field data to assess page performance.
How to stay fast?
Brands that optimize speed will often find they regress quickly. In this post we explore how to make sure your fast experience stays fast.
Add a web app manifest with Create React App
Create React App includes a web app manifest by default. Modifying this file will allow you to change how your application is displayed when installed on the user's device.
Virtualize large lists with react-window
react-window is a library that allows large lists to be rendered efficiently.
Pre-render routes with react-snap
react-snap is a third-party library that pre-renders pages on your site into static HTML files. This can improve First Paint times in your application.
Get started: optimize your React app
React is an open-source library that makes building UIs easier. This learning path will cover different APIs and tools within the ecosystem that you should consider using to improve the performance and usability of your application.
Code splitting with React.lazy and Suspense
The React.lazy method makes it easy to code-split a React application on a component level using dynamic imports. Use it along with Suspense to show appropriate loading states to your users.
Accessibility audit with react-axe and eslint-plugin-jsx-a11y
react-axe is a library that audits a React application and logs any accessibility issues to the Chrome DevTools console. eslint-plugin-jsx-a11y is an ESLint plugin that identifies and enforces a number of accessibility rules directly in your JSX. Using them in combination can provide a comprehensive auditing approach to find and fix any accessibility concerns in your application.
Precaching in Create React App with Workbox
Workbox is built into Create React App with a default configuration that precaches all static assets in your application with every build.
Codelab: Preload critical assets to improve loading speed
In this codelab, learn how to improve the performance of a page by preloading and prefetching resources.
prefers-reduced-motion: Sometimes less movement is more
The prefers-reduced-motion media query detects whether the user has requested that the system minimize the amount of animation or motion it uses. This is for users who either require or prefer minimized animations; for example people with vestibular disorders often prefer animations to be kept to a minimum.
Defer non-critical CSS
Learn how to defer non-critical CSS with the goal of optimizing the Critical Rendering Path, and improving First Contentful Paint (FCP).
Trust is good, observation is better: Intersection Observer v2
Intersection Observer v2 adds the capability to not only observe intersections per se, but to also detect if the intersecting element was visible at the time of intersection.
Responsive web design basics
Create sites that respond to the needs and capabilities of the device they're viewed on.
Constructable Stylesheets
Constructable Stylesheets provide a seamless way to create and distribute styles to documents or shadow roots without worrying about FOUC.
Rendering on the Web
Recommendations for implementing logic and rendering in apps.
Using bundlesize with Travis CI
Define performance budgets with minimal setup and enforce them as part of your development workflow using bundlesize with Travis CI.
Incorporate performance budgets into your build process
The best way to keep an eye on your performance budget is to automate it. Find out how to choose a tool that best fits your needs and current setup.
Setting performance budgets with webpack
Learn how to set performance budgets and keep your bundlesize in check with webpack.
Using Lighthouse Bot to set a performance budget
You've done hard work to get fast, now make sure you stay fast by automating performance testing in Travis CI with Lighthouse Bot.
Emscripten and npm
How do you integrate WebAssembly into this setup? In this article we are going to work this out with C/C++ and Emscripten as an example.
Is your app installed? getInstalledRelatedApps() will tell you!
The getInstalledRelatedApps() API is a web platform API that allows you to check whether your iOS/Android/desktop app or PWA is installed on the user's device.
Adapting to Users with Client Hints
Client hints are a set of HTTP request headers we can use to change how we deliver page resources based on characteristics of a user's device and network connection. In this article, you'll learn all about client hints, how they work, and a few ideas on how you can use them to make your site faster for users.
Semantics and screen readers
Have you ever stopped to wonder how assistive technology, such as a screen reader, knows what to announce to users? The answer is that these technologies rely on developers marking up their pages with semantic HTML. But what are semantics, and how do screen readers use them?
Style focus
The focus indicator (often signified by a "focus ring") identifies the currently focused element. For users who are unable to use a mouse, this indicator is extremely important, as it acts as a stand-in for their mouse-pointer.
Use semantic HTML for easy keyboard wins
By using the correct semantic HTML elements you may be able to meet most or all of your keyboard access needs. That means less time fiddling with tabindex, and more happy users!
Control focus with tabindex
Standard HTML elements have keyboard accessibility built-in. When building custom interactive components, use tabindex to ensure that they're keyboard accessible.
Keyboard access fundamentals
Many different users rely on the keyboard to navigate applications—from users with temporary and permanent motor impairments to users who use keyboard shortcuts to be more efficient and productive. Having a good keyboard navigation strategy for your application creates a better experience for everyone.
Headings and landmarks
By using the correct elements for headings and landmarks, you can dramatically improve the navigation experience for users of assitive technology.
Labels and text alternatives
In order for a screen reader to present a spoken UI to the user, meaningful elements must have proper labels or text alternatives. A label or text alternative gives an element its accessible name, one of the key properties for expressing element semantics in the accessibility tree.
What is accessibility?
An accessible site is one whose content can be accessed regardless of any user's impairments, and whose functionality can also be operated by the most diverse range of users possible.
Art direction
In this codelab, learn how to load completely different images based on device display size.
What is network reliability and how do you measure it?
The modern web is enjoyed by a wide swath of people, using a range of different devices and types of network connections. Your creations can reach users all across the world, but delivering a reliable experience on the web for all of your users can be challenging. It can be a challenge just to understand what reliability means.
Security should not be so scary!
When the word "security" comes to mind, it's usually in the context of bad news. But security is something to be taken as a positive and necessary part of web development just like "user experience" or "accessibility".
Serve images with correct dimensions
In this codelab, learn how to serve images with the correct dimensions to improve network performance.
Same Origin Policy & iframe
In this codelab, learn how the same-origin policy works when accessing data inside an iframe.
Serve responsive images
Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Instead of a "one-size-fits-all" approach to images, serve different image sizes to different devices.
Configuring HTTP caching behavior
In this codelab, learn how to control resource caching behavior using HTTP headers.
Serve images with correct dimensions
We've all been there—you forgot to scale down an image before adding it to the page. The image looks fine, but it is wasting users' data and hurting page performance.
Identify resources loaded from the network
Coming up with the right caching strategies for your web application requires getting a handle on what exactly you're loading. When building a reliable web application, the network can be subject to all kinds of dark forces. You need to understand the network's vulnerabilities if you hope to cope with them in your app.
What are security attacks?
An insecure application could expose users and systems to various types of damage. When a malicious party uses vulnerabilities or lack of security features to their advantage to cause damage, it is called an attack. We'll take a look at different types of attacks in this guide so you know what to look for when securing your application.
How search works
Search engines are the digital version of a librarian. They use a comprehensive index to help find the right information for a query. Understanding the basics of search prepares you to make your content discoverable for users.
Working with service workers
In this codelab, learn how to make an application reliable by registering a service worker.
Use density descriptors
In this codelab, learn how to use density descriptors and srcset to load images with the right pixel density for the user's device.
Your first performance budget
Ensure your site loads fast with a step-by-step guide to defining thresholds for performance metrics that are meaningful for your site.