Best practices for carousels
Learn how to optimize carousels for performance and usability.
Improve performance and UX for client-side AI
Discover the benefits of client-side AI, including low latency, reduced server-side costs, no API key requirements, increased user privacy, and offline access.
Client-side rendering of HTML and interactivity
Rendering HTML with JavaScript is different than rendering HTML that's sent by the server—and that can affect performance. Learn the difference in this guide, and what you can do to preserve your website's rendering performance—especially where interactions are concerned.
Reduce JavaScript payloads with code splitting
In this codelab, learn how to improve the performance of a simple application through code splitting.
Using Imagemin with webpack
In this codelab, learn how to use imagemin with webpack to optimize JPEG and PNG images for faster download.
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.
Serve images with correct dimensions
In this codelab, learn how to serve images with the correct dimensions to improve network performance.
Setting performance budgets with webpack
Learn how to set performance budgets and keep your bundlesize in check with webpack.
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.
Two ways to prefetch: <link> tags and HTTP headers
Learn how to speed up future navigations by prefetching resources.
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.
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
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.
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.
Why is CrUX data different from my RUM data?
Learn about reasons why RUM data can show different Core Web Vitals numbers from CrUX.
CSS for Web Vitals
This article covers CSS-related techniques for optimizing Web Vitals.
Correlating Core Web Vitals and ad revenue with Google tools
Learn how you can use Google tools to help correlate your Core Web Vitals with ad revenue.
Debounce your input handlers
Input handlers are a potential cause of performance problems in your apps, as they can block frames from completing, and can cause additional and unnecessary layout work.
Debug performance in the field
Learn how to attribute your performance data with debug information to help you identify and fix real-user issues with analytics
How the Core Web Vitals metrics thresholds were defined
The research and methodology behind Core Web Vitals thresholds
Detached window memory leaks
Detached windows are a common type of memory leak that is particularly difficult to find and fix.
Discover performance opportunities with Lighthouse
Lighthouse is a tool that helps you measure and find ways to improve a page's performance. Lighthouse gives you a report on how the page did. The report provides a score for each metric and a list of opportunities which, if you implement them, should make the page load faster.
How large DOM sizes affect interactivity, and what you can do about it
Large DOM sizes can be a factor in whether interactions are fast or not. Learn more about the relationship between DOM size and INP, and what you can do to reduce DOM size and other ways to limit rendering work when your page has lots of DOM elements.
Best practices for using third-party embeds
This document discusses performance best practices that you can use when loading third-party embeds, efficient loading techniques and the Layout Shift Terminator tool that helps reduce layout shifts for popular embeds.
Fast ads matter
Understand the value of fast ads and how to think about ad speed.
Fast playback with audio and video preload
Faster playback start means more people watching your video or listening to your audio. That's a known fact. In this article I'll explore techniques you can use to accelerate your media playback by actively preloading resources depending on your use case.
Optimize resource loading with the Fetch Priority API
The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals.
Fixing website speed cross-functionally
How other departments can help make your website speed optimization project a bigger success.
Best practices for fonts
Learn about how to optimize web fonts for Core Web Vitals.
Get started: optimize an Angular application
Learn how to make your Angular application faster, more reliable, discoverable, installable, and accessible!
Get started: optimize your React app
React is an open-source library that makes building UIs easier. This learning path will cover different APIs and tools within the ecosystem that you should consider using to improve the performance and usability of your application.
Improved Next.js and Gatsby page load performance with granular chunking
Learn how both Next.js and Gatsby have improved their build output to minimize duplicate code and improve page load performance
Handling navigation requests
Navigation requests are requests for HTML made whenever you enter a new URL in the navigation bar, or follow a link on a page. This is where service workers make their biggest impact on performance: by using a service worker to respond without waiting for the network, you can ensure that navigations are reliably fast and resilient.
How can performance improve conversion?
Learn what impact website performance has on different parts of the ecommerce funnel
How to measure speed?
Real-world performance is highly variable due to differences in users' devices, network connections, and other factors. In this post we explore tools that can help you collect lab or field data to assess page performance.
How to stay fast?
Brands that optimize speed will often find they regress quickly. In this post we explore how to make sure your fast experience stays fast.
Image policies for fast load times and more
Images take up a significant amount of visual space and make up the majority of the downloaded bytes on a website. Use the new feature policies to identify oversized images.
Imperative caching guide
How to communicate window and service worker to perform tasks related to performance, caching and offline.
Incorporate performance budgets into your build process
The best way to keep an eye on your performance budget is to automate it. Find out how to choose a tool that best fits your needs and current setup.
Why lab and field data can be different (and what to do about it)
Learn why tools that monitor Core Web Vitals metrics may report different numbers, and how to interpret those differences.
Largest Contentful Paint (LCP)
This post introduces the Largest Contentful Paint (LCP) metric and explains how to measure it
The performance effects of too much lazy loading
Eagerly loading images within the initial viewport—while liberally lazy loading the rest—can improve Web Vitals while loading fewer bytes.
Core Web Vitals | Articles
Performance monitoring with Lighthouse CI
Learn how to setup Lighthouse CI and integrate it into developer workflows.
Lighthouse user flows
Try out a new Lighthouse API to measure performance and best practices throughout a user flow.
Prefetch resources to speed up future navigations
Learn about rel=prefetch resource hint and how to use it.
Techniques to make a web app load fast, even on a feature phone
Feature phones are making a resurgence and are popular, especially in emerging markets where 2G is the norm. Here are our learnings from making PROXX, a mobile Minesweeper clone, load fast on feature phones on 2G.
Effectively loading ads without impacting page speed
In today's digital world, online advertising is a critical part of the free web we all enjoy. However, poorly implemented ads can lead to a slower browsing experience, frustrating users and diminishing engagement. Learn how to effectively load ads without impacting your page speed, ensuring a seamless user experience, and maximizing revenue opportunities for website owners.
Love your cache ❤️
First load performance is important, but it's not everything. Users who load your site a second time will use their cache to get access to your content—so it's key to make sure it works well too, both for speed and correctness.
HTML5 techniques for optimizing mobile performance
Profiling mobile HTML5 apps with Chrome DevTools
Threading the web with module workers
Module workers make it easy to unblock the main thread by moving expensive code to a background thread while keeping the ergonomic and performance benefits of standard JavaScript modules.
Monitor your web page's total memory usage with measureUserAgentSpecificMemory()
Learn how to measure memory usage of your web page in production to detect regressions.
How to assess loading performance in the field with Navigation Timing and Resource Timing
Learn the basics of using the Navigation and Resource Timing APIs to assess loading performance in the field.
OffscreenCanvas—speed up your canvas operations with a web worker
This document explains how you can use the OffscreenCanvas API to achieve performance improvements when rendering graphics in your web app.