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