We run Web Perf Clinic as a working notebook for the engineers who actually own the LCP graph in PageSpeed Insights on Monday morning. Every article here starts from a real production trace, a real CrUX regression, or a real Lighthouse CI budget that just broke a deploy. Our team writes for staff frontend engineers, SREs and performance-curious product folks who want fewer adjectives and more flame charts.
Since Interaction to Next Paint replaced FID as a Core Web Vital in March 2024, INP has quietly become the metric that decides whether your shipping React app is fast or merely fast on a Pixel 9. We track the long tail: how to find Long Animation Frames in real user data, how to break up 200ms event handlers without resorting to setTimeout cargo-culting, and why scheduler.yield() finally makes cooperative scheduling practical in Chromium-based browsers.
We publish step-by-step teardowns of slow INP on the usual suspects: hydration-heavy Next.js routes, Algolia-style autocompletes, and dashboards that re-render on every keystroke. Expect annotated DevTools Performance traces, before/after RUM screenshots from web-vitals.js, and patches you can copy into a PR.
Synthetic Lighthouse runs lie politely; real user monitoring tells you which Samsung A-series device in São Paulo just experienced a 1.8s INP on your checkout button. The catch: most commercial RUM scripts weigh 40-90 KB of gzipped JavaScript and ironically degrade the very metrics they measure. We benchmark the lightweight options — web-vitals piped to your own collector, OpenTelemetry browser SDK, Cloudflare Web Analytics, SpeedCurve LUX — and show you exactly how many bytes and main-thread milliseconds each one costs.
Our team also documents the boring-but-critical parts: sampling strategy at scale, attributing INP to specific React components via the Event Timing API, and building Grafana dashboards that surface p75 CWV by route, country and device class without blowing your observability bill.
Images remain the single largest lever for Largest Contentful Paint, and yet most teams still ship 1600px JPEGs to 360px phones. We dig into modern pipelines end-to-end: AVIF vs WebP encoding tradeoffs in 2026, the right srcset + sizes math for responsive heroes, fetchpriority="high" on the LCP candidate, and when link rel=preload helps versus when it just steals bandwidth from your CSS.
You'll find comparisons of the major resizers — Cloudflare Images, Cloudinary, imgproxy, Vercel Image Optimization, Netlify Image CDN — measured on cold-cache TTFB, encoded size, and CDN cache-hit ratios. We also cover the underrated wins: native lazy-loading rules, Client Hints in 2026, and why the <picture> element is still the most reliable way to ship AVIF with a WebP fallback.
Scroll down for our latest articles — fresh teardowns, migration notes from real production codebases, and the occasional vendor benchmark we ran so you don't have to. If a piece saves you an afternoon, that's the bar we're aiming for.
The Service Worker Static Routing API lets the browser bypass your SW fetch handler for chosen URLs, cutting cold-start latency and LCP. Hands-on guide with 2026 examples, Workbox interop, browser support, and the diagnostics I use to prove the win.
How I shipped a production scheduler.yield fallback for Safari in 2026 using postTask and MessageChannel, kept Chrome's INP wins, and avoided the setTimeout(0) clamp tax.
A field-tested walkthrough of the seven WordPress plugin patterns that push INP past 500ms in 2026, with a defer-and-idle JavaScript fix you can ship today without uninstalling anything.
INP became a Core Web Vital in March 2024, and most of us reached for the same tools we'd been using for FID. For the trickier regressions you'll stare at clean traces and lose a week.
HTTP 103 Early Hints lets servers preload critical resources during backend think-time, cutting LCP by 100-400ms. A practical 2026 guide for Cloudflare, Fastly, and Node.js origins.
HTTP/3 over QUIC removes TCP head-of-line blocking and cuts mobile load times 20-60%. Practical setup for Nginx, Caddy, and Cloudflare with a rollout plan.
Learn how the Speculation Rules API enables near-instant page navigations by prefetching and prerendering pages before users click. 2026 guide covering eagerness, prerender-until-script, and implementation.
Compression Dictionaries Transport (dcb/dcz) ships in Chrome 123+ and can shrink your JavaScript delta updates by 80-95%. Here's the production setup, real numbers, and the gotchas the spec doesn't warn you about.
SPAs break LCP, INP, and CLS measurement — only the landing page gets real data. Chrome 147's Soft Navigations API finally fixes per-route Core Web Vitals tracking. A practical 2026 guide with code for PerformanceObserver, the web-vitals soft-navs build, and a production-safe hybrid strategy.
The fetchpriority attribute is one of the most precise tools for shaping browser resource loading. Used right, it can shave 200-800ms off your LCP without touching CSS or JavaScript. Here's every legitimate use case, the mistakes that quietly hurt performance, and how to measure real-world impact.
scheduler.yield() is the modern way to break up long JavaScript tasks and fix INP. Learn the patterns, the comparison to setTimeout and postTask, and a production-ready fallback.
Set up production Real User Monitoring with Google's web-vitals v4 library. Capture LCP, INP, and CLS attribution data, build a custom collection endpoint, sample smartly, and reconcile field data with Lighthouse — every step with working 2026 code.
Choose your preferred language to explore our content