{"id":357,"slug":"rule-preload-hero-image-with-fetchpriority","title":"RULE: The LCP image always has explicit width/height + fetchpriority=\"high\" + no lazy-loading","kind":"rule","scope":"business","status":"current","audiences":["claude-code","dev","candid-team"],"topics":["core-web-vitals","agency-methodology"],"reference_body":"**Rule:** Every Candid Creative client page identifies its **LCP element** (typically the hero image) and ensures:\n\n1. Explicit `width` and `height` attributes (prevents CLS)\n2. **`fetchpriority=\"high\"`** attribute (raises Chrome's preload-scanner priority)\n3. **No `loading=\"lazy\"`** (lazy-loading the LCP image is the #2 cause of LCP failure per [[lcp-killers-catalogue]])\n4. Modern format (WebP or AVIF — [[webp-25-34-smaller-than-jpeg-google-study]])\n5. Proper `srcset`/`sizes` for responsive serving\n6. **NOT hidden from preload scanner** — never `data-src`, never CSS background-image, never JS-injected URL\n\n**Why:** The single largest cause of LCP failure is hero-image mishandling. Google's own test on Google Flights showed `fetchpriority=\"high\"` alone moved LCP from 2.6s to 1.9s. Web Almanac 2025: **7% of sites still hide their LCP image from the preload scanner entirely.**\n\n**How to apply:**\n- Use Next.js `<Image priority>` on the hero (which sets `fetchpriority=\"high\"` and disables lazy-loading)\n- For non-Next.js sites: hand-coded `<img>` with all six properties\n- Verify with WebPageTest filmstrip: the hero image should be in the first batch of requests, before any third-party scripts\n- Re-check after any plugin or theme update — defaults change","rationale_body":null,"metadata":null,"links":{"outgoing":[{"slug":"lcp-killers-catalogue","title":"Reference: the 8 most common LCP killers — ranked by observed frequency","kind":"reference","scope":"business","link_type":"depends-on"},{"slug":"webp-25-34-smaller-than-jpeg-google-study","title":"Google WebP Compression Study: WebP is 25-34% smaller than JPEG at equivalent SSIM (avg ~30%)","kind":"reference","scope":"business","link_type":"depends-on"}],"incoming":[{"slug":"research-brief-page-speed-moat","title":"Research brief: Page Speed as a Moat — why CWV separates the agencies from the freelancers (piece 9 of 15)","kind":"reference","scope":"business","link_type":"relates-to"}]},"created_at":"2026-05-22T20:03:33.404Z","updated_at":"2026-05-22T20:03:33.404Z"}