LCP element identified and optimized for fast delivery

ab-001995 · performance-core.loading-resource-priority.lcp-optimized

Severity: criticalactive

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 <link rel="preload"> in <head> 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:

// src/app/page.tsx — hero image above the fold
<Image src="/images/hero.jpg" alt="Hero" priority width={1200} height={600} />

For plain HTML, include imagesrcset and imagesizes so responsive variants are preloaded at the right size:

<link rel="preload" as="image" href="/images/hero.jpg"
      imagesrcset="/images/hero-480.jpg 480w, /images/hero-1200.jpg 1200w"
      imagesizes="(max-width: 768px) 100vw, 1200px">

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 <link rel="preload"> 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 <link rel="preload" as="image" href="..."> 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:
```

<link rel="preload" as="image" href="/images/hero.jpg" imagesrcset="...sizes="...">
```
For Next.js, use next/image with priority:
```
<Image src="/hero.jpg" alt="Hero" priority width={1200} height={600} />
```

External references

iso-25010:2011 · performance-efficiency.time-behaviour — Time Behaviour

Taxons

performance

History

2026-04-18·v1.0.0·Initial import from performance-core·automated

Why it matters

Remediation

// src/app/page.tsx — hero image above the fold
<Image src="/images/hero.jpg" alt="Hero" priority width={1200} height={600} />

For plain HTML, include imagesrcset and imagesizes so responsive variants are preloaded at the right size:

<link rel="preload" as="image" href="/images/hero.jpg"
      imagesrcset="/images/hero-480.jpg 480w, /images/hero-1200.jpg 1200w"
      imagesizes="(max-width: 768px) 100vw, 1200px">

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 <link rel="preload"> 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 <link rel="preload" as="image" href="..."> 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:
```

<link rel="preload" as="image" href="/images/hero.jpg" imagesrcset="...sizes="...">
```
For Next.js, use next/image with priority:
```
<Image src="/hero.jpg" alt="Hero" priority width={1200} height={600} />
```