LCP optimization signals are present

ab-001692 · marketing-advanced-seo.mobile-performance-seo.lcp-optimization

Severity: highactive

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 <img> 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 <Image> component. This injects a <link rel="preload"> in the document head and removes lazy loading for that element — the browser fetches it immediately instead of waiting for layout.

// app/page.tsx — LCP hero image
import Image from 'next/image'

export default function Home() {
  return (
    <Image
      src="/hero.webp"
      alt="Hero"
      width={1200}
      height={600}
      priority          // adds preload, disables lazy loading
      sizes="100vw"
    />
  )
}

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 <Script> component with strategy="afterInteractive" to defer execution until after LCP. See the Performance & Load Readiness audit for measurement guidance and INP/CLS analysis.

Detection

ID: lcp-optimization
Severity: high
What to look for: Count all above-the-fold images and hero elements. Enumerate their loading strategy: which use priority or preload vs. which use lazy loading. Largest Contentful Paint (LCP) is a Core Web Vital that directly affects Google's Page Experience ranking signal. Check for LCP optimization patterns: (1) the primary above-the-fold image (hero image, banner) uses Next.js Image priority prop or a <link rel="preload"> in the head, (2) Next.js Image component is used instead of bare <img> for large images (enables automatic WebP/AVIF, srcset), (3) no render-blocking synchronous CSS or JS in the <head> before main content, (4) font loading uses font-display: swap or Next.js font optimization (next/font/google or next/font/local).
Pass criteria: Above-the-fold large images use Next.js <Image priority> or have a preload hint. Framework font optimization is in use. No synchronous third-party scripts are loaded in <head> before main content. At least 90% of LCP-candidate elements should use eager loading (priority prop or fetchpriority="high").
Fail criteria: Hero/above-the-fold images use bare <img> tags without preload. Multiple render-blocking synchronous scripts in <head>. Font loading uses default browser behavior with no font-display: swap and no Next.js font optimization.
Skip (N/A) when: No images detected in above-the-fold content. Project is an API-only service with no rendered frontend.
Report even on pass: Report the LCP strategy: "X of Y above-fold images use priority loading; LCP candidate is [element type]."
Cross-reference: For CLS during image loading, see cls-prevention. For interaction responsiveness, see interaction-responsiveness.
Detail on fail: "LCP risk: above-the-fold hero image uses bare <img> tag without priority loading. 3 synchronous scripts in <head> may delay LCP element load. Font loading uses default behavior without font-display optimization."
Remediation: LCP measures how quickly the largest visible element loads. For a good LCP score (under 2.5 seconds), use Next.js Image with the priority prop on above-the-fold images — this adds a preload link and disables lazy loading for that image. For fonts, use next/font/google with display: 'swap'. Load third-party scripts using the Next.js Script component with strategy="afterInteractive" rather than as inline synchronous tags. For a deeper analysis of performance optimization, the Performance & Load Readiness audit covers Core Web Vitals with specific measurement guidance.
```
// app/page.tsx — LCP optimization with priority image
import Image from 'next/image'
<Image src="/hero.webp" alt="Hero" width={1200} height={600} priority />
```

External references

iso-25010:2011 · performance-efficiency — LCP as time-behaviour performance characteristic

Taxons

performance findability

History

2026-04-18·v1.0.0·Initial import from marketing-advanced-seo·automated

Why it matters

Remediation

// app/page.tsx — LCP hero image
import Image from 'next/image'

export default function Home() {
  return (
    <Image
      src="/hero.webp"
      alt="Hero"
      width={1200}
      height={600}
      priority          // adds preload, disables lazy loading
      sizes="100vw"
    />
  )
}

Detection

ID: lcp-optimization
Severity: high
What to look for: Count all above-the-fold images and hero elements. Enumerate their loading strategy: which use priority or preload vs. which use lazy loading. Largest Contentful Paint (LCP) is a Core Web Vital that directly affects Google's Page Experience ranking signal. Check for LCP optimization patterns: (1) the primary above-the-fold image (hero image, banner) uses Next.js Image priority prop or a <link rel="preload"> in the head, (2) Next.js Image component is used instead of bare <img> for large images (enables automatic WebP/AVIF, srcset), (3) no render-blocking synchronous CSS or JS in the <head> before main content, (4) font loading uses font-display: swap or Next.js font optimization (next/font/google or next/font/local).
Pass criteria: Above-the-fold large images use Next.js <Image priority> or have a preload hint. Framework font optimization is in use. No synchronous third-party scripts are loaded in <head> before main content. At least 90% of LCP-candidate elements should use eager loading (priority prop or fetchpriority="high").
Fail criteria: Hero/above-the-fold images use bare <img> tags without preload. Multiple render-blocking synchronous scripts in <head>. Font loading uses default browser behavior with no font-display: swap and no Next.js font optimization.
Skip (N/A) when: No images detected in above-the-fold content. Project is an API-only service with no rendered frontend.
Report even on pass: Report the LCP strategy: "X of Y above-fold images use priority loading; LCP candidate is [element type]."
Cross-reference: For CLS during image loading, see cls-prevention. For interaction responsiveness, see interaction-responsiveness.
Detail on fail: "LCP risk: above-the-fold hero image uses bare <img> tag without priority loading. 3 synchronous scripts in <head> may delay LCP element load. Font loading uses default behavior without font-display optimization."
Remediation: LCP measures how quickly the largest visible element loads. For a good LCP score (under 2.5 seconds), use Next.js Image with the priority prop on above-the-fold images — this adds a preload link and disables lazy loading for that image. For fonts, use next/font/google with display: 'swap'. Load third-party scripts using the Next.js Script component with strategy="afterInteractive" rather than as inline synchronous tags. For a deeper analysis of performance optimization, the Performance & Load Readiness audit covers Core Web Vitals with specific measurement guidance.
```
// app/page.tsx — LCP optimization with priority image
import Image from 'next/image'
<Image src="/hero.webp" alt="Hero" width={1200} height={600} priority />
```