Optimize CSS background images with media queries
Use media queries to send images that are only as large as they need to be, a technique commonly known as responsive images.
Optimize Core Web Vitals for business decision makers
Learn how business decision makers and non-developers can improve Core Web Vitals.
Optimize Interaction to Next Paint
Learn how to optimize your website's Interaction to Next Paint.
Optimize input delay
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.
Optimize JavaScript execution
JavaScript often triggers visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that result in visual changes, like searching or sorting data. Badly-timed or long-running JavaScript is a common cause of performance issues. You should look to minimize its impact where you can.
Optimize Largest Contentful Paint
A step-by-step guide on how to break down LCP and identify key areas to improve.
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.
Optimizing Web Vitals using Lighthouse
Today, we will cover new tooling features in Lighthouse, PageSpeed and DevTools to help identify how your site can improve on the Web Vitals.
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.
Eliminating Unnecessary Downloads
You should audit your resources periodically to ensure that each resource is helping deliver a better user experience.
JavaScript Start-up Optimization
Keep your network transmission and parse/compile cost for JavaScript low to ensure pages get interactive quickly.
Load Third-Party JavaScript
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.
Optimize the encoding and transfer size of text-based assets
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.
Delivering Fast and Light Applications with Save-Data
The Save-Data client hint request header available in Chrome, Opera, and Yandex browsers enables developers to deliver fast and light applications to users who have opted-in to 'data saving' mode in the browser.
Orchestrating payment transactions with a service worker
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.
Requesting performance isolation with the Origin-Agent-Cluster header
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.
The origin private file system
Fix an overloaded server
How to determine a server's bottleneck, quickly fix the bottleneck, improve server performance, and prevent regressions.
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.
Secure and seamless passkeys: A deployment checklist
A checklist for developers to make sure their passkey implementations are following all the best practices.
Sign in with a passkey through form autofill
Create a sign in experience that leverages passkeys while still accommodating existing password users.
Designing the user experience of passkeys on Google accounts
Bringing better security and a better user experience to Google accounts.
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?
Performance as a default with Next.js
Audit performance
Audit your site to build a performant experience, highlighting quick wins that can be implemented with minimal sign-off. Use metrics to prioritize effort.
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.
Prework
Before gathering performance metrics for a site audit, there are several checks you can do to identify easy fixes and areas for focus. Some of these checks are relatively subjective, but can identify problems that affect perceived performance.
Check site security
You won't be able to build a PWA without HTTPS. Serving your site over HTTPS is fundamental for security, and many APIs won't work without it. If you need to justify implementation costs, find out why HTTPS matters.
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.
Use tools to measure performance
There are several core objectives for building a performant, resilient site with low data cost. For each objective, you need an audit.
Performance budgets 101
Good performance is rarely a side effect. Learn about performance budgets and how they can set you on track for success.
Performance budgets with the Angular CLI
Learn how to use performance budgets directly in the Angular CLI!
Use forensics and detective work to solve JavaScript performance mysteries
Optimizing Content Efficiency
The amount of data downloaded by apps continues to increase over time. To deliver great performance you must optimize data delivery as much as possible.
Adapting to Users with Client Hints
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.
Understanding Low Bandwidth and High Latency
It's important to understand what using your app or site feels like when connectivity is poor or unreliable, and build accordingly. A range of tools can help you.
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.
Precaching in Create React App with Workbox
Workbox is built into Create React App with a default configuration that precaches all static assets in your application with every build.
Precaching with the Angular service worker
Learn how to use the Angular service worker to precache the static assets in your app.
Establish network connections early to improve perceived page speed
Learn about rel=preconnect and rel=dns-prefetch resource hints and how to use them.
Faster web navigation with predictive prefetching
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.
prefers-color-scheme: Hello darkness, my old friend
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.
prefers-reduced-motion: Sometimes less movement is more
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.
Preload critical assets to improve loading speed
As soon as you open any web page, the browser requests an HTML document from a server, parses the contents of the HTML file, and submits separate requests for any other external references. The critical request chain represents the order of resources that are prioritized and fetched by the browser.
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.
Preload responsive images
Learn about new and exciting possibilities for preloading responsive images to ensure great user experience.
Don't fight the browser preload scanner
Find out what the browser preload scanner is, how it helps performance, and how you can stay out of its way.
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.
Pre-render routes with react-snap
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.