LCP optimization signals are present

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.

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: marketing-advanced-seo.mobile-performance-seo.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 />
```

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: marketing-advanced-seo.mobile-performance-seo.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 />
```

LCP optimization signals are present

Why it matters

Severity rationale

Remediation

Detection

External references

Taxons

History

LCP optimization signals are present

Why it matters

Severity rationale

Remediation

Detection

External references

Taxons

History