---
title: "Lazy loading and the LCP image: which image should load first?"
date: 2026-04-19
author: "xcropimage.io Team"
tags: ["lazy loading", "LCP", "Core Web Vitals", "SEO", "performance"]
lang: "en"
description: "Balance lazy loading with fetchpriority for the LCP image so Core Web Vitals stay healthy."
---

## Introduction

**Lazy loading** defers below-the-fold images and saves bandwidth—but **delaying the LCP (Largest Contentful Paint) candidate** hurts **Core Web Vitals** and user-perceived speed. The fix is not “disable lazy loading everywhere”; it is **identify the LCP element**, **prioritize** it, and lazy-load the rest.

<figure>
<img src="/blog-images/lazy-loading-lcp-priority-image-selection.jpg" alt="Lazy loading and the LCP image: which image should load first?." width="1200" height="630" loading="lazy" decoding="async" />
<figcaption>Lazy loading and the LCP image: which image should load first?.</figcaption>
</figure>

**Earlier in this series:** [Image sitemap](/blog/image-sitemap-seo-indexing-steps) · [WebP vs AVIF](/blog/webp-avif-publishing-browser-fallback) · [Newsletter heroes](/blog/email-newsletter-hero-image-file-size-layout).

## How to choose the LCP image

On many product and content pages, the **hero** or main product image is the LCP element—but not always (text blocks or video posters can win). Use **field** and **lab** tools to confirm; [web.dev: Optimize LCP](https://web.dev/articles/optimize-lcp) walks through measurement and common fixes.

**Practical rules:**

* Do **not** set `loading="lazy"` on the likely LCP `<img>` (or use `fetchpriority="high"` where supported and validated).
* Preload the **critical** hero URL only when profiling shows a real bottleneck—avoid over-preloading.

## MDN and attribute behavior

[MDN on `loading`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) documents how `lazy` interacts with the viewport. `fetchpriority` is complementary for hinting urgency.

## CDN and caching

Stale caches after deploys can affect LCP if you thought you shipped a lighter file—see [CDN cache and stale images](/blog/cdn-cache-stale-images-after-update). Versioning belongs in [batch automation](/blog/batch-resize-compress-automation-quality).

## Turkish parallel

[Lazy loading ve LCP (Türkçe)](/blog/lazy-loading-lcp-oncelikli-gorsel-secimi) mirrors this guide.

## Conclusion

Pair LCP prioritization with format optimization ([WebP/AVIF](/blog/webp-avif-publishing-browser-fallback)) and general tips from [simple image tips for faster sites](/blog/simple-image-editing-tips-for-faster-loading-websites).