Trust is good, observation is best: Intersection Observer v2
Intersection Observer v2 can detect if an element was visible at the time of intersection.
Introduction to fetch()
The `fetch()` API is landing in the window object and can replace XHRs.
Lazy loading video
This post explains lazy loading and the options available to you to lazy loading video.
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.
Logical layout enhancements with flow-relative shorthands
New logical property shorthands and new inset properties for Chromium.
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.
Real-Time Effects For Images and Video
Many of today's most popular apps let you apply filters and effects to images or video. This article shows how to implement these features on the open web.
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.
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.
Measure 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.
Media patterns
A collection of common patterns for working with media.
Media application basics
Working with media often requires changing the characteristics of media files. On this page, you'll learn about the tools used and how to install them quickly.
Capturing an image from the user
Most browsers can get access to the user's camera.
Media conversion
Commands needed to convert a raw mov file to media assets packaged for DASH or HLS.
What is EME?
Enabling HTTPS on your servers is critical to securing your webpages.
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.
Mobile Web Video Playback
Create the best mobile media experience on the Web by following these best practises.
New syntax for range media queries
Find out how this new syntax can streamline media queries.
Recording Audio from the User
Most browsers can get access to the user's microphone.
Recording Video from the User
Most browsers can get access to the user's camera.
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.
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.
Migrate to User-Agent Client Hints
Strategies to migrate your site from relying on the user-agent string to User-Agent Client Hints.
Mobifying your HTML5 site
A non-responsive approach to building cross-device webapps
Multi-touch web development
Touch and mouse
More capable form controls
Build custom elements that work like built-in form controls.
Multiplayer audio fun
A demo using the Web Audio API.
HTML5 vs Native
Semantics and navigating content
The role of semantics in page navigation
New patterns for media apps
This blog post announces a new collection of patterns for media apps.
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.
Using the Notifications API
Common techniques to build offline applications
Some common recipes to make your app work offline.
Create an offline fallback page
Learn how to create a simple offline experience for your app.
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.
Optimize Interaction to Next Paint
Learn how to optimize your website's Interaction to Next Paint.
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?
Optimize Time to First Byte
Learn how to optimize for the Time to First Byte metric.
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.
The origin private file system
Using the Page Visibility API
How to measure search engine optimization with Lighthouse
The Lighthouse SEO audit scans your page, tests for things that matter to search engines, and gives you a score so you can see specific areas for improvement. SEO matters because it's how you get more relevant users viewing your content.
Help users manage passkeys effectively
These passkey management guidelines help you accomplish an intuitive, secure, and robust experience for your users.
Create a passkey for passwordless logins
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.
Payment and address form best practices
Maximize conversions by helping your users complete address and payment forms as quickly and easily as possible.
Visual searching with the Web Perception Toolkit
Wouldn't it be great if users could search your site using their camera?
Next steps
Having completed a site audit, you should have accurate review data in a form that makes it easy for developers and other stakeholders to prioritize and justify changes.
Share the results
Once you've audited a site, make sure to package the results in a digestible form. Be sensitive to the people on the receiving end of your audit, structure your report carefully and present your data in terms of opportunities and solutions.
Web permissions best practices
Follow these best practices when asking users for permission to access sensitive capabilities (such as camera, microphone, and location).
Persistent storage
Persistent storage can help protect critical data from eviction, and reduce the chance of data loss.
Google Photography Prize Gallery
Pointer lock and first person shooter controls
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.
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.
Practical prompt engineering for smaller LLMs
Learn how to adjust your prompts to achieve your preferred results across different LLMs, models, and model sizes.
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.
Prepare media files for the web
In this section you'll learn how to format video for mobile web playback, and how to create multiple files to cover a range of browsers, plus how to encrypt them.
Progressively enhance your Progressive Web App
Progressive enhancements ensure your PWA remains useful on all modern browsers, while delivering an advanced experience on browsers that support newer web capabilities.