{"id":"6cb58830-ade5-4177-9c6b-05ff23197ca8","shortId":"vFH97N","kind":"skill","title":"performance-and-web-vitals","tagline":"Audit UI performance with Lighthouse and fix Core Web Vitals — LCP, CLS, INP. Fast UI is good UX. Use when optimising page load, fixing layout shift, reducing input delay, improving Lighthouse scores, or reviewing images, fonts, and render-blocking resources.","description":"# Performance and Web Vitals\n\n## Run a Lighthouse Audit\n\n```bash\n# CLI audit — outputs JSON and HTML report\nnpx lighthouse https://example.com --output html --output-path ./lighthouse-report.html\n\n# Headless, useful in CI\nnpx lighthouse https://example.com --chrome-flags=\"--headless\" --output json --output-path ./report.json\n\n# Audit specific categories only\nnpx lighthouse https://example.com --only-categories=performance,accessibility,seo\n```\n\nOr open Chrome DevTools → Lighthouse tab → Analyse page load.\n\n**Target scores:**\n| Category | Target |\n|---|---|\n| Performance | ≥ 90 |\n| Accessibility | 100 |\n| Best Practices | ≥ 95 |\n| SEO | ≥ 95 |\n\n---\n\n## Core Web Vitals\n\n### LCP — Largest Contentful Paint\n*How fast does the main content appear?*\n\n**Target: ≤ 2.5s**\n\nLCP measures when the largest visible element (hero image, heading, video poster) renders. It is the user's perception of \"did the page load?\"\n\n**Common causes and fixes:**\n\n| Cause | Fix |\n|---|---|\n| Unoptimised hero image | Use WebP/AVIF, correct size, `fetchpriority=\"high\"` |\n| Image not preloaded | `` |\n| Render-blocking CSS/JS | Defer non-critical JS, inline critical CSS |\n| Slow server response | CDN, caching headers, edge delivery |\n| Web font blocking render | `font-display: swap` or `optional` |\n\n```html\n\n\n\n\n\n```\n\nNever use `loading=\"lazy\"` on the LCP image — it delays the most important render.\n\n---\n\n### CLS — Cumulative Layout Shift\n*Does content jump around while loading?*\n\n**Target: ≤ 0.1**\n\nCLS measures unexpected layout shifts — content moving after it has rendered. Caused by images without dimensions, late-loading ads, fonts swapping, or dynamic content injected above existing content.\n\n**Common causes and fixes:**\n\n| Cause | Fix |\n|---|---|\n| Images without width/height | Always set `width` and `height` on `` |\n| Web font swap | Use `font-display: optional` or preload fonts |\n| Dynamic content above fold | Reserve space with `min-height` on containers |\n| Late-loading ads or embeds | Reserve fixed dimensions for ad slots |\n| Animations that shift layout | Animate `transform` only, never `top/left/width/height` |\n\n```html\n\n\n```\n\n```css\n/* Reserve space for dynamic content */\n.ad-slot { min-height: 250px; }\n\n/* Animate transform, not layout properties */\n.slide-in { transform: translateY(0); transition: transform 300ms; }\n```\n\n---\n\n### INP — Interaction to Next Paint\n*How quickly does the page respond to user input?*\n\n**Target: ≤ 200ms**\n\nINP measures the delay between a user interaction (click, tap, keyboard) and the next visual update. High INP makes the UI feel sluggish or frozen.\n\n**Common causes and fixes:**\n\n| Cause | Fix |\n|---|---|\n| Heavy JS on main thread | Break into smaller tasks, use `requestIdleCallback` |\n| Large event handlers | Debounce/throttle scroll and resize handlers |\n| Synchronous DOM updates | Batch DOM writes with `requestAnimationFrame` |\n| Third-party scripts blocking | Load third-party scripts with `async` or `defer` |\n| React re-renders | Memoize with `useMemo`, `useCallback`, `React.memo` |\n\n---\n\n## Images\n\nImages are the single biggest performance lever on most pages.\n\n```html\n\n\n \n \n \n\n\n\n\n```\n\n**Rules:**\n- Always set `width` and `height` — prevents CLS\n- Use `loading=\"lazy\"` below the fold, never on LCP image\n- Serve WebP or AVIF — typically 30–50% smaller than JPEG\n- Size images to their display size — do not serve 2000px image for a 400px slot\n- Use a CDN with automatic format conversion where possible\n\n---\n\n## Fonts\n\nWeb fonts block rendering if not handled correctly.\n\n```html\n\n\n\n\n\n\n```\n\n```css\n@font-face {\n font-family: 'Brand';\n src: url('/fonts/brand.woff2') format('woff2');\n font-display: swap; /* show fallback immediately, swap when loaded */\n /* font-display: optional; — never swap, use fallback if not cached */\n}\n```\n\n- `font-display: swap` — good for headings, acceptable CLS\n- `font-display: optional` — zero CLS, font only used if cached (best for body text)\n- Subset fonts to the characters actually used — reduces file size by 60–80%\n\n---\n\n## JavaScript\n\n```html\n\n\n\n\n\n\n```\n\n- `defer`: executes after HTML parsed, in order — use for most scripts\n- `async`: executes as soon as downloaded, out of order — use for independent scripts (analytics)\n- Never block the main thread with synchronous `
![\"...\"](\"image.jpg\")
\n![\"...\"](\"hero.webp\")
\n```\n\nNever use `loading=\"lazy\"` on the LCP image — it delays the most important render.\n\n---\n\n### CLS — Cumulative Layout Shift\n*Does content jump around while loading?*\n\n**Target: ≤ 0.1**\n\nCLS measures unexpected layout shifts — content moving after it has rendered. Caused by images without dimensions, late-loading ads, fonts swapping, or dynamic content injected above existing content.\n\n**Common causes and fixes:**\n\n| Cause | Fix |\n|---|---|\n| Images without width/height | Always set `width` and `height` on `![\"...\"](\"product.jpg\")
\n```\n\n```css\n/* Reserve space for dynamic content */\n.ad-slot { min-height: 250px; }\n\n/* Animate transform, not layout properties */\n.slide-in { transform: translateY(0); transition: transform 300ms; }\n```\n\n---\n\n### INP — Interaction to Next Paint\n*How quickly does the page respond to user input?*\n\n**Target: ≤ 200ms**\n\nINP measures the delay between a user interaction (click, tap, keyboard) and the next visual update. High INP makes the UI feel sluggish or frozen.\n\n**Common causes and fixes:**\n\n| Cause | Fix |\n|---|---|\n| Heavy JS on main thread | Break into smaller tasks, use `requestIdleCallback` |\n| Large event handlers | Debounce/throttle scroll and resize handlers |\n| Synchronous DOM updates | Batch DOM writes with `requestAnimationFrame` |\n| Third-party scripts blocking | Load third-party scripts with `async` or `defer` |\n| React re-renders | Memoize with `useMemo`, `useCallback`, `React.memo` |\n\n---\n\n## Images\n\nImages are the single biggest performance lever on most pages.\n\n```html\n\n