Image Lazy Loading SEO Rule

Validate proper lazy loading implementation for images to optimize page load performance

What This Rule Checks

Checks for lazy loading on pages with many images, warns about above-the-fold images with lazy loading, detects below-fold images without lazy loading, identifies JavaScript-based and duplicate lazy loading.

Why It Matters for SEO & GEO

Lazy loading defers offscreen images, reducing initial page load time. However, lazy loading above-the-fold images hurts LCP. Proper implementation balances performance and user experience.

How to Fix

Add loading='lazy' to images below the fold. Use loading='eager' or omit the attribute for the first 3 images. Prefer native lazy loading over JavaScript-based solutions.

Examples

Bad

<img src="hero.jpg" loading="lazy"> 

Good

<img src="hero.jpg" loading="eager"><img src="below-fold.jpg" loading="lazy">

How VibeLinter Checks Lazy Loading

VibeLinter’s images/lazy-loading rule performs these checks on every page:

Missing lazy loading — Reports when a page has more than 5 images but none use loading="lazy"
Above-the-fold check — Warns when the first 3 images (configurable via aboveFoldCount) have loading="lazy" (these should load eagerly)
Below-the-fold check — Issues info when images after the fold position lack loading="lazy"
JavaScript lazy loading — Detects class-based lazy loading (.lazy, .lazyload) and suggests native loading="lazy" instead
Duplicate implementations — Flags images using both native loading="lazy" and JavaScript-based lazy loading classes simultaneously

Configuration

// vibelinter.config.cjs
module.exports = {
  rules: {
    'images/lazy-loading': {
      enabled: true,
      severity: 'info',
      checkAboveFold: true,
      aboveFoldCount: 3
    }
  }
}

SEO Impact

Proper lazy loading affects:

Initial page load — Deferring offscreen images reduces time to interactive and initial page weight
LCP optimization — Eager loading above-fold images ensures the largest contentful paint happens quickly
Bandwidth savings — Users who don’t scroll see only the images they need, reducing data transfer
GEO (Generative Engine Optimization) — AI crawlers may not execute JavaScript lazy loading; native loading="lazy" ensures proper image discovery while maintaining performance