Lazy-load Above the Fold

Native lazy-loading (loading="lazy") asks the browser to wait for the image to enter the viewport before downloading it. On an image visible immediately (logo, hero, first illustration), this delays LCP (Largest Contentful Paint, one of the critical Core Web Vitals). Google has documented that a bad LCP costs SERP positions. The rule: no lazy-load above the fold, lazy-load everywhere below.

3-criteria heuristic. First, source order position, the first 5 images are almost always above the fold on desktop. Second, structural context, images inside <header>, <nav>, or the first 5,000 characters of <main>. Third, class names, hero, cover, banner, above-fold, jumbo, featured-img... Any image with loading="lazy" matching one of these criteria is flagged.

For images above the fold: loading="eager" (default, can be omitted) plus fetchpriority="high" (forces the browser to download them with priority, typical LCP gain of 200-500 ms). For images below the fold: loading="lazy". And always: width and height set on every <img> to avoid CLS (layout shift).

As long as your class names contain the classic SEO patterns (hero, cover, banner...), yes. For more exotic frameworks (utility-only without semantic names), we fall back on heuristics 1 and 2 (position plus structural context). If all your images are named img-1, img-2, the tool flags the first 5 and those in the header, which covers 90% of real cases.