Skip to main content
Beta: Front-End Checklist is currently in beta. Some issues are still being fixed. Thanks for your patience.
72.7k
PerformanceMedium

Disable lazy loading for above-the-fold content

Detects lazy loading on likely above-fold images to improve Largest Contentful Paint (LCP)

Utilities
Quick take
Typical fix time 10 min
  • Do not use `loading="lazy"` for images in the initial viewport
  • Lazy loading above-the-fold images delays the Largest Contentful Paint (LCP)
  • Ensure critical images start downloading as early as possible
Why it matters: Applying lazy loading to hero images or other primary content can cause a significant delay in how quickly users perceive the page as loaded.

Rule Details

Lazy loading is a powerful technique for reducing initial page weight, but it should only be applied to images and resources that are not immediately visible in the viewport.

Code Examples

Avoid Lazy Loading for Hero Images

<!-- ❌ Bad: Lazy loading an above-the-fold hero image -->
<img src="/hero.jpg" alt="Our Product" loading="lazy">
 
<!-- ✅ Good: Removing lazy loading and prioritizing the image -->
<img src="/hero.jpg" alt="Our Product" fetchpriority="high">

Next.js Image Component

// ❌ Bad: Hero image with lazy loading (default)
<Image src="/hero.jpg" alt="Hero" />
 
// ✅ Good: Hero image with priority
<Image src="/hero.jpg" alt="Hero" priority />

Why It Matters

Use PageSpeed Insights (opens in new tab) or Lighthouse to confirm which image is actually the LCP element before removing lazy loading, because the first visible asset is not always the real bottleneck.

  • Largest Contentful Paint (LCP): The Largest Contentful Paint is usually the primary hero image. If the browser waits to discover if that image is in the viewport before loading it, LCP increases significantly.
  • Resource Prioritization: By default, lazy-loaded images are assigned a lower priority by the browser, which delays their download.
  • Visual Stability: If critical images load late, it can lead to layout shifts (CLS) or a poor user experience as content pops in late.
  • Browser Discovery: Browsers can't pre-scan and start downloading lazy-loaded images as early as regular images.

Best Practices

✅ Identify the LCP Element: Use Lighthouse or PageSpeed Insights to find which image is your LCP candidate. ✅ Use fetchpriority=\"high\": For your LCP image, hint to the browser that it should be prioritized. ✅ Exclude First X Images: A common rule of thumb is to avoid lazy loading the first 2-3 images on a page. ✅ Test Different Viewports: Ensure images aren't lazy-loaded on mobile even if they might be below the fold on desktop.

Tools & Validation

Standards

  • Use web.dev: Learn Performance as the standard for measuring the final production behavior, not just local synthetic output.
  • Use Chrome Developers: Lighthouse overview as the standard for measuring the final production behavior, not just local synthetic output.

Verification

Automated Checks

  • Measure the affected page or flow in Lighthouse, PageSpeed Insights, or DevTools and confirm the targeted metric improves.
  • Inspect the network waterfall or performance timeline to confirm the intended resource or execution change actually took effect.

Manual Checks

  • Verify the change on a throttled mobile profile, not just local desktop.
  • If this rule maps to a budget or Web Vital, confirm the page now stays within that threshold.

Use with AI

Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.

Check

Verify implementation

Review the page's images and check for `loading="lazy"` on any images that are likely to be in the initial viewport (above-the-fold).

Fix

Auto-fix issues

Remove `loading="lazy"` from above-the-fold images and consider using `fetchpriority="high"` instead.

Explain

Learn more

Explain why lazy loading above-the-fold content negatively impacts perceived performance and LCP.

Review

Code review

Review the routes, assets, and loading behavior that affect Disable lazy loading for above-the-fold content. Flag exact files, requests, or rendering steps that add unnecessary network, CPU, or layout cost, and describe the measurement method used to confirm the issue.

Sources

References used to support the guidance in this rule.

Further Reading

Tools and supplementary material for exploring the topic in more depth.

PageSpeed Insights
pagespeed.web.devTool

Rules that often go hand-in-hand with this one.

Implement lazy loading for offscreen content

Images and heavy resources below the fold are lazy loaded to improve initial performance.

Performance
Use resource hints for faster loading

Implement preload, prefetch, and preconnect hints to optimize resource loading priority.

Performance
Load non-critical code when content approaches the viewport

Use viewport-aware loading to fetch components, embeds, and feature code shortly before they become visible instead of shipping them on first load.

Performance
Use fetchpriority to hint resource loading priority

The fetchpriority attribute is applied to critical images, scripts, and preload links to help the browser prioritise the most important resources and defer lower-priority ones.

Performance

Was this rule helpful?

Your feedback helps improve rule quality. This stays internal for now.

Loading feedback...
0 / 385