ImageLazyLoading [rule] v1.0.0

Images that are not visible in the initial viewport MUST use loading='lazy' to defer their network fetch; above-the-fold images MUST use loading='eager' (the default) and should use fetchpriority='high' for the LCP image.

Severity

medium

Threshold

Apply loading='lazy' to any image whose top edge is ≥ 1 viewport height below the initial fold.

ImageLazyLoading [rule] v1.0.0

Images that are not visible in the initial viewport MUST use loading='lazy' to defer their network fetch; above-the-fold images MUST use loading='eager' (the default) and should use fetchpriority='high' for the LCP image.

Severity

medium

Threshold

Apply loading='lazy' to any image whose top edge is ≥ 1 viewport height below the initial fold.

Examples

• Hero (LCP):
• Below fold:
• Wrong: loading='lazy' on the first visible image above the fold

Rationale

Lazy loading reduces initial page weight by deferring off-screen image fetches until the user scrolls near them. The LCP image must be eager-loaded with fetchpriority='high' or it will delay the performance metric.

Severity

medium

Threshold

Apply loading='lazy' to any image whose top edge is ≥ 1 viewport height below the initial fold.