Web Vitals patterns
This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores. Use the code in these examples to help ensure your projects stay on the right track.
- Part 1: Client-side AI to combat online toxicity
- Part 2: Build client-side AI toxicity detection
- Total Blocking Time (TBT)
- Web Vitals
- Getting started with measuring Web Vitals
- The most effective ways to improve Core Web Vitals
- Optimize Largest Contentful Paint
- The CSS content-visibility property is now Baseline Newly available
- Compare LLM capability with summarization
- How the Core Web Vitals metrics thresholds were defined
- Core Web Vitals workflows with Google tools
- Manually diagnose slow interactions in the lab
- Baseline
- Back/forward cache
- CSS nesting improves with CSSNestedDeclarations
- First Input Delay (FID)
- Debug performance in the field
- Benchmarking the performance of CSS @property
- Improve performance and UX for client-side AI
- Correlating Core Web Vitals and ad revenue with Google tools
- It's time to lazy-load offscreen iframes!
- Storage for the web
- Building multiple Progressive Web Apps on the same domain
- The Web Push Protocol
- What makes a good Progressive Web App?
- How Chrome handles updates to the web app manifest
- What does it take to be installable?
- Add a web app manifest
- Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)
- Accessing hardware devices on the web
- Allow passkey reuse across your sites with Related Origin Requests
- Browser-level image lazy loading for the web
- Choose the right image format
- Custom metrics
- Measure and debug performance with Google Analytics 4 and BigQuery
- Web permissions best practices
- Best practices for cookie notices
- Customize media notifications and playback controls with the Media Session API
- Find slow interactions in the field
- Using tabindex
- Time to First Byte (TTFB)
- Understand LLM sizes
- Practical prompt engineering for smaller LLMs
- Optimize Time to First Byte
- Optimize long tasks
- Interaction to Next Paint (INP)
- CSS color-scheme-dependent colors with light-dark()
- WebAssembly performance patterns for web apps
- CSS animated grid layouts
- Play the Chrome dino game with your gamepad
- The inert attribute
- Meet the Web.dev AI Team
- Upgrade your site search: Contextual answers with generative AI
- Ethics and AI
- What is Artificial Intelligence?
- Determine the passkey provider with AAGUID
- Compiling to and optimizing Wasm with Binaryen
- The <model-viewer> web component
- Capture audio and video in HTML5
- userVerification deep dive
- Why is CrUX data different from my RUM data?
- Accessibility for web developers
- Load Third-Party JavaScript
- Largest Contentful Paint (LCP)
- Prevent creation of a new passkey if one already exists
- Work with IndexedDB
- 5 CSS snippets every front-end developer should know in 2024
- What are the parts of a URL?
- Discoverable credentials deep dive
- Rendering performance
- ResizeObserver: it's like document.onresize for elements
- Optimize the encoding and transfer size of text-based assets
- Preload modules
- OffscreenCanvas—speed up your canvas operations with a web worker
- First Contentful Paint (FCP)
- Content delivery networks (CDNs)
- What makes for a good sign-out experience?
- Time to Interactive (TTI)
- Optimize resource loading with the Fetch Priority API
- The :user-valid and :user-invalid pseudo-classes
- Optimize Core Web Vitals for business decision makers
- The nuances of base64 encoding strings in JavaScript
- CSS subgrid
- Effectively loading ads without impacting page speed
- Four common types of code coverage
- To test or not to test, a technical perspective
- Defining test cases and priorities
- User-centric performance metrics
- Preload responsive images
- Adapting typography to user preferences with CSS
- Pyramid or Crab? Find a testing strategy that fits
- Three common types of test automation
- Eliminating Unnecessary Downloads
- What is WebAssembly and where did it come from?
- Compiling mkbitmap to WebAssembly
- Securely hosting user data in modern web applications
- The origin private file system
- Deploying AVIF for more responsive websites
- Optimize Interaction to Next Paint
- Baseline features you can use today
- Client-side rendering of HTML and interactivity
- Optimize input delay
- How large DOM sizes affect interactivity, and what you can do about it
- Script evaluation and long tasks
- Optimize Cumulative Layout Shift
- Using the Web Vitals extension to debug Core Web Vitals issues
- Build in-browser WordPress experiences with WordPress Playground and WebAssembly
- Cumulative Layout Shift (CLS)
- New functionality for developers—brought to you by WebAssembly
- What are source maps?
- PWAs in app stores
- 6 CSS snippets every front-end developer should know in 2023
- Trigonometric functions in CSS
- Perform efficient per-video-frame operations on video with requestVideoFrameCallback()
- GDE community highlight: Lars Knudsen
- New patterns for media apps
- Speedy CSS Tip! Animated Gradient Text
- Building Chrometober!
- Building a tooltip component
- Sign in with a passkey through form autofill
- Create a passkey for passwordless logins
- Building a floating action button (FAB) component
- Best practices for fonts
- Testing Web Design Color Contrast
- GDE community highlight: Alba Silvente Fuentes
- Speedy CSS Tip! Animated Loader
- Building the main navigation for a website
- Is it :modal?
- Best practices for tags and tag managers
- Creative list styling
- Building a crooked grid illusion
- How Nordhealth uses Custom Properties in Web Components
- Finer grained control over CSS transforms with individual transform properties
- CSS border animations
- New patterns
- How the BBC is rolling out HSTS for better security and performance.
- Why lab and field data can be different (and what to do about it)
- A win-win situation
- The end of Internet Explorer
- Farewell to HTML5Rocks
- First-party cookie recipes
- Synchronize audio and video playback on the web
- Use conic gradients to create a cool border
- The difference between JavaScript libraries and frameworks
- Choose a JavaScript library or framework
- Implement error handling when using the Fetch API
- The Front-End Developer's Guide to the Terminal
- An API for fast, beautiful web fonts
- GOV.UK drops jQuery from their front end.
- Building a button component
- Don't fight the browser preload scanner
- Best practices for measuring Web Vitals in the field
- Bridging the gap
- Finding courage and inspiration in the developer community
- Variable fonts in real life
- Quickly create nice CSS gradients with the CSS Gradient Creator
- Deep dive into top web developer pain points
- Make your site picture perfect with images.tooling.report
- Global and local variable scope
- Building a dialog component
- Debug media playback errors on the web
- GDE community highlight: Nishu Goel
- The performance effects of too much lazy loading
- Building a loading bar component
- Save Credentials from Forms
- Chrome and Firefox soon to reach major version 100
- Building an adaptive favicon
- Drawing to canvas in Emscripten
- Improve security and privacy by updating HTTP Cache
- Additional HTML elements
- Porting USB applications to the web. Part 2: gPhoto2
- Network Error Logging (NEL)
- WebAssembly feature detection
- Porting USB applications to the web. Part 1: libusb
- Building a theme switch component
- Embedding JavaScript snippets in C++ with Emscripten
- PWAs on Oculus Quest 2
- Building Designcember
- Designcember Calculator
- Deep-copying in JavaScript using structuredClone
- Building a toast component
- The UI fund
- Building a 3D game menu component
- Lighthouse user flows
- Everything announced at Chrome Dev Summit 2021
- What's new in PageSpeed Insights
- Towards an animation smoothness metric
- Photoshop's journey to the web
- Building a multi-select component
- How to assess loading performance in the field with Navigation Timing and Resource Timing
- Safe DOM manipulation with the Sanitizer API
- Best practices for using third-party embeds
- How SPA architectures affect Core Web Vitals
- JavaScript eventing deep dive
- Bundling non-JavaScript resources
- Building a split-button component
- Using CSS Module Scripts to import stylesheets
- CSS accent-color
- Building a switch component
- User preference media features client hints headers
- Building a breadcrumbs component
- Using WebAssembly threads from C, C++ and Rust
- PWA with offline streaming
- Media encryption
- Media frameworks
- Media streaming basics
- Find your way with field data in the Web Vitals extension update
- CSS size-adjust for @font-face
- Building a color scheme
- Using AVIF to compress images on your site
- CSS for Web Vitals
- Evolving Cumulative Layout Shift in web tooling
- New CSS functional pseudo-class selectors :is() and :where()
- New Progressive Web App training now available
- The new responsive: Web design in a component-driven world
- Migrate to User-Agent Client Hints
- Excalidraw and Fugu: Improving Core User Journeys
- Security headers quick reference
- ES modules in service workers
- Building a media scroller component
- Optimizing Web Vitals using Lighthouse
- Using asynchronous web APIs from WebAssembly
- Keeping third-party scripts under control
- Customize the window controls overlay of your PWA's title bar
- Breaking down barriers using the DataTransfer API
- Fill OTP forms within cross-origin iframes with WebOTP API
- Building split text animations
- Evolving the CLS metric
- Web Developer Satisfaction
- Building a Settings component
- Debug layout shifts
- JavaScript: What is the meaning of this?
- Programming the mini app way
- What are H5 and QuickApp?
- What are mini apps?
- Mini app components
- Applying the mini app programming principles to an example project
- Mini app DevTools
- Concluding thoughts about mini apps from a web developer
- Other mini app runtime environments
- Mini app open source projects
- Project structure, lifecycle, and bundling
- Mini apps and super apps
- Mini app markup, styling, scripting, and updating
- Mini app standardization
- Streams—The definitive guide
- Building a Tabs component
- A guide to enable cross-origin isolation
- Requesting performance isolation with the Origin-Agent-Cluster header
- The CSS aspect-ratio property
- Best practices for carousels
- WebRTC is now a W3C and IETF standard
- Feedback wanted: The road to a better layout shift metric for long-lived pages
- Use HTTPS for local development
- When to use HTTPS for local development
- Building a sidenav component
- Codelab: Building a Sidenav component
- Centering in CSS
- Codelab: Centering in CSS
- Love your cache ❤️
- Publish, ship, and install modern JavaScript for faster applications
- Cross-browser paint worklets and Houdini.how
- Address form best practices codelab
- Payment and address form best practices
- Payment form best practices codelab
- Sign-up form best practices codelab
- Automating audits with AutoWebPerf
- SMS OTP form best practices
- Sign-up form best practices
- Workers overview
- Imperative caching guide
- Two-way communication with service workers
- Broadcast updates to pages with service workers
- Disable mouse acceleration to provide a better FPS gaming experience
- Codelab: Building a Stories component
- Building a Stories component
- Browser-level lazy loading for CMSs
- Schemeful Same-Site
- Codelab: Build a push notification server
- Codelab: Build a push notification client
- Push notifications overview
- Measuring offline usage
- Examples of high-performance CSS animations
- Signed Exchanges (SXGs)
- CSS min(), max(), and clamp()
- Logical layout enhancements with flow-relative shorthands
- How to create high-performance CSS animations
- Why are some animations slow?
- Handling range requests in a service worker
- Control camera pan, tilt, and zoom
- What are third-party origin trials?
- Detached window memory leaks
- Create an offline fallback page
- Core Web Vitals
- Apply effects to images with CSS's mask-image property
- Create interesting image shapes with CSS's clip-path property
- Custom bullets with CSS ::marker
- Help users change passwords easily by adding a well-known URL for changing passwords
- Handling optional payment information with a service worker
- Orchestrating payment transactions with a service worker
- Media accessibility
- ARIA: poison or antidote?
- Debugging memory leaks in WebAssembly using Emscripten
- content-visibility: the new CSS property that boosts your rendering performance
- Unblocking clipboard access
- Web on Android
- Referer and Referrer-Policy best practices
- Building a PWA at Google, part 1
- Performance monitoring with Lighthouse CI
- Designing the user experience of passkeys on Google accounts
- @property: giving superpowers to CSS variables
- Registering a web-based payment app
- Providing shipping and contact information from an Android payment app
- Service worker caching and HTTP caching
- Web-based payment apps overview
- Relating site speed and business metrics
- Using the Chrome UX Report to look at performance in the field
- Handling navigation requests
- Pixel-perfect rendering with devicePixelContentBox
- Ten modern layouts in one line of CSS
- web.dev LIVE wrap-up
- Sign-in form best practices
- Progressively enhance your Progressive Web App
- Use cross-platform browser features to build a sign-in form
- Web developer tools for debugging JavaScript issues in Google Search
- Building resilient search experiences with Workbox
- Add media to a web page
- Media file basics
- Boldly link where no one has linked before: Text Fragments
- How to file a good browser bug
- Make your PWA feel more like an app
- Measure performance with the RAIL model
- Speed up navigations in React with Quicklink
- Protect your resources from web attacks with Fetch Metadata
- Content reordering
- Web Animations API improvements in Chromium 84
- Empowering payment apps with Web Payments
- Life of a payment transaction
- Setting up a payment method
- Android payment app developers guide
- More variable font options for the macOS system-ui font in Chromium 83
- More variable font options for the macOS system-ui font in Chromium 83
- Get things done quickly with app shortcuts
- How Progressive Web Apps can drive business success
- Preparing for AppCache removal
- Persistent storage
- How to define your install strategy
- How CommonJS is making your bundles larger
- Why you need "cross-origin isolated" for powerful features
- Profiling Web Audio apps in Chrome
- Improved Next.js and Gatsby page load performance with granular chunking
- "Same-site" and "same-origin"
- Making your website "cross-origin isolated" using COOP and COEP
- Monitor your web page's total memory usage with measureUserAgentSpecificMemory()
- web.dev engineering blog #1: How we build the site and use Web Components
- Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag
- Ensure your website is available and usable for everyone during COVID-19
- Accessible tap targets
- Fix an overloaded server
- Accessible responsive design
- Color and contrast accessibility
- Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types
- Using a PWA in your Android app
- Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts
- How to set up Signed HTTP Exchanges (SXG) using nginx
- How to distribute Signed HTTP Exchanges (SXG) using nginx
- Optimize CSS background images with media queries
- Fixing website speed cross-functionally
- Scroll snapping after layout changes
- How to set up Signed Exchanges using Web Packager
- How to provide your own in-app install experience
- Positioning virtual objects in real-world views
- Virtual reality comes to the web, part II
- Augmented reality: You may already know it
- Advancing the web framework ecosystem
- What are Progressive Web Apps?
- Adaptive icon support in PWAs with maskable icons
- Integrate PWAs into built-in sharing UIs with Workbox
- Improving page dismissal in synchronous XMLHttpRequest()
- Threading the web with module workers
- Speed tooling evolutions: highlights from Chrome Developer Summit 2019
- Adaptive loading: improving web performance on slow devices
- Use web workers to run JavaScript off the browser's main thread
- Feedback from the summer 2019 image optimization survey
- Build a push notifications server
- Route prefetching in Next.js
- Performance as a default with Next.js
- Code splitting with dynamic imports in Next.js
- Integrate with the OS sharing UI with the Web Share API
- How AMP can guarantee fastness in your Next.js app
- Virtual reality comes to the web
- Understanding cookies
- SameSite cookie recipes
- Fast ads matter
- Use push notifications to engage and re-engage users
- Get started with the Notifications API
- Use a Service Worker to manage notifications
- Fixing layout instability
- Techniques to make a web app load fast, even on a feature phone
- Smarter custom properties with Houdini’s new API
- Two ways to prefetch: <link> tags and HTTP headers
- Prefetch resources to speed up future navigations
- Fixing mixed content
- What is mixed content?
- Going beyond images with basic video for the web
- Add an Apple touch icon to your Progressive Web App
- Ready Player Web
- Progressive Web Apps in multi-origin sites
- Optimize WebFont loading and rendering
- Reduce web font size
- Create a Progressive Web App with the Angular CLI
- Identify slow third-party JavaScript
- Efficiently load third-party JavaScript
- Use image CDNs to optimize images
- Third-party JavaScript performance
- More capable form controls
- Optimize third-party JavaScript
- Establish network connections early to improve perceived page speed
- Create OS-style backgrounds with backdrop-filter
- Keeping things fresh with stale-while-revalidate
- Virtualize large lists with the Angular CDK
- Route preloading strategies in Angular
- Optimize Angular's change detection
- Faster web navigation with predictive prefetching
- Adapt video to image serving based on network quality
- Audit your Angular app's accessibility with codelyzer
- Performance budgets with the Angular CLI
- Precaching with the Angular service worker
- prefers-color-scheme: Hello darkness, my old friend
- Route-level code splitting in Angular
- Top tips for web performance
- Get started: optimize an Angular application
- Web components: the secret ingredient helping power the web
- Use Lighthouse for performance budgets
- Updates to the Web Payments APIs
- The value of speed
- Address Bar Install for Progressive Web Apps on the Desktop
- How can performance improve conversion?
- Service worker mindset
- Patterns for promoting PWA installation
- How do I notify users that my PWA is installable?
- Image policies for fast load times and more
- Extract and inline critical CSS with Critical
- Are long JavaScript tasks delaying your Time to Interactive?
- Extract critical CSS
- Speed at scale: what's new in web performance?
- Introducing PROXX
- SameSite cookies explained
- Visual searching with the Web Perception Toolkit
- Adaptive serving based on network quality
- Hands-on with Portals: seamless navigation on the web
- Minify and compress network payloads with brotli
- web.dev at I/O 2019
- What is speed?
- How to measure speed?
- How to stay fast?
- Add a web app manifest with Create React App
- Virtualize large lists with react-window
- Pre-render routes with react-snap
- Get started: optimize your React app
- Code splitting with React.lazy and Suspense
- Accessibility auditing with react-axe and eslint-plugin-jsx-a11y
- Precaching in Create React App with Workbox
- Codelab: Preload critical assets to improve loading speed
- prefers-reduced-motion: Sometimes less movement is more
- Defer non-critical CSS
- Trust is good, observation is better: Intersection Observer v2
- Responsive web design basics
- Constructable Stylesheets
- Rendering on the Web
- Using bundlesize with Travis CI
- Incorporate performance budgets into your build process
- Setting performance budgets with webpack
- Using Lighthouse Bot to set a performance budget
- Emscripten and npm
- Is your app installed? getInstalledRelatedApps() will tell you!
- Serve modern code to modern browsers for faster page loads
- Adapting to Users with Client Hints
- Semantics and screen readers
- Style focus
- Use semantic HTML for easy keyboard wins
- Control focus with tabindex
- Keyboard access fundamentals
- Headings and landmarks
- Labels and text alternatives
- What is accessibility?
- Art direction
- What is network reliability and how do you measure it?
- Security should not be so scary!
- Serve images with correct dimensions
- Same Origin Policy & iframe
- Serve responsive images
- Configuring HTTP caching behavior
- Serve images with correct dimensions
- Identify resources loaded from the network
- What are security attacks?
- How search works
- Working with service workers
- Use density descriptors
- Serve modern code to modern browsers for faster page loads