The getInstalledRelatedApps() API is a web platform API that lets you check whether your Android, UWP app or PWA is installed on the user's device.

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.

Learn how to optimize your website's Interaction to Next Paint.

Learn what Baseline targets are, how to choose one, and how it can help your development experience.

These passkey management guidelines help you accomplish an intuitive, secure, and robust experience for your users.

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.

Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.

The research and methodology behind Core Web Vitals thresholds

Add Baseline to your development linting and packaging tools with browserslist-config-baseline.

Learn how to measure your site's Web Vitals in both real-world and lab environments.

Understand how to serve the best quality images as efficiently as possible.

A step-by-step guide on how to break down LCP and identify key areas to improve.

The natural step after getting a PushSubscription and saving it our server is to trigger a push message, but there is one thing I flagrantly glossed over. The user experience when asking for permission from the user to send them push messages. Sadly,

This post introduces the Largest Contentful Paint (LCP) metric and explains how to measure it

Knowing when to reach for a polyfill can be a hard decision, but using Baseline features can help you answer this question. Learn more in this guide!

Learn about the Web Platform Dashboard and how you can query its HTTP API to get data on features that have reached Baseline to build tools for your development workflow.

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.

ruby-align is now part of Baseline

Published: February 20, 2025 Browser Support Source The Background Fetch API requires your app to register a service worker. As the browser fetches, it displays progress to the user and gives them a method to cancel the download. Once the download is

Learn about rel=prefetch resource hint and how to use it.

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.

Learn how to identify and fix layout shifts.

CSS scrollbar-gutter and scrollbar-width have landed in all major browser engines, making it Baseline Newly available.

WasmFS and the mimalloc feature in Emscripten can help a lot with allocation and I/O performance. This guide shows how these features can lead to speed improvements of 10 times or more in some cases.

WebAssembly Garbage Collection and Wasm tail call optimizations have now landed in all major browser engines, making them Baseline Newly available.

This post introduces the Time to First Byte (TTFB) metric and explains how to measure it.

Promise.try has now landed in all major browser engines, making it Baseline Newly available.

Short description

Published: January 13, 2024 There are so many amazing projects you can build with AI, with classic machine learning models and newer large language models (LLMs). With LLMs, computers can generate new content, write summaries, analyze text for

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?

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.

web-features dataset, Web Platform Status dashboard, Baseline status widget and more! Take a look back on Baseline in 2024.

This post explains lazy loading and the options available to you to lazy loading video.

Module preload offers a way of declaratively loading JavaScript modules ahead of time.

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.

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.

This post describes the Total Blocking Time (TBT) metric and explains how to measure it

A collection of best practices that Chrome has identified as the biggest opportunities to optimize web performance and improve Core Web Vitals

Essential metrics for a healthy site

The CSS content-visibility property is now Baseline Newly available.

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.

This article explains the origin story of Baseline, Google's involvement, and the ownership of the WebDX Community Group.

Learn to optimize your pages for instant loads when using the browser's back and forward buttons.

CSS nesting is getting a whole lot better!

This post introduces the First Input Delay (FID) metric and explains how to measure it

Learn how to attribute your performance data with debug information to help you identify and fix real-user issues with analytics

What impact does @property have on the performance of your CSS?

Learn how you can use Google tools to help correlate your Core Web Vitals with ad revenue.

There are many different options for storing data in the browser. Which one is best for your needs?

This post covers the loading attribute and how to use it to control the loading of iframes.

Explore the recommended and not recommended ways of building multiple PWAs reusing the same domain with their pros and cons.

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, or great Progressive Web App?

Progressive Web App installability criteria.

What it takes to change icons, shortcuts, colors, and other metadata in your web app manifest for your PWA.

The web app manifest is a simple JSON file that tells the browser how your web app should behave.

Learn how to deploy a CSP based on script nonces or hashes as a defense-in-depth against cross-site scripting.

This article helps Web developers pick the right hardware API based on a given device.

Learn how to use Related Origin Requests to allow passkey reuse across your sites.

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.

This post covers the loading attribute and how it can be used to control the loading of images.

Custom metrics let you measure and optimize aspects of your site's experience that are unique to your site.

Learn how to send Web Vitals data to Google Analytics 4 properties and export the data for analysis in BigQuery and Looker Studio.

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.

Learn about how cookie notices affect performance, performance measurement, and UX.

Web developers can customize media notifications and respond to media related events such as seeking or track changing with the Media Session API.

Use the tabindex attribute to explicitly set an element's tab position.

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.

Learn how to adjust your prompts to achieve your preferred results across different LLMs, models, and model sizes.

description: Define colors that react to the used color-scheme with the light-dark() function.

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.

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.

Learn to control web games with the Gamepad API.

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.

Relying parties can determine where the passkey comes from by examining AAGUID. Find out how it works.

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.

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

The <model-viewer> web component lets you use 3D models on a web page declaratively.

Learn how to use `userVerification` in WebAuthn

Learn about reasons why RUM data can show different Core Web Vitals numbers from CrUX.

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.

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.

Learn how to prevent creating a new passkey if one already exists in the user's password manager.

A guide to the basics of IndexedDB.

Toolbelt worthy, powerful, and stable CSS you can use today.

Learn how to optimize for the Time to First Byte metric.

What's the difference between a host, site and origin? What is an eTLD+1? This article explains.

Learn what are discoverable credentials and how to build user experiences that suit your use case.

Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!

`ResizeObserver` notifies you when an element's content rectangle changes size so that you can react accordingly.

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.

This document explains how you can use the OffscreenCanvas API to achieve performance improvements when rendering graphics in your web app.

This post introduces the First Contentful Paint (FCP) metric and explains how to measure it

This article provides a comprehensive overview of content delivery networks (CDNs). In addition, it explains how to choose, configure, and optimize a CDN setup.

Practical developer guidance about what to do when a user logs out of the website.

This post introduces the Time to Interactive (TTI) metric and explains how to measure it

The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals.

About the :user-valid and :user-invalid pseudo-classes and how to use them to improve the user experience of input validation.

Learn how business decision makers and non-developers can improve Core Web Vitals.

Understand and avoid common problems when applying base64 encoding and decoding to strings.

Subgrid enables grid shareability, allowing nested grids to align to ancestors and siblings.

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.

Learn what code coverage is and discover four common ways to measure it.

Determine what you need to test and what you can rule out.

Determine what to test, define your test cases, and prioritize.

User-centric performance metrics are a critical tool in understanding and improving the experience of your site in a way that benefits real users.

Learn about new and exciting possibilities for preloading responsive images to ensure great user experience.

A method to adapt a font to your users' preferences, so they're maximally comfortable reading your content.

Discover how to combine different testing types into a reasonable strategy that matches your project.

Let's start with the basics! Exploring the two general testing modes and three common types of test automation.

You should audit your resources periodically to ensure that each resource is helping deliver a better user experience.

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.

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.

How to securely display user-controlled content on web applications.

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

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.

Learn about just some of the features that are part of Baseline.

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.

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.

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.

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.

This post introduces the Cumulative Layout Shift (CLS) metric and explains how to measure it.

The full WordPress powered by PHP running solely in the browser with WebAssembly

A showcase of tools now available on the web thanks to WebAssembly.

Improve web debugging experience with source maps.

Progressive Web Apps can be submitted to app stores like the Android Play Store or the Microsoft Store and more.

Toolbelt worthy, powerful, and stable CSS you can use today.

Calculate the sine, cosine, tangent, and more in CSS.

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.

One of a series of interviews with members of the Google Developers Experts (GDE) program.

This blog post announces a new collection of patterns for media apps.

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

How the scrolling book came to life for sharing fun and frightening tips and tricks this Chrometober.

A foundational overview of how to build a color-adaptive and accessible tooltip custom element.

Create a sign in experience that leverages passkeys while still accommodating existing password users.

Passkeys make a website's user accounts safer, simpler, easier to use and passwordless. This document discusses how to allow users to create passkeys for your website.

A foundational overview of how to build color-adaptive, responsive, and accessible FAB components.

Learn about how to optimize web fonts for Core Web Vitals.

One of a series of interviews with members of the Google Developers Experts (GDE) program.

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 )

An overview of three tools and techniques for testing and verifying accessible color contrast of your design.

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.

This handy CSS pseudo-selector gives you a way to select elements that are modal.

A fun exploration of ways to recreate an optical illusion with CSS.

Optimize tags and tag managers for Core Web Vitals.

A look at some useful and creative ways to style a list.

The benefits of using Custom Properties in design systems and component libraries.

Learn how you can use the individual translate, rotate, and scale CSS properties to approach transforms in an intuitive way.

Looking at several ways to animate a border in CSS

Animations, theming, components, and more layout patterns are live and ready to help kick start or inspire your UI and UX.

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.

Learn why tools that monitor Core Web Vitals metrics may report different numbers, and how to interpret those differences.

GDE Enrique Fernandez Guerra on open sourcing his NGO HelpDev.

What ending support for Internet Explorer meant for the customers and developers at Maersk.com.

So long HTML5Rocks, it's been nice knowing you.

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.

A checklist for developers to make sure their passkey implementations are following all the best practices.

The Web Audio API makes it possible to properly achieve AV synchronization.

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

Understand the decisions around using a JavaScript library or framework.

Understand the differences between frameworks and libraries in the context of a client-side JavaScript environment.

Catching errors when working with the Fetch API.

An update on the Google Fonts CSS API—how it works, how to use it, and how it can efficiently deliver your web fonts.

This resource can help you quickly find your way around the terminal.

GOV.UK dropped their jQuery dependency from their front end. You'll never guess what happened. (Yes, you will.)

A foundational overview of how to build color-adaptive, responsive, and accessible components.

Find out what the browser preload scanner is, how it helps performance, and how you can stay out of its way.

How to measure Web Vitals with your current analytics tool

Making it easier to build for the web.

Web Google Developers Experts on how mentoring programs empowered them to become leaders.

Sharing a practical guide to variable fonts, with lots of examples.

This tool by Josh W Comeau makes it super simple to create nice looking gradients.

A collection of insights on the top pain points, collected from a number of one to one conversations with web developers.

Check out the state of image tooling.

Learn about scope and how it works in JavaScript.

A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the `` element.

Learn how to debug media playback errors on the web.

One of a series of interviews with members of the Google Developers Experts (GDE) program.

Eagerly loading images within the initial viewport—while liberally lazy loading the rest—can improve Web Vitals while loading fewer bytes.

A foundational overview of how to build a color adaptive and accessible loading bar with the `` element.

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

User-Agent string changes, the strategies that Chrome and Firefox are taking to mitigate the impact, and how you can help.

A foundational overview of how to build an adaptive favicon.

Learn how to render 2D graphics to a canvas on the web from WebAssembly with Emscripten.

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.

Essential metrics for a healthy site

Learn how gPhoto2 was ported to WebAssembly to control external cameras over USB from a web app.

Use Network Error Logging (NEL) to collect client-side network errors.

Learn how to use the newest WebAssembly features while supporting users across all browsers.

Learn how code that interacts with external devices can be ported to the web with WebAssembly and Fugu APIs.

A foundational overview of how to build an adaptive and accessible theme switch component.

Learn how to embed JavaScript code in your WebAssembly library to communicate with the outside world.

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.

A peek into the process and tools used to build the holiday-calendar-style experience of Designcember.

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.

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.

A foundational overview of how to build an adaptive and accessible toast component.

Announcing the UI fund from Chrome, designed to provide grants for people who work on design tools, CSS, and HTML.

A foundational overview of how to build a responsive, adaptive, and accessible 3D game menu.

Learn about the latest in PageSpeed Insights to help you better measure and optimize your page and site quality.

Try out a new Lighthouse API to measure performance and best practices throughout a user flow.

Learn about measuring animations, how to think about animation frames, and overall page smoothness.

A roundup of all the key announcements from the 2021 Chrome Dev Summit, with the links you need to find out more.

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.

A foundational overview of how to build a responsive, adaptive, and accessible, multiselect component for sort and filter user experiences.

Learn the basics of using the Navigation and Resource Timing APIs to assess loading performance in the field.

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.

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.

Answers to common questions about SPAs, Core Web Vitals, and Google's plan to address current measurement limitations.

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

Learn how to import and bundle various types of assets from JavaScript in a way that works both in browsers and bundlers.

A foundational overview of how to build an accessible split-button component.

Learn how to use CSS module scripts to import CSS stylesheets using the same syntax as JavaScript modules.

A foundational overview of how to build a responsive and accessible switch component.

Bring your brand color to built-in HTML form inputs with one line of code.

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

A foundational overview of how to build a responsive and accessible breadcrumbs component for users to navigate your site.

Learn how to bring multithreaded applications written in other languages to WebAssembly.

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 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.

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.

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.

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

A foundational overview of how to establish a dynamic and configurable color scheme

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.

This article covers CSS-related techniques for optimizing Web Vitals.

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.

These seemingly small additions to CSS selector syntax are going to have a big impact.

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.

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.

Strategies to migrate your site from relying on the user-agent string to User-Agent Client Hints.

A write-up of Thomas Steiner's Google I/O 2021 talk titled Excalidraw and Fugu: Improving Core User Journeys

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.

Service workers can use static imports of ES modules to bring in extra code, as an alternative to importScripts().

A foundational overview of how to build a responsive horizontal scrollview for TVs, phones, desktops, etc.

Today, we will cover new tooling features in Lighthouse, PageSpeed and DevTools to help identify how your site can improve on the Web Vitals.

Learn how to invoke asynchronous web APIs when compiling traditionally synchronous languages to WebAssembly.

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.

With the Window Controls Overlay feature, developers can customize the title bar of installed PWAs so that their PWAs feel more like apps.

WebOTP API can now receive an OTP from within an iframe.

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.

A foundational overview of how to build split letter and word animations.

Plans for improving the CLS metric to be more fair to long-lived pages.

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.

A foundational overview of how to build a settings component of sliders and checkboxes.

Figuring out the value of `this` can be tricky in JavaScript, here's how to do it…

This chapter provides details on the components that all mini app platforms make available.

This chapter presents a number of runtime environments for mini apps that are not mobile devices.

This chapter shows an example project that follows the "programming the mini app way" approach.

This chapter presents a selection of interesting mini app open source projects.

This chapter covers the project structure, the lifecycle, and the bundling of mini apps.

This chapter provides details on the DevTools experience of various mini apps platforms.

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..

This chapter introduces the way of programming the mini app way.

This chapter introduces the standardization effort that has been started for mini apps.

This chapter introduces the concept of super apps and presents the major super app providers.

This chapter provides background on H5 apps and QuickApp, which are both distinct from mini apps.

This chapter introduces the concept of mini apps and provides examples of their look and feel.

This chapter looks at the mark-up, styling, scripting, and updating options of various mini apps platforms.

The Streams API allows JavaScript to programmatically access streams of data received over the network and process them as desired.

A foundational overview of how to build a tabs component similar to those found in iOS and Android apps.

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.

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.

Maintaining aspect ratio within images and elements is now easier to achieve with the new aspect-ratio CSS property.

A brief overview of the history, architecture, use cases, and future of WebRTC.

Learn how to optimize carousels for performance and usability.

Learn about our plans for improving the Cumulative Layout Shift metric and give us feedback.

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

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,

A foundational overview of how to build a responsive slide out sidenav

Learn how to build a responsive slide out side navigation layout component.

Learn 5 different centering techniques with CSS.

Follow 5 centering techniques as they go through a series of tests to see which one is the most resilient to change.

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.

Learn how to implement cross-browser Houdini Paint API's and explore a world of Houdini worklets with Houdini.how.

Learn best practices for address forms.

Maximize conversions by helping your users complete address and payment forms as quickly and easily as possible.

Help your users sign up, sign in and manage their account details with a minimum of fuss.

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.

Learn best practices for payment forms.

A new modular tool that enables automatic gathering of performance data from multiple sources.

Use cross-platform browser features to build a simple sign-up form that's secure, accessible, and easy to use.

How establish a two-way communication channel between the page and the service worker.

How service workers can proactively communicate with the page to inform about certain events.

How to communicate window and service worker to perform tasks related to performance, caching and offline.

How web workers and service workers can improve the performance of your website, and when to use a web worker versus a service worker.

Web apps can now disable mouse acceleration when capturing pointer events.

Learn how to build an experience similar to Instagram Stories on the web.

A foundational overview of how to build an experience similar to Instagram Stories on the web.

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.

This post provides guidance on how to adopt the loading attribute in content management systems.

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.

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.

An overview of what push notifications are, why you might use them, and how they work.

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.

Demonstrating how high performance techniques can create complex and beautiful animations.

An SXG is a delivery mechanism that makes it possible to authenticate the origin of a resource independently of how it was delivered.

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.

New logical property shorthands and new inset properties for Chromium.

Make sure your service worker knows what to do when a partial response is requested.

Animating well is core to a great web experience. This post explains why certain types of animation perform better than others.

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.

Pan, tilt, and zoom features on cameras are finally controllable on the web.

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 windows are a common type of memory leak that is particularly difficult to find and fix.

Learn how to create a simple offline experience for your app.

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.

Use CSS to to customize the color, size or type of numbers or bullets in `` or `` elements.

By redirecting requests to /.well-known/change-password to the change password URL, you can let users update their passwords easier than before.

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.

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.

How lying to screen readers cures accessibility, when it doesn't rub salt in it!

Learn how to use WebAssembly to bring libraries, written in other languages, to the Web in a safe and idiomatic manner.

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.

Async Clipboard API simplifies permissions-friendly copy and paste.

Learn how different components can be used to render web content inside Android apps.

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.

What the Bulletin team learned about service workers while developing a PWA.

Learn how to setup Lighthouse CI and integrate it into developer workflows.

Bringing better security and a better user experience to Google accounts.

Learn how to implement CSS custom properties with semantic typing, a fallback value, and more, directly in your CSS file.

Leverage A/B testing to evaluate the impact of site speed on your business metrics.

The pros and cons of using consistent or different expiry logic across the service worker cache and HTTP cache layers.

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 using the Payment Request API.

Learn how to adapt your web-based payment app to work with Web Payments and provide a better user experience for customers.

Learn how to register a web-based payment app to a customers' browser. You'll also learn how to debug them.

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.

This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts.

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.

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.

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 simple sign-in form that's secure, accessible, and easy to use.

Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.

How to debug SEO issues on individual pages or across an entire site.

How to implement a resilient search experience with Workbox, using Background Sync and the Push API.

Embed a media file in a web page using the and tags.

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.

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.

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!

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.

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.

quicklink is a library to achieve faster subsequent page-loads by prefetching in-viewport links during idle time.

Fetch Metadata is a new web platform feature designed to allow servers to protect themselves from cross-origin attacks.

When creating a layout using CSS, ensure you give the same experience for keyboard users as other users.

Wrangling your web animations is about to get much easier.

Learn how merchants integrate payment apps, how payment transactions work with the Payment Request API, and what's possible in Web Payments.

Learn how to adapt your Android payment app to work with Web Payments and provide a better user experience for customers.

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.

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.

Build a solid business case for your PWA. Learn when you should invest, and how you can measure its success.

App shortcuts give quick access to a handful of common actions that users need frequently.

Details of Chrome's and other browsers' plans to remove AppCache.

Best practices for combining different installation offerings to increase installation rates and avoid platform competition and cannibalization.

Persistent storage can help protect critical data from eviction, and reduce the chance of data loss.

CommonJS modules are very dynamic, which prevents JavaScript optimizers and bundles perform advanced optimizations over them.

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.

Learn how to profile the performance of Web Audio apps in Chrome using `about://tracing` and the **WebAudio** extension in Chrome DevTools.

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" are frequently cited but often misunderstood terms. This page explains what they are and how they are different.

Learn how to measure memory usage of your web page in production to detect regressions.

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.

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.

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.

How to ensure that the core functionality of your website is always available, accessible, secure, usable, discoverable, and fast.

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.

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.

How to determine a server's bottleneck, quickly fix the bottleneck, improve server performance, and prevent regressions.

Learn to make your pages more accessible by improving your color and contrast usage.

Introducing Trusted Types: a browser API to prevent DOM-based cross-site scripting in modern web applications.

How to open a Progressive Web App in an Android app.

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 generate a TLS certificate with SXG extensions, install tools for generating SXG files, and configure nginx to serve SXG files.

How to get and serve SXG files using nginx, and the challenges of subresource prefetching.

Use media queries to send images that are only as large as they need to be, a technique commonly known as responsive images.

How other departments can help make your website speed optimization project a bigger success.

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.

Learn how to serve signed exchanges (SXGs) using Web Packager.

Use the beforeinstallprompt event to provide a custom, seamless, in-app install experience for your users.

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.

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 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.

Learn about how Chrome is investing efforts in a number of open-source tools to advance the JavaScript ecosystem

An introduction to Progressive Web Apps (PWAs) and the three pillars that separate them from other web apps.

How to register routes in Workbox so that your Progressive Web App shows up in system-level sharing UIs, alongside platform-specific apps.

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.

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.

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.

Learn about adaptive loading pattern, how to implement it, and how Facebook, Tinder, eBay, and other companies use adaptive loading in production.

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.

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.

Comments from survey respondents about various image optimization techniques.

In this codelab, learn how to build a push notifications server.

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

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,

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.

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

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

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.

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.

Learn about how cookies work and what are first-party and third-party cookies.

Understand the value of fast ads and how to think about ad speed.

Use push notifications to engage users with targeted, timely updates.

In this codelab, learn how to request user permission and send notifications.

In this codelab, learn how to manage notifications with a service worker.

A walkthrough of using WebPageTest to identify and fix layout instability issues.

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.

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.

Learn how to speed up future navigations by prefetching resources.

Find out how to fix mixed content errors on your website, in order to protect users and ensure that all of your content loads.

Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources are loaded over an insecure HTTP connection.

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.

An interactive demonstration of how to specify which icon should show up on iOS home screens.

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.

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.

This post explains how to load WebFonts to prevent layout shifts and blank pages when WebFonts are not available when the page loads.

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.

Learn how to create installable progressive Angular applications.

Learn how to use Lighthouse and Chrome DevTools to identify slow third-party resources.

Learn how to improve load times and user experience by avoiding the common pitfalls of using third-party scripts.

Consider using an image CDN to optimize your site's images and reduce its data cost for your users.

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.

New web platform features make it easier to build custom elements that work like built-in form controls.

Learn about techniques for optimizing slow third-party resources with some help from Lighthouse.

Learn about rel=preconnect and rel=dns-prefetch resource hints and how to use them.

Learn how to add background effects like blurring and transparency to UI elements on the web using the CSS backdrop-filter property.

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.

Learn how to make large lists more responsive by implementing virtual scrolling with the Angular Component Dev Kit.

Learn how to optimize your Angular app's change detection to make it more responsive.

Learn how to use Angular's preloading strategies for faster apps.

Learn how to use the Network Information API to adapt your content based on the network quality.

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.

Learn how to make your Angular application accessible using codelyzer.

Learn how to use the Angular service worker to precache the static assets in your app.

Learn how to use performance budgets directly in the Angular CLI!

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.

Learn how to make your initial app bundle smaller by using route-level code splitting.

Learn how to make your Angular application faster, more reliable, discoverable, installable, and accessible!

Use srcset to automatically choose the right image size.

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.

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.

Demonstrate the revenue generated by site improvements while excluding external factors such as marketing campaigns.

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.

Progressive Web Apps are easy to install with a new install button in Chrome’s address bar (omnibox).

Learn what impact website performance has on different parts of the e-commerce funnel

How to promote installation of Progressive Web Apps and best practices.

How to promote installation of Progressive Web Apps and best practices.

Working with service workers is new and unfamiliar for many web devs. This post provides some tips for wrapping your mind around them.

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.

Learn to diagnose costly, work-preventing user interaction.

Learn how use Critical to extract and inline critical CSS, and improve render times.

Learn how to improve render times with critical CSS technique and how to choose the best tool for your project.

For Google I/O 2019, we introduced three new Web Performance initiatives that we hope will lead to better user experiences for everyone.

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.

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.

Wouldn't it be great if users could search your site using their camera?

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.

Use Network Information API to adapt the assets served to users based on the quality of their connection.

In this codelab, learn how Brotli compression can further reduce compression ratios and your app's overall size.

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.

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.

Brands that optimize speed will often find they regress quickly. In this post we explore how to make sure your fast experience stays fast.

Speed matters, but what exactly do we mean by it? What does it mean to have a fast site?

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.

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.

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.

Workbox is built into Create React App with a default configuration that precaches all static assets in your application with every build.

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.

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.

react-window is a library that allows large lists to be rendered efficiently.

In this codelab, learn how to improve the performance of a page by preloading and prefetching resources.

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.

Learn how to defer non-critical CSS with the goal of optimizing the Critical Rendering Path, and improving First Contentful Paint (FCP).

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.

Create sites that respond to the needs and capabilities of the device they're viewed on.

Constructable Stylesheets provide a seamless way to create and distribute styles to documents or shadow roots without worrying about FOUC.

Recommendations for implementing logic and rendering in apps.

Define performance budgets with minimal setup and enforce them as part of your development workflow using bundlesize with Travis CI.

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.

Learn how to set performance budgets and keep your bundlesize in check with webpack.

You've done hard work to get fast, now make sure you stay fast by automating performance testing in Travis CI with Lighthouse Bot.

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.

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.

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.

Standard HTML elements have keyboard accessibility built-in. When building custom interactive components, use tabindex to ensure that they're keyboard accessible.

By using the correct elements for headings and landmarks, you can dramatically improve the navigation experience for users of assitive technology.

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.

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!

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.

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?

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.

In this codelab, learn how to inerpret network traffic using Chrome's DevTools.

In this codelab, learn how to improve performance by replacing an animated GIF with a video.

Sending large JavaScript payloads impacts the speed of your site significantly. Instead of shipping all the JavaScript to your user as soon as the first page of your application is loaded, split your bundle into multiple pieces and only send what's necessary at the very beginning.

In this codelab, learn how to use imagemin with webpack to optimize JPEG and PNG images for faster download.

Have you ever seen an animated GIF on a service like Imgur or Gfycat, inspected it in your dev tools, only to find out that GIF was really a video? There's a good reason for that. Animated GIFs can be downright huge! By converting large GIFs to videos, you can save big on users' bandwidth.

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.

In this codelab, learn how to improve the performance of an application by removing any unused and unneeded dependencies.

To defend against attacks, a developer needs to mitigate vulnerabilities and add security features to an application. Luckily, on the web, the browser provides many security features, including the idea of a "sandbox".

Lighthouse is a tool that helps you measure and find ways to improve a page's performance. Lighthouse gives you a report on how the page did. The report provides a score for each metric and a list of opportunities which, if you implement them, should make the page load faster.