# LCP element identified and optimized for fast delivery - **Pattern:** `ab-001995` (`performance-core.loading-resource-priority.lcp-optimized`) - **Severity:** critical - **Lifecycle:** active - **Last modified:** 2026-04-18 - **Canonical URL:** https://auditbuffet.com/patterns/ab-001995 - **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001995) ## Why it matters ISO-25010 time-behaviour is measured by LCP — and Google's Core Web Vitals set the bar at 2.5 seconds. Miss it and you lose search ranking (LCP is a page experience signal), conversion rate (every 100ms of delay costs approximately 1% in revenue for e-commerce), and mobile users on slower connections who bounce before the page is usable. An unoptimized LCP element is typically the hero image or largest heading; when it loads without a preload directive or is lazy-loaded by mistake, the browser discovers it late in the waterfall, adding hundreds of milliseconds before the page looks complete. ## Severity rationale Critical because a slow LCP directly degrades Core Web Vitals scores, suppresses search ranking, and correlates with measurable conversion loss at scale. ## Remediation Add a `` in `` for the LCP element — the browser will fetch it at the highest priority before parsing the rest of the document. For Next.js, pass the `priority` prop to `next/image` instead: ```tsx // src/app/page.tsx — hero image above the fold Hero ``` For plain HTML, include `imagesrcset` and `imagesizes` so responsive variants are preloaded at the right size: ```html ``` Verify impact in DevTools: the LCP resource must appear at the very start of the waterfall with priority "Highest". ## Detection - **ID:** `lcp-optimized` - **Severity:** `critical` - **What to look for:** Count all relevant instances and enumerate each. Before evaluating, extract and quote any relevant configuration or UI text found. Identify the Largest Contentful Paint element (typically a hero image or heading text). Check whether it is preloaded, inline, or served with appropriate cache headers. Look for `` tags targeting the LCP resource, or inspect image loading patterns to verify the element loads as early as possible. - **Pass criteria:** The LCP element (typically a large image or heading) has explicit preload directives via `` or similar, OR it is inline in the initial HTML, OR it is served from a CDN with aggressive caching. Project documentation or code comments indicate awareness of LCP optimization. A partial or placeholder implementation does not count as pass. Report the count even on pass. - **Fail criteria:** The LCP element has no preload directive, is lazy-loaded unnecessarily, or is hosted without CDN caching. Build output or performance logs show LCP exceeds 2.5 seconds. - **Skip (N/A) when:** The project has no dynamic rendering (static site with static assets only) or no client-side rendering layer. - **Detail on fail:** Specify the LCP element and why it's slow. Example: `"Hero image (2.5 MB) at /images/banner.jpg loaded without preload; no CDN caching configured — measured LCP 4.2s"` or `"Critical text rendered client-side after JS hydration; preload not applicable"` - **Remediation:** The Largest Contentful Paint element typically appears in the first viewport and contributes significantly to perceived page speed. Preload critical images and ensure they're served with cache headers: ```html ``` For Next.js, use `next/image` with priority: ```tsx Hero ``` ## External references - iso-25010 performance-efficiency.time-behaviour Taxons: performance HTML version: https://auditbuffet.com/patterns/ab-001995