# Web Performance Checklist > Web performance checklist — Core Web Vitals (LCP/INP/CLS), TTFB diagnosis, and frontend levers (JS/CSS/fonts/images/network/rendering) plus backend (DB N+1, API latency, caching, infra). Use when optimizing performance, diagnosing a slow page or unresponsive interaction, setting a performance budget, or reviewing a perf-sensitive change. - Skill: `yuri-semenenko/web-performance-checklist` (Agent Skill) - Install (CLI): `npx skillmds@latest add yuri-semenenko/web-performance-checklist` - Raw SKILL.md: https://api.skillmd.com/api/skills/yuri-semenenko/web-performance-checklist/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: yuri-semenenko (https://skillmd.com/u/yuri-semenenko) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/yuri-semenenko/web-performance-checklist --- # Web Performance Checklist A concrete checklist for diagnosing and improving web performance. Measure before and after — optimize against field data, not hunches. ## Rationalizations (read first) Pre-written rebuttals to the excuses that precede a skipped measurement. If you catch yourself thinking the left column, the right column is the answer. | Rationalization | Rebuttal | |---|---| | "It's fast on my machine." | Your machine isn't the p75 user. Check field data (CrUX/RUM) and throttle to mid-tier Android. | | "I'll add the index later." | An unindexed query degrades with data growth — later is an incident, not a task. | | "Memoize everything to be safe." | `useMemo`/`useCallback` cost too. Without a profile they add overhead, not speed. | | "The bundle's only a bit bigger." | Bloat compounds. Read the analyzer, not your gut — name the KB before adding the dep. | | "It looks instant locally." | Local has no network or CPU throttle. Unverified under realistic conditions = unverified. | ## Core Web Vitals targets | Metric | Good | Needs improvement | Poor | |---|---|---|---| | LCP (Largest Contentful Paint) | ≤ 2.5s | ≤ 4.0s | > 4.0s | | INP (Interaction to Next Paint) | ≤ 200ms | ≤ 500ms | > 500ms | | CLS (Cumulative Layout Shift) | ≤ 0.1 | ≤ 0.25 | > 0.25 | ## TTFB diagnosis When TTFB is too high (> 800ms), check each component in the Network panel: - [ ] Slow DNS → add `` or `preconnect` for known origins. - [ ] Slow TCP/TLS handshake → enable HTTP/2, consider edge deployment, check keep-alive. - [ ] Slow server processing → profile the backend, find slow queries, add caching. ## Frontend ### Images - [ ] Modern formats (WebP, AVIF). - [ ] Responsive sizing (`srcset` + `sizes`). - [ ] Explicit `width`/`height` on `` and `` (prevents CLS). - [ ] Below-the-fold images use `loading="lazy"` and `decoding="async"`. - [ ] Hero/LCP images use `fetchpriority="high"` and are not lazy-loaded. ### JavaScript - [ ] Initial bundle < 200 KB gzipped. - [ ] Code splitting via dynamic `import()` for routes and heavy features. - [ ] Tree shaking enabled (dependency ships ESM, marked `sideEffects: false`). - [ ] No render-blocking JS in `` (use `defer`/`async`). - [ ] Heavy computation offloaded to Web Workers where applicable. - [ ] `React.memo()` on expensive components that re-render with identical props. - [ ] `useMemo()`/`useCallback()` only where profiling shows real benefit. - [ ] Long tasks (> 50ms) broken up — the main lever for INP. - [ ] `yieldToMain` inside long loops so input can run between iterations. - [ ] Modern scheduling where available: `scheduler.yield()` (preferred), `scheduler.postTask()` with priorities, `isInputPending()`. - [ ] `requestIdleCallback` for deferrable work (analytics, prefetch, cache warming). - [ ] Non-critical work moved out of event handlers (analytics, logging) so it doesn't delay interaction response. - [ ] Third-party scripts `async`/`defer`, size-checked, facaded if heavy (chat widgets, embeds). ### CSS - [ ] Critical CSS inlined or preloaded. - [ ] No render-blocking CSS for non-critical styles. - [ ] No CSS-in-JS runtime cost in production (extract to static CSS). ### Fonts - [ ] 2–3 families max, 2–3 weights each (each weight is a request). - [ ] WOFF2 only (skip WOFF/TTF/EOT). - [ ] Self-hosted where possible (third-party font CDNs add DNS + TCP + TLS). - [ ] LCP-critical fonts preloaded: ``. - [ ] `font-display: swap` (or `optional` for non-critical) to avoid FOIT. - [ ] Subsetted via `unicode-range` to ship only needed glyphs. - [ ] Variable fonts considered when many weights/styles are needed. - [ ] Fallback metrics tuned with `size-adjust`, `ascent-override`, `descent-override` to cut CLS on font swap. - [ ] System font stack considered before adding any custom font. ### Network - [ ] Static assets cached long `max-age` + content-hashed filenames. - [ ] API responses cached where appropriate (`Cache-Control`). - [ ] HTTP/2 or HTTP/3 enabled. - [ ] `preconnect` configured for known third-party domains. - [ ] `fetchpriority` used for critical non-image resources (key ``, above-the-fold `