# WebVitals.tools

> The definitive developer reference for Core Web Vitals and web performance optimization.

## About

WebVitals.tools is an open-source web performance reference for developers, marketers, and site owners. We provide comprehensive guides, framework-specific fixes, performance benchmarks, and blog analysis for all Core Web Vitals metrics: LCP, CLS, INP, and TTFB.

## Key Pages

### Guides (Comprehensive metric references)
- [Complete Guide to Largest Contentful Paint (LCP)](/guides/lcp/): Everything about LCP -- thresholds (good: <=2.5s), element types, common causes, step-by-step optimization, and FAQ.
- [Complete Guide to Cumulative Layout Shift (CLS)](/guides/cls/): How CLS is calculated (impact fraction x distance fraction, session windows), thresholds (good: <=0.1), common causes, fixes, and FAQ.
- [Complete Guide to Interaction to Next Paint (INP)](/guides/inp/): The three phases (input delay, processing time, presentation delay), thresholds (good: <=200ms), why it replaced FID, and FAQ.
- [Complete Guide to Time to First Byte (TTFB)](/guides/ttfb/): What TTFB includes (DNS, TCP, TLS, server processing), thresholds (good: <=800ms), CDN optimization, and FAQ.

### Best Practices Guides (Topic-focused, framework-agnostic)
- [Image Optimization Guide](/guides/image-optimization/): Definitive image performance guide. Format selection (AVIF, WebP, JPEG, PNG, SVG), responsive images with srcset/sizes/picture, CDN transforms, fetchpriority, lazy loading, common mistakes, and FAQ. Author: Alex Rivera. ~3,600 words.
- [JavaScript Performance Guide](/guides/javascript-performance/): Bundle size reduction (tree shaking, code splitting, dynamic imports), avoiding long tasks (scheduler.yield, Web Workers, requestIdleCallback), third-party script management (defer, async, Partytown), framework levers (RSC, Astro islands, Vue async). Author: Marcus Chen. ~4,500 words.
- [CSS Performance Guide](/guides/css-performance/): Critical CSS extraction and inlining, eliminating render-blocking stylesheets, animation INP fixes (composited properties only), content-visibility and CSS containment, container queries, common mistakes. Author: Sara Kim. ~5,000 words.
- [Font Loading Guide](/guides/font-loading/): font-display strategies, eliminating font CLS with size-adjust and metric overrides, self-hosting vs Google Fonts, variable fonts, preload patterns, framework integrations (Next.js next/font, Astro, Nuxt). Author: Priya Patel. ~4,500 words.

### Fixes Hub
- [All Performance Fixes](/fixes/): Browse all 23 framework-specific fix guides with filtering by metric and framework.

### Fixes -- Next.js
- [Fix LCP in Next.js](/fixes/lcp-nextjs/): next/image priority, SSG/ISR, next/font, bundle reduction. LCP 4.2s to 1.4s.
- [Fix CLS in Next.js](/fixes/cls-nextjs/): next/image dimensions, next/font layout shift prevention, skeleton loading. CLS 0.28 to 0.04.
- [Fix INP in Next.js](/fixes/inp-nextjs/): React Server Components, useTransition, dynamic imports. INP 380ms to 112ms.
- [Fix TTFB in Next.js](/fixes/ttfb-nextjs/): Edge Runtime, streaming SSR, ISR cache warming. TTFB 1,240ms to 180ms.

### Fixes -- React
- [Fix LCP in React](/fixes/lcp-react/): Resource hints, lazy loading, code splitting. LCP 3.8s to 1.3s.
- [Fix CLS in React](/fixes/cls-react/): Image dimensions, useEffect stability, skeleton matching. CLS 0.24 to 0.03.
- [Fix INP in React](/fixes/inp-react/): useDeferredValue, Web Workers, React.memo. INP 420ms to 110ms.

### Fixes -- Vue 3
- [Fix LCP in Vue 3](/fixes/lcp-vue/): Hero preloading, Vite manualChunks, lazy routes. LCP 3.6s to 1.4s.
- [Fix CLS in Vue 3](/fixes/cls-vue/): Image dimensions, v-show, transform transitions. CLS 0.27 to 0.04.
- [Fix INP in Vue 3](/fixes/inp-vue/): shallowRef, v-memo, Web Workers. INP 400ms to 135ms.
- [Fix TTFB in Vue / Nuxt 3](/fixes/ttfb-vue/): Nuxt useFetch, Nitro ISR, edge deployment. TTFB 1,100ms to 185ms.

### Fixes -- Angular
- [Fix LCP in Angular](/fixes/lcp-angular/): NgOptimizedImage, @defer, Angular SSR. LCP 4.1s to 1.5s.
- [Fix CLS in Angular](/fixes/cls-angular/): NgOptimizedImage dimensions, transform animations. CLS 0.29 to 0.04.
- [Fix INP in Angular](/fixes/inp-angular/): OnPush, NgZone.runOutsideAngular, trackBy. INP 450ms to 140ms.
- [Fix TTFB in Angular](/fixes/ttfb-angular/): @angular/ssr, TransferState, edge deployment. TTFB 1,350ms to 220ms.

### Fixes -- WordPress
- [Fix LCP in WordPress](/fixes/lcp-wordpress/): WebP images, fetchpriority, render-blocking removal, caching. LCP 5.2s to 1.8s.
- [Fix CLS in WordPress](/fixes/cls-wordpress/): Image dimensions, ad space reservation, font preloading. CLS 0.34 to 0.05.
- [Fix INP in WordPress](/fixes/inp-wordpress/): Third-party script audit, DOM reduction, deferred JS. INP 520ms to 160ms.

### Fixes -- Shopify
- [Fix LCP in Shopify](/fixes/lcp-shopify/): Shopify image_tag, app impact audit, hero preloading. LCP 4.8s to 2.0s.
- [Fix CLS in Shopify](/fixes/cls-shopify/): Product image dimensions, variant selector spacing, font preloading. CLS 0.31 to 0.05.

### Fixes -- Headless CMS
- [Fix LCP in Sanity](/fixes/lcp-sanity/): Sanity image CDN with auto=format, GROQ projection, hero preload, ISR webhooks, framework image component. LCP 4.6s to 1.8s.

### Fixes -- Webflow
- [Fix LCP in Webflow](/fixes/lcp-webflow/): WebP images, script minimization, interaction optimization. LCP 4.5s to 1.9s.
- [Fix CLS in Webflow](/fixes/cls-webflow/): Image sizing, transform-only interactions, font handling. CLS 0.26 to 0.03.

### Fixes -- Squarespace
- [Fix LCP in Squarespace](/fixes/lcp-squarespace/): Hero image optimization, code injection audit, template selection. LCP 5.5s to 2.2s.

### Fixes -- Astro
- [Fix LCP in Astro](/fixes/lcp-astro/): astro:assets image optimization, preloading, zero-JS islands, SSG, font loading. LCP 3.1s to 0.9s.
- [Fix CLS in Astro](/fixes/cls-astro/): Image dimensions with astro:assets, font fallback adjustment, island hydration stability, view transitions. CLS 0.18 to 0.02.

### Fixes -- SvelteKit
- [Fix LCP in SvelteKit](/fixes/lcp-svelte/): enhanced:img, preloading via load functions, pre-rendering, Svelte compiler optimization, self-hosted fonts. LCP 3.4s to 1.1s.
- [Fix CLS in SvelteKit](/fixes/cls-svelte/): enhanced:img dimensions, font fallbacks, stable transitions, skeleton loading states, CSS containment. CLS 0.22 to 0.03.

### Fixes -- Remix
- [Fix LCP in Remix](/fixes/lcp-remix/): Loader optimization with defer(), streaming SSR, links export preloading, picture element, cache headers. LCP 3.6s to 1.2s.
- [Fix INP in Remix](/fixes/inp-remix/): Optimistic UI with useFetcher, debounced inputs, yield-to-main-thread, navigation progress, script deferral. INP 340ms to 95ms.

### Fixes -- Gatsby
- [Fix LCP in Gatsby](/fixes/lcp-gatsby/): Optimize Largest Contentful Paint on Gatsby sites with gatsby-plugin-image (GatsbyImage, StaticImage), AVIF/WebP, art-direction with withArtDirection, hero preload via gatsby-ssr.js, eager loading on above-the-fold images, custom image CDN config, and LMDB build cache. Reduce LCP from 4.2s to 1.4s. ~5,800 words, by Alex Rivera.

### Fixes -- Vite
- [Fix LCP in Vite](/fixes/lcp-vite/): Optimize Largest Contentful Paint on Vite-built apps with @vitejs/plugin-react-swc, manualChunks via build.rollupOptions, modulepreload polyfill, vite-plugin-image-optimizer, vite-imagetools, hero image preload, assetsInlineLimit, server.warmup, and dependency pre-bundling. Reduce LCP from 3.8s to 1.4s. ~6,100 words, by Priya Patel.

### Fixes -- Eleventy
- [Fix LCP in Eleventy](/fixes/lcp-eleventy/): Optimize Largest Contentful Paint on 11ty sites with eleventy-img (responsive AVIF/WebP), Image shortcode with fetchpriority=high, decoding=async, eleventy-plugin-bundle for critical CSS, HTML minification transform, PurgeCSS, prefetch hints, and Cloudflare Pages/Netlify edge cache headers. Reduce LCP from 3.4s to 1.2s. ~5,800 words, by Alex Rivera.

### Fixes -- Tailwind CSS
- [Fix CLS with Tailwind CSS](/fixes/cls-tailwindcss/): Eliminate Cumulative Layout Shift on utility-first sites with aspect-ratio utilities (aspect-video, aspect-square, aspect-[16/9]), min-height utilities for skeleton loaders, font-display fixes, dark-mode toggle CLS, fluid typography with clamp/text-balance, intrinsic image sizing, and animation-safe utilities. Reduce CLS from 0.21 to 0.04. ~5,950 words, by Sara Kim.

### Fixes -- Bootstrap
- [Fix CLS with Bootstrap](/fixes/cls-bootstrap/): Eliminate layout shift on Bootstrap sites with ratio helpers (ratio-16x9, ratio-21x9), responsive img-fluid sizing, carousel slide preload + fixed heights, modal scrollbar-gutter stable, form validation message space reservation, lazy-loaded Popper.js, alert auto-dismiss timing, and Bootstrap Icons font-display swap. Reduce CLS from 0.28 to 0.04. ~5,900 words, by Sara Kim.

### Fixes -- Webpack
- [Fix INP with Webpack](/fixes/inp-webpack/): Reduce interaction latency in Webpack bundles via SplitChunksPlugin tuning, runtime chunk extraction, dynamic imports, tree shaking with sideEffects, Module Federation cost analysis, persistent caching, deduplication, and webpack-bundle-analyzer profiling. Reduce INP from 310ms to 118ms. ~6,000 words, by Marcus Chen.

### Fixes -- TypeScript
- [Fix INP in TypeScript](/fixes/inp-typescript/): Reduce interaction latency in TS codebases with target ES2022 (no down-leveling), isolatedModules, importHelpers + tslib, removed emitDecoratorMetadata, lean generics in hot paths, discriminated unions vs class hierarchies, virtual scrolling, and scheduler.yield with TS types. Reduce INP from 295ms to 120ms. ~4,400 words, by Marcus Chen.

### Fixes -- Docker
- [Fix TTFB on Docker](/fixes/ttfb-docker/): Cut server response time on containerized apps with distroless/alpine/node:20-slim images, multi-stage builds, layer caching, Docker buildx cache mounts, healthcheck warmup, Kubernetes startupProbe, JIT runtime warmup, Nginx/Traefik/Caddy reverse proxy, HTTP/2 termination, sticky sessions, and Cloud Run/ECS/Fargate cold-start mitigation. Reduce TTFB from 1.6s to 110ms. ~6,000 words, by Devon Bell.

### Fixes -- Nuxt
- [Fix LCP in Nuxt](/fixes/lcp-nuxt/): NuxtImage with preload, SSG/ISR route rules, @nuxt/fonts, payload reduction with pick, lazy components. LCP 3.8s to 1.3s.
- [Fix CLS in Nuxt](/fixes/cls-nuxt/): NuxtImage dimensions, @nuxt/fonts, ClientOnly wrappers, skeleton loading, v-show vs v-if, hydration mismatch fixes. CLS 0.25 to 0.03.

### Glossary
- [Web Performance Glossary](/glossary/): 46 web performance terms defined with thresholds, explanations, and links. Covers Core Web Vitals (LCP, CLS, INP), metrics (FCP, TBT, TTI, TTFB, Speed Index), techniques (preload, preconnect, code splitting, SSR, SSG, ISR, streaming SSR, tree shaking, critical CSS, lazy loading, responsive images), concepts (hydration, main thread, long task, DOM, critical rendering path, render-blocking resources, layout shift), tools (CrUX, Lighthouse, PageSpeed Insights, WebPageTest, HTTP Archive, web-vitals library), infrastructure (CDN, edge computing), and formats (AVIF, WebP).

### Blog
- [Google's 2026 Core Web Vitals Update: What Changed and What to Do About It](/blog/google-core-web-vitals-update-2026/): Industry analysis of where Core Web Vitals stand in early 2026. Covers the FID-to-INP transition, updated p75 consistency across Google properties, why INP 200ms is now the hardest threshold, TTFB as an LCP floor, and how AI search changes what engineering teams should prioritize. ~2000 words, 4 prioritized recommendations, by Marcus Chen.
- [How AI Search Engines Evaluate Web Performance](/blog/ai-search-web-performance/): How generative AI search engines (Google AI Overviews, ChatGPT Search, Perplexity, Bing Copilot) select citations. Walks through the retrieval-to-rerank-to-quote pipeline, explains why schema markup and fast TTFB matter for inclusion, and argues that CWV itself is not a ranking signal but correlates with the properties that are. Actionable checklist for earning AI citations. ~2100 words, by Priya Patel.
- [Core Web Vitals in April 2026: The Data](/blog/core-web-vitals-data-april-2026/): Original CrUX data analysis -- 55.7% of origins pass all three CWV. Year-over-year trends (2021-2026), framework pass rates, CMS comparisons, mobile vs desktop gaps, industry breakdowns. SVG data visualizations.
- [The State of Web Performance in 2026](/blog/web-performance-2026/): Analysis of 10M URLs from HTTP Archive.
- [Next.js vs Remix: Web Performance Comparison 2026](/blog/nextjs-vs-remix-performance/): Head-to-head Core Web Vitals benchmarks for Next.js 15 and Remix 3.1. LCP, CLS, INP, TTFB data.
- [React vs Vue: Core Web Vitals Head-to-Head 2026](/blog/react-vs-vue-web-vitals/): Data-driven comparison of React 19 and Vue 3.5 across all Core Web Vitals metrics.
- [WordPress vs Shopify: Which Is Faster in 2026?](/blog/wordpress-vs-shopify-speed/): Speed comparison with CrUX data from 700K origins. Optimization strategies for both platforms.
- [Lighthouse vs WebPageTest: Which Performance Tool Should You Use in 2026?](/blog/lighthouse-vs-webpagetest/): Side-by-side comparison of the two leading lab/synthetic perf tools. Covers data sources, CWV measurement parity, real-device testing, multi-step flows, filmstrips, automation, and CI integration. ~3,900 words, by Sara Kim.
- [Vercel vs Netlify: 2026 Performance Showdown](/blog/vercel-vs-netlify-performance/): Head-to-head benchmarks for the two leading Jamstack hosts. Covers edge networks, ISR/on-demand revalidation, image optimization, edge-function cold starts, build performance, and Speed Insights. ~4,300 words, by Marcus Chen.
- [Static vs Server-Side Rendering: Web Performance in 2026](/blog/static-vs-ssr-performance/): TTFB, LCP, hydration cost, INP, freshness, scaling, and SEO compared across SSG, ISR, SSR, and edge SSR. Decision framework for choosing the right rendering model. ~3,800 words, by Alex Rivera.
- [CDN Comparison 2026: Cloudflare vs Fastly vs Akamai vs Bunny vs Vercel Edge](/blog/cdn-comparison-2026/): Five major CDNs benchmarked on PoP coverage, regional TTFB, cache hit ratio, image optimization, edge compute, pricing, and observability. ~4,000 words, by Priya Patel.
- [Shopify Core Web Vitals Checklist 2026: 14-Point Audit](/blog/shopify-core-web-vitals-checklist-2026/): Practitioner's 14-check audit for Shopify and Shopify Plus stores. Five LCP checks (hero image, theme fonts, app stack, Liquid render, CDN headers), four INP checks (variant pickers, third-party tags, cart drawer, product media gallery), three CLS checks (announcement bar, lazy images, ad slots), and two monitoring checks. Each check has a concrete fix, file or theme setting to change, and a verification path in CrUX. ~3,200 words.

### Hosting/Infrastructure Fix Pages
- [Fix TTFB on Vercel](/fixes/ttfb-vercel/): Optimize Time to First Byte on Vercel with ISR, Edge Runtime, function region configuration, cold start elimination, and bundle optimization. Reduce TTFB from 1.2s to under 50ms.
- [Fix TTFB on Netlify](/fixes/ttfb-netlify/): Optimize TTFB on Netlify with Edge Functions, On-Demand Builders, CDN cache headers (Netlify-CDN-Cache-Control, durable directive), and function tuning. Reduce TTFB from 1.5s to under 80ms.
- [Fix TTFB on Cloudflare Pages](/fixes/ttfb-cloudflare-pages/): Optimize TTFB on Cloudflare Pages with Workers Cache API, KV, D1, Smart Placement, and edge-specific headers. Reduce TTFB from 900ms to under 50ms.
- [Fix TTFB on AWS Amplify](/fixes/ttfb-aws-amplify/): Optimize TTFB on AWS Amplify Hosting with CloudFront CDN configuration, CloudFront Functions, Lambda compute tuning, Origin Shield, and CloudWatch monitoring. Reduce TTFB from 1.8s to under 100ms.
- [CDN Optimization for Faster LCP](/fixes/cdn-optimization-lcp/): Complete guide to CDN configuration for LCP improvement. Covers CDN tier selection, cache key optimization, image CDN with AVIF/WebP format negotiation, resource hints, and cache hit rate monitoring. Reduce LCP from 3.8s to 1.4s.
- [Edge Functions for Sub-100ms TTFB](/fixes/edge-functions-ttfb/): How to achieve sub-100ms TTFB globally with edge computing. Covers architecture comparison (Cloudflare Workers vs Vercel Edge vs Netlify Edge vs Lambda@Edge), migration strategies, edge data patterns, authentication at the edge, and origin fallback patterns.

### CSS and Rendering Fix Pages
- [Render-Blocking CSS and LCP](/fixes/render-blocking-css-lcp/): How the browser parses CSS into the CSSOM, why it blocks render, how to identify blocking stylesheets with Lighthouse and Coverage panel, inline critical CSS patterns, the 14KB first-packet target, media=print onload swap, @layer cascade, 103 Early Hints, and framework-specific notes for Next.js, Astro, Nuxt. ~3500 words, by Alex Rivera.
- [Critical CSS Extraction](/fixes/critical-css-extraction/): Practical guide to critical CSS extraction. Compares Critters, Beasties, Penthouse, Critical, and PurgeCSS. Framework integrations for Next.js, Astro, Nuxt, Eleventy. Manual extraction for complex sites. Pitfalls: over-extraction, missing CSS variables, broken pseudo-selectors, CLS from late-loading stylesheets. ~2000 words, by Sara Kim.
- [Animation Performance and CLS](/fixes/animation-performance-cls/): Why animations cause CLS, the 500ms interaction exclusion window, composited-only animations (transform + opacity, will-change), layout-triggering properties to avoid, CSS View Transitions API, scroll-driven animations, Framer Motion/GSAP/Lottie patterns, prefers-reduced-motion. ~2900 words, by Marcus Chen.
- [Web Fonts Performance Guide](/fixes/web-fonts-performance/): Complete font optimization. WOFF2 vs variable fonts, subsetting with glyphhanger/pyftsubset (250KB to 20KB), self-hosting vs Google Fonts/Typekit, preload + font-display strategies, framework tooling (next/font, @nuxtjs/fontaine, Astro Fontsource), content-visibility, font-palette-values. ~3000 words, by Priya Patel.
- [Responsive Images and LCP](/fixes/responsive-images-lcp/): srcset and sizes done right, the picture element with AVIF+WebP+JPEG fallback chain, fetchpriority=high and preload scanner interactions, modern image CDNs (Vercel, Cloudflare Images, Cloudinary, imgproxy), mistakes that defeat LCP optimization (lazy hero, CSS background-image). ~3100 words, by Alex Rivera.
- [Resource Hints: Preload, Preconnect, Prefetch](/fixes/preload-preconnect-hints/): When to use each hint. preconnect cost analysis (3-way TLS+TCP), preload with as/fetchpriority/imagesrcset, prefetch for next-navigation, 103 Early Hints, Speculation Rules API, common mistakes (preload everything, missing crossorigin on font preload). ~2900 words, by Sara Kim.

### Case Studies
- [How We Reduced LCP by 60%: A Step-by-Step Case Study](/blog/how-we-reduced-lcp-by-60-percent/): Detailed walkthrough of optimizing a Next.js e-commerce site's LCP from 4.8s to 1.9s. Covers image optimization (AVIF, srcset, fetchpriority), critical CSS extraction, font loading with next/font, third-party script management (facade patterns), and ISR caching. Includes before/after code diffs, timeline, and business impact data.
- [E-commerce Performance Case Study: +17% Conversions](/blog/ecommerce-performance-case-study/): How a Shopify Plus fashion store ($28M revenue) improved Core Web Vitals and increased mobile conversion rates by 17%, reduced bounce rates by 24%, and grew annual mobile revenue by $1.2M. Covers image pipeline overhaul, Shopify app audit (23 apps to 13), CLS fixes on product pages, theme/font optimization, and ROI analysis.

### Resource Pages
- [50 Best Web Performance Tools in 2026](/resources/performance-tools/): Comprehensive, categorized directory of 50 web performance tools across testing, monitoring, optimization, analysis, build tools, CDN/hosting, and specialized categories. Honest reviews with pricing and best-use recommendations. Affiliate-free.
- [The Complete Web Performance Checklist](/resources/performance-checklist/): 66 actionable performance optimization checks across 8 categories (images, JavaScript, CSS, fonts, server, CWV, HTML/SEO, accessibility). Prioritized by impact (critical/high/medium). Interactive checkboxes with progress tracking. Print-friendly format.

### Issue-Specific Fix Pages
- [Fix CLS Caused by Font Loading](/fixes/font-loading-cls/): How to eliminate Cumulative Layout Shift from web font loading using font-display swap, size-adjust metric overrides, font preloading, self-hosting, CSS Font Loading API, and framework-specific solutions (next/font, @nuxtjs/fontaine).
- [How Third-Party Scripts Kill Your LCP](/fixes/third-party-scripts-lcp/): Audit, defer, and optimize analytics, chat widgets, A/B testing, and ad scripts. Covers script loading strategies, facade patterns, resource hints, and governance budgets.
- [Image Optimization to Fix LCP](/fixes/image-optimization-lcp/): Modern image formats (AVIF, WebP), responsive images with srcset/sizes, fetchpriority and preload hints, edge CDN delivery, and automated optimization pipelines with Sharp.
- [Reduce JavaScript Bundle Size to Fix INP](/fixes/javascript-bundle-inp/): Bundle analysis, route-based code splitting, dynamic imports, tree shaking, and breaking up long tasks with scheduler.yield() to eliminate main thread blocking.
- [Improve Server Response Time for TTFB](/fixes/server-response-ttfb/): Server-side caching strategies, database query optimization, edge deployment, CDN configuration, and rendering architecture selection (SSG, ISR, streaming SSR).
- [Lazy Loading Pitfalls: When It Hurts LCP](/fixes/lazy-loading-lcp/): Identifying the LCP element, correct loading strategies by viewport position, fixing anti-patterns (data-src, CSS backgrounds), framework configuration, and automated CI checks.

### Tutorials (How-To Guides)
- [How to Measure Core Web Vitals: A Complete Guide](/blog/how-to-measure-core-web-vitals/): Step-by-step instructions for measuring LCP, CLS, and INP using Chrome DevTools, Lighthouse, PageSpeed Insights, CrUX API, and the web-vitals JavaScript library. Covers lab vs field data, real-user monitoring setup, and automated CI/CD integration.
- [How to Set Up Performance Monitoring](/blog/how-to-set-up-performance-monitoring/): Build a complete RUM pipeline from scratch with the web-vitals library, Google Analytics 4, BigQuery dashboards, and alerting. Includes open-source alternatives and enterprise tool comparisons.
- [How to Optimize Images for Web Performance](/blog/how-to-optimize-images-for-web/): Practical guide to modern image formats (AVIF, WebP), responsive images, lazy loading, CDN delivery, and automated optimization pipelines. Before/after LCP and CLS impact measurements.
- [How to Lazy Load Everything](/blog/how-to-lazy-load-everything/): Master lazy loading for images, iframes, video, fonts, JavaScript bundles, and React/Vue components. Native browser APIs, Intersection Observer patterns, and framework-specific implementations with performance measurements.

### Video Tutorials
- [Video Tutorials Index](/tutorials/): Hands-on walkthroughs covering Lighthouse, Chrome DevTools, WebPageTest, and real user monitoring. Each page includes a video walkthrough, 7-8 written steps, code samples, pro tips, common issues, and FAQ.
- [Lighthouse Audit Walkthrough](/tutorials/lighthouse-audit-walkthrough/): Complete Lighthouse audit tutorial in Chrome DevTools. Covers configuring the run, Performance score breakdown (FCP/LCP/TBT/CLS/SI), reading Opportunities and Diagnostics, saving/comparing reports, and the lighthouse CLI for CI. 18 min video + 25 min written walkthrough.
- [Chrome DevTools Performance Panel](/tutorials/chrome-devtools-performance/): Record and analyze Web Vitals with the Performance panel. Timeline markers for LCP and CLS, flame chart analysis of long tasks, measuring INP in the Interactions track, throttling, and exporting profiles. 22 min video + 30 min written walkthrough.
- [WebPageTest Complete Guide](/tutorials/webpagetest-guide/): Advanced lab testing with WebPageTest -- picking locations and connections, reading waterfall charts, filmstrips, content breakdown, scripted tests for auth flows, and API automation. 20 min video + 28 min written walkthrough.
- [Real User Monitoring (RUM) Setup](/tutorials/real-user-monitoring-setup/): Install web-vitals, ship metrics with sendBeacon, build an ingest API, aggregate p75 by page and device, dashboard with Chart.js, and alert on regressions before they hurt CrUX. 25 min video + 35 min written walkthrough.

### Interactive Tools
- [Performance Budget Calculator](/tools/performance-budget/): Input CWV targets and connection speed to get recommended budgets for JavaScript, CSS, images, and fonts. Includes framework compatibility analysis and CI/CD enforcement guidance.
- [Core Web Vitals Score Explainer](/tools/cwv-checker/): Enter your PageSpeed Insights scores to get detailed analysis, prioritized fix recommendations, and framework-specific fix links. Includes gauge visualizations and severity assessment.

### Site Index
- [Sitemap](/sitemap/): Human-readable sitemap of every page on WebVitals.tools, grouped into thirteen sections (homepage, guides, fixes index, framework fixes, hosting fixes, CSS fixes, issue fixes, blog, tools, tutorials, resources, glossary, FAQ). 81 pages with titles, paths, and short descriptions. Companion to /sitemap.xml and /llms.txt.

### Reference
- [Core Web Vitals FAQ](/faq/): Fifty-plus plain-English answers covering metrics (LCP, CLS, INP, TTFB, FCP), measurement tools (Lighthouse, PageSpeed Insights, CrUX, WebPageTest, RUM), optimization techniques (fetchpriority, critical CSS, code splitting, image formats), popular frameworks (Next.js, Astro, React, WordPress), and hosting platforms (Vercel, Netlify, Cloudflare Pages, AWS). Marked up with FAQPage schema for AI search and Google rich results.

### Newsletter
- [Newsletter](/newsletter/): Subscribe to the WebVitals.tools monthly digest -- one email per month, sent the first Monday, with new posts, benchmark refreshes, and editor picks. No tracking pixels, plain HTML, one-click unsubscribe.
- [Best of Q1 2026 (roundup)](/blog/best-of-q1-2026/): Curated reading list of the 12 must-read posts from launch month, organized by topic (data foundation, choose a stack, fix something now, measure your work). ItemList JSON-LD.
- [30-Day Launch Recap](/blog/30-day-launch-recap/): Final wrap-up of the 30-day launch sprint -- what shipped (105 pages, 16 sections), what we learned, and the month-two roadmap (accessibility, PWAs, 100 more programmatic fix pages, weekly blog cadence).

### Benchmarks Dashboard
- [Performance Benchmarks Dashboard](/benchmarks/): Live dashboard of CWV pass rates by framework (Astro 84%, Next.js 68%, React SPA 44%, etc.), CMS (Wix 82%, Shopify 78%, WordPress 50%), hosting platform (Cloudflare Pages 88%, Vercel 85%, shared hosting 29%), and device. Schema.org Dataset markup with variableMeasured + temporalCoverage 2021-2026. Refreshed monthly from CrUX BigQuery.

### About + Credibility
- [About WebVitals.tools](/about/): Site mission, editorial standards, contributor bios (Alex Rivera, Marcus Chen, Sara Kim, Priya Patel, core editorial team), open-source MIT license, and pointers to /methodology/ and /contribute/.
- [Methodology](/methodology/): How we test and benchmark Core Web Vitals -- Lighthouse, WebPageTest, Chrome DevTools Performance, CrUX field data, web-vitals JS RUM, framework benchmark matrix (p75 across 25 runs on 3GSlow throttling), CrUX BigQuery sourcing, statistical handling, editorial cadence, reproducibility checklist, and limitations.
- [Changelog](/changelog/): Site update log -- every major shipment from Day 0 (April 4, 2026) through Day 27 (May 1, 2026), grouped into Phase 1 (Foundation), Phase 2 (Scale and Authority), and Phase 3 (Optimization and Refinement).
- [Contribute](/contribute/): How to contribute to WebVitals.tools -- report issues, submit corrections, propose new pages. Includes the page template checklist, code style notes (Cabinet Grotesk + Satoshi + JetBrains Mono, navy + #22c55e palette), the GitHub workflow, and recognition policy.

## Quick Reference

- **LCP good threshold**: <= 2.5 seconds
- **CLS good threshold**: <= 0.1
- **INP good threshold**: <= 200ms
- **TTFB good threshold**: <= 800ms

## Contact

Website: https://webvitals.tools