WP Speed Tip #10 – Lazy Load Like a Pro (And Know When It’s Not Working)

Why It Matters

Lazy loading delays the loading of images until they’re visible on screen.
It’s a no-brainer for speed — especially for image-heavy pages.

But here’s the truth:

• Just having loading="lazy" in HTML doesn’t guarantee it works.
• Some themes/plugins load images via background CSS or JS — bypassing lazy load.
• Improper lazy load can break LCP (Largest Contentful Paint) — killing Core Web Vitals.

The Fix: Confirm Lazy Load Actually Works

Step 1: Check Your Source Code

Open your site → right-click → View Page Source

Look for this inside your <img> tags:

<img src="image.webp" loading="lazy" alt="..." />

If it’s missing, your theme or plugin isn’t enabling native lazy loading.

Step 2: Use Browser DevTools (Real Check)

1. Right-click → Inspect → Network tab
2. Reload page with throttling (3G or “Slow 3G”)
3. Scroll slowly — watch image requests appear as you scroll

If images load before they appear, lazy loading is not working.

How to Force Lazy Load (If Missing)

Option 1: Use Native WordPress Lazy Loading (Enabled by default in WP 5.5+)

Just make sure your theme outputs standard <img> tags — no weird JS-based rendering.

Option 2: Manually Add loading="lazy"

In your theme files (loop, templates, etc.):

<img src="<?php echo $image_url; ?>" loading="lazy" alt="<?php echo $alt_text; ?>">

Option 3: Use a Lightweight Plugin

• Native Lazyload (by Google)
• LiteSpeed Cache (built-in lazyload + fine-tuning)
• Perfmatters (paid, but very effective)

When Not to Use Lazy Load

• On hero images above the fold — they delay LCP
• For logo or brand trust icons
• Background images loaded via CSS: background-image (not lazy-loaded by default)

Pro Tip:

Use the fetchpriority attribute for hero/primary images:

<img src="banner.webp" fetchpriority="high" alt="Hero Image">

Real-World Impact

After replacing JS-based image lazy load with native lazy loading, CLS dropped by 30% and LCP improved from 3.4s to 1.7s.

That wraps up the first 10 tips. Next series coming:
“Real-World WordPress Speed Makeovers (Case Studies + Fixes)”