# LCP optimization signals are present
- **Pattern:** `ab-001692` (`marketing-advanced-seo.mobile-performance-seo.lcp-optimization`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001692
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001692)
## Why it matters
Largest Contentful Paint (LCP) is a Core Web Vital in Google's Page Experience ranking signal — poor LCP (over 2.5 seconds) is a documented ranking penalty on mobile. The most common cause is a hero image loaded without a preload hint: the browser discovers the image only after parsing the HTML, then waits for it to download before marking LCP complete. A bare `` tag without `priority` on a Next.js page means the image competes with scripts and stylesheets for bandwidth. iso-25010:2011 performance-efficiency maps directly to this: delayed LCP degrades both user experience and search ranking simultaneously, and the fix is a single prop change.
## Severity rationale
High because a poor LCP score is a confirmed Page Experience ranking signal on mobile, and above-the-fold images without priority loading are the leading cause of failing the 2.5-second LCP threshold.
## Remediation
Add the `priority` prop to your above-the-fold `` component. This injects a `` in the document head and removes lazy loading for that element — the browser fetches it immediately instead of waiting for layout.
```tsx
// app/page.tsx — LCP hero image
import Image from 'next/image'
export default function Home() {
return (
)
}
```
For fonts, replace manual `@import` with `next/font/google` — it automatically injects `font-display: swap` and preloads the font variant for the initial render. For third-party scripts, use the Next.js `