Improving LCP with Lazy Loading via Intersection Observer

Ritisha

September 23, 2025

Introduction: Why LCP Is Your Site’s Silent SEO Killer

You don’t lose visitors because your content is weak. You lose them because they leave before it even loads.

Modern websites compete not only on design and content but also on speed—more specifically, how quickly the Largest Contentful Paint (LCP) appears. For users, LCP is that first moment when the page looks usable. For Google, it’s one of three Core Web Vitals metrics that determine how healthy your website is from a user experience perspective.

If your LCP score is in the red, your site is bleeding visitors and rankings. And yet, many fixes that promise to optimize LCP either don’t scale well or break functionality. The good news? There’s a simple, elegant way to improve LCP without compromising your design: Lazy Loading with Intersection Observer.

In this blog, we’ll break down how to use this technique as part of a broader core web vitals strategy, explain how it fits into modern performance best practices, and walk you through real implementation tactics that go beyond common tutorials.

What Is LCP and Why It Matters

Largest Contentful Paint (LCP) measures the render time of the largest visible element in the viewport. It’s often an image, video poster, or large text block.

Google’s LCP Benchmarks:

• Good: Under 2.5 seconds
• Needs Improvement: Between 2.5–4 seconds
• Poor: Over 4 seconds

LCP is directly tied to perceived load speed. It tells Google—and more importantly, your users—when the page is usable. A poor LCP score creates friction, increases bounce rates, and tanks conversion rates.

In short: a slow LCP silently kills trust. And Google now uses this metric in its ranking algorithm, so ignoring it is no longer an option.

How LCP Fits Into a Core Web Vitals Strategy

Core Web Vitals (CWV) are part of Google’s page experience signals. The three metrics are:

• LCP (Largest Contentful Paint): Load performance
• FID (First Input Delay): Interactivity
• CLS (Cumulative Layout Shift): Visual stability

A successful core web vitals strategy starts with prioritizing fixes based on impact. LCP often represents the biggest, quickest win. That’s because optimizing LCP doesn’t just help Google—it directly helps users engage faster.

If you’re researching how to improve core web vitals, LCP should be your first target, followed by Cumulative Layout Shift (CLS) and then FID.

Lazy Loading: A Smart Solution for Faster LCP

Lazy loading defers loading of non-critical resources—usually images or videos—until they’re about to enter the viewport. This approach conserves bandwidth and accelerates page rendering by prioritizing what users see first.

When you lazy load properly, you reduce the total initial load size. This speeds up critical path rendering, which improves LCP.

Types of Lazy Loading:

• Native lazy loading: Uses the loading=”lazy” attribute on images and iframes.
• JavaScript-based lazy loading: Offers more control and works across more use cases.

While native lazy loading is simple, it lacks flexibility. This is where using Intersection Observer shines—it provides a more robust, browser-optimized way to handle lazy loading.

Using Intersection Observer for Lazy Loading

The Intersection Observer API provides a powerful way to detect when an element enters or exits the viewport. It enables you to load resources only when needed, without relying on scroll events (which are costly to performance).

Why Use Intersection Observer?

• Efficient and optimized at the browser level
• Works asynchronously without blocking main thread
• Scalable across hundreds of elements
• Supports fine-tuned control (thresholds, root margins, etc.)

How It Works (Simplified Flow):

1. Select elements you want to observe (e.g., images).
2. Create an observer with callback logic.
3. Load the image when it enters the viewport.
4. Unobserve it once loaded to save resources.

Code Example: Lazy Load Images with Intersection Observer

html:

<img data-src=”image.jpg” class=”lazy” alt=”example image” width=”600″ height=”400″>

javscript:

const images = document.querySelectorAll(‘img.lazy’);

const config = {

rootMargin: ‘0px 0px 200px 0px’,

threshold: 0.1

};

let observer = new IntersectionObserver((entries, observer) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

const img = entry.target;

img.src = img.dataset.src;

img.classList.remove(‘lazy’);

observer.unobserve(img);

}

});

}, config);

images.forEach(image => {

observer.observe(image);

});

Why This Works for LCP:

• Keeps initial page weight low
• Speeds up Time to First Byte (TTFB) and First Paint
• Ensures LCP elements load only when needed

When Not to Lazy Load

Not every image or video should be lazy loaded.

Avoid lazy loading:

• Images above the fold
• Your hero image (this is often the LCP element)
• Any asset that contributes directly to perceived load speed

Instead, preload these assets or use fetchpriority=”high” to ensure they load quickly.

Intersection Observer and Preloading: Finding Balance

Combining preloading for LCP-critical assets and lazy loading for everything else creates the ideal balance.

Use preload for:

• Largest image above the fold
• Fonts
• Logos

Use Intersection Observer for:

• Images below the fold
• Video embeds
• Ads and third-party widgets

Advanced Tactics to Improve Core Web Vitals

Want to go beyond the basics? Here are some advanced strategies:

1. Image Format Optimization

Use next-gen formats like WebP or AVIF. These offer significant size reductions without sacrificing quality.

2. Responsive Images

Use srcset with Intersection Observer to load images based on screen size.

3. Prioritize HTML and CSS

Keep your critical CSS inline and delay JavaScript execution when possible.

4. Leverage FetchPriority

For key images, add:

<img src=”hero.jpg” fetchpriority=”high” …>

5. Reduce JavaScript Payloads

Heavy JS can delay rendering. Minify, bundle smartly, and defer non-critical scripts.

Common Lazy Loading Mistakes (And How to Fix Them)

1: Lazy Loading All Images

Lazy loading every image, including your LCP element or hero image, delays meaningful content rendering. Exclude above-the-fold assets from lazy loading to ensure faster visual load and improved LCP score.

2: Forgetting Alt Attributes

Skipping alt attributes during lazy loading negatively affects accessibility and SEO. Always include descriptive, relevant alt text to ensure content is accessible to screen readers and search engines alike.

3: Not Cleaning Up Observers

Failing to disconnect the observer after an element loads can cause memory leaks. Always use observer.unobserve(target) once an image is loaded to maintain performance and prevent resource bloat.

4: Relying Only on Native Lazy Loading

Native lazy loading (loading=”lazy”) is limited and may not suit all use cases. Combine it with Intersection Observer to gain more control over when and how content loads efficiently.

Lazy Loading Benefits Beyond LCP

While this article focuses on LCP, lazy loading intersection observer techniques also help improve:

First Input Delay (FID):

Reducing unnecessary JavaScript execution and deferring non-critical images lowers main-thread activity, allowing quicker input responsiveness and significantly improving FID, which measures the time from user interaction to processing.

CLS (Cumulative Layout Shift):

Unstable layouts disrupt user experience. Always define explicit width and height attributes for images and containers. This prevents unexpected layout movement, reducing CLS and creating a smoother, more stable rendering flow.

Total Blocking Time:

Heavy JavaScript blocks rendering and delays interaction. Minimizing and deferring non-essential scripts reduces Total Blocking Time (TBT), making your website feel faster, more responsive, and ready for early user input.

These improvements together form the foundation of a solid core web vitals strategy.

Conclusion: Build Faster, Load Smarter

Improving LCP doesn’t require a complete rebuild or expensive Content Delivery Networks (CDN) overhauls. In many cases, the fixing core web vitals’ issues lie in using the right tools—like the Intersection Observer API—to lazy load what doesn’t need to be immediate.

A thoughtful implementation can drastically improve user experience, drive better engagement, and boost SEO rankings. When planned as part of a holistic core web vitals strategy, lazy loading becomes a powerful lever for performance.

Need expert guidance to optimize your site across all Core Web Vitals metrics?

Hire Core Web Vitals Consultants to get tailored strategies and technical implementation for real-world results.