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.
Code splitting with dynamic imports in Next.js
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.
Address form best practices codelab
Learn best practices for address forms.
Art direction
In this codelab, learn how to load completely different images based on device display size.
Codelab: Building a Sidenav component
Learn how to build a responsive slide out side navigation layout component.
Codelab: Building a Stories component
Learn how to build an experience similar to Instagram Stories on the web.
Building resilient search experiences with Workbox
How to implement a resilient search experience with Workbox, using Background Sync and the Push API.
Codelab: Centering in CSS
Learn 5 different centering techniques with CSS.
Reduce JavaScript payloads with code splitting
In this codelab, learn how to improve the performance of a simple application through code splitting.
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.
Explore DevTools Network panel
In this codelab, learn how to inerpret network traffic using Chrome's DevTools.
Extract and inline critical CSS with Critical
Learn how use Critical to extract and inline critical CSS, and improve render times.
Fix sneaky 404s
In this codelab, learn how to track down a sneaky 404 that may prevent your page from being properly indexed.
Configuring HTTP caching behavior
In this codelab, learn how to control resource caching behavior using HTTP headers.
Using Imagemin with webpack
In this codelab, learn how to use imagemin with webpack to optimize JPEG and PNG images for faster download.
Make it installable
In this codelab, learn how to make a site installable using the beforeinstallprompt event.
Get started with the Notifications API
In this codelab, learn how to request user permission and send notifications.
Build a push notifications server
In this codelab, learn how to build a push notifications server.
Use a Service Worker to manage notifications
In this codelab, learn how to manage notifications with a service worker.
Optimize third-party JavaScript
Learn about techniques for optimizing slow third-party resources with some help from Lighthouse.
Payment form best practices codelab
Learn best practices for payment forms.
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.
Preload web fonts to improve loading speed
In this codelab, learn how to improve the performance of a page by preloading web fonts.
Remove unused code
In this codelab, learn how to improve the performance of an application by removing any unused and unneeded dependencies.
Replace GIFs with video
In this codelab, learn how to improve performance by replacing an animated GIF with a video.
Same Origin Policy & Fetch requests
In this codelab, learn how the same-origin policy works when fetching resources.
Same Origin Policy & iframe
In this codelab, learn how the same-origin policy works when accessing data inside an iframe.
Serve images with correct dimensions
In this codelab, learn how to serve images with the correct dimensions to improve network performance.
Creating WebP Images with the Command Line
In this codelab, learn how to serve optimized images using WebP.
Working with service workers
In this codelab, learn how to make an application reliable by registering a service worker.
Setting performance budgets with webpack
Learn how to set performance budgets and keep your bundlesize in check with webpack.
Use cross-platform browser features to build a sign-in form
Use cross-platform browser features to build a sign-in form that's secure, accessible, and easier to use.
Sign-up form best practices codelab
Use cross-platform browser features to build a sign-up form that's secure, accessible, and easier to use.
Specifying multiple slot widths
In this codelab, learn how to use the sizes attribute to size images correctly depending on the user's viewport.
Minify and compress network payloads with gzip
In this codelab, learn how both minifying and compressing the JavaScript bundle for an application improves page performance by reducing the app's request size.
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.
Two ways to prefetch: <link> tags and HTTP headers
Learn how to speed up future navigations by prefetching resources.
Color and contrast accessibility
Learn to make your pages more accessible by improving your color and contrast usage.
Improve dark mode default with color-scheme and a meta tag
Opt your pages in to theme-specific defaults of the user agent stylesheet, such as form controls, scroll bars, and system colors. This feature prevents browsers from applying any transformations on their own.
How CommonJS is making your bundles larger
CommonJS modules are very dynamic, which prevents JavaScript optimizers and bundles perform advanced optimizations over them.
Google Community Guidelines and Anti-Harassment Policy for In-Person and Virtual Events
Community Guidelines
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.
HowTo Components – Overview
HowTo Components
HowTo Components – howto-checkbox
HowTo Components – howto-tabs
HowTo Components – howto-tooltip
Choose the correct level of compression
Many images can be heavily compressed, giving excellent performance improvements. This post helps you to choose the right level of compression to maintain the look of images while getting the best performance.
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.
Use conic gradients to create a cool border
Constructable Stylesheets
Constructable Stylesheets provide a seamless way to create and distribute styles to documents or shadow roots without worrying about FOUC.
Containers and codecs
Media files are a bit like onions. The file that you see in your operating system shell is only a container with multiple data streams and different allowable types of encodings.
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.
Content reordering
When creating a layout using CSS, ensure you give the same experience for keyboard users as other users.
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 br
Control focus with tabindex
When building custom interactive components, use tabindex to ensure that they're keyboard accessible.
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.
Best practices for cookie notices
Learn about how cookie notices affect performance, performance measurement, and UX.
Make your website "cross-origin isolated" using COOP and COEP
Learn how to set up the opt-in-based isolated environment, called cross-origin isolated, with COOP and COEP.
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.