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.
Patterns for promoting PWA installation
How to promote installation of Progressive Web Apps and best practices.
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.
Common Issues and Reporting Bugs
There are right ways of using notifications, and ways of using them better. Learn what makes a good notification. We won't just show you what to do. We'll show you how to do it.
Common notification patterns
Displaying a Notification
Push notifications FAQ
Push events
How push works
Notification behavior
Push notifications overview
An overview of what push notifications are, why you might use them, and how they work.
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.
Subscribe a user to push notifications
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?
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 do I notify users that my PWA is installable?
How to promote installation of Progressive Web Apps and best practices.
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.
PWAs in app stores
Progressive Web Apps can be submitted to app stores like the Android Play Store or the Microsoft Store and more.
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.
Quarantine your site
Take your site offline while you fix the problems.
Introduction to Raphaël.js
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.
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.
Registering a custom protocol handler
Rendering on the Web
Recommendations for implementing logic and rendering in apps.
Request a review
You must request a review from Google to have your page or site unflagged as dangerous or possibly deceptive to users.
requestAutocomplete
Perform efficient per-video-frame operations
Register a callback that runs in the rendering steps, when a new video frame is sent to the compositor.
Resolution
Resolution is the amount of information in a frame of video.
"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.
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.
Play safely in sandboxed IFrames
Securely hosting user data in modern web applications
How to securely display user-controlled content on web applications.
The Credential Management API
Sign in Users
Save Credentials from Forms
Introduction to semantics
Introduction to semantics and assistive technology
Sending messages with web push libraries
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.
The service worker lifecycle
A deep-dive into the service worker lifecycle.