Implementing Lazy Loading for Better Performance

Lazy Loading Images and Content

Lazy loading delays the loading of non-critical resources until they're needed, improving initial page load time and saving bandwidth.

What is Lazy Loading?

Instead of loading all images when a page opens, lazy loading:

• Loads images only when they enter the viewport (visible area)
• Reduces initial page load time
• Saves bandwidth for users who don't scroll
• Improves Core Web Vitals metrics

Native Browser Lazy Loading

Modern browsers support lazy loading natively (Chrome, Firefox, Edge, Safari):

<img src="image.jpg" loading="lazy" alt="Description">

For iframes:

<iframe src="video.html" loading="lazy"></iframe>

WordPress Lazy Loading

Built-in (WordPress 5.5+)

WordPress automatically adds loading="lazy" to images. No action needed!

Using LiteSpeed Cache

1. Go to LiteSpeed Cache → Page Optimization
2. Click the Media tab
3. Enable Lazy Load Images
4. Optionally enable Lazy Load Iframes
5. Save Changes

Additional Options:

• Generate Placeholder - Shows low-quality placeholder while loading
• Responsive Placeholder - Prevents layout shift
• Exclude from Lazy Load - Specify images to load immediately

Manual Implementation

Simple JavaScript Approach

document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll('img[data-src]');

    const imageObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                imageObserver.unobserve(img);
            }
        });
    });

    lazyImages.forEach(img => imageObserver.observe(img));
});

HTML usage:

<img data-src="image.jpg" alt="Description">

What to Lazy Load

Good candidates:

• Images below the fold (not visible on initial load)
• Embedded videos and iframes
• Heavy widgets (social media embeds, maps)
• Comment sections

Don't lazy load:

• Above-the-fold images (hero images, logos)
• LCP (Largest Contentful Paint) element
• Critical background images
• Small icons

Preventing Layout Shift

Lazy loading can cause layout shift if not handled properly. Always:

1. Set dimensions

   <img src="image.jpg" loading="lazy" width="800" height="600" alt="...">

2. Use aspect-ratio CSS

   img { aspect-ratio: 16/9; width: 100%; height: auto; }

3. Reserve space with placeholders

Testing Lazy Loading

1. Open browser DevTools (F12)
2. Go to Network tab
3. Filter by "Img"
4. Refresh and scroll slowly
5. Watch images load as you scroll

Check Core Web Vitals impact in PageSpeed Insights.

Common Issues

Images not appearing:

• Check JavaScript console for errors
• Verify image paths are correct
• Test with lazy loading disabled

Layout jumping:

• Add width and height attributes
• Use placeholder images
• Set CSS aspect-ratio

Best Practices

• Don't lazy load above-the-fold content
• Always include width and height attributes
• Use low-quality image placeholders (LQIP)
• Test on slow connections (DevTools throttling)
• Monitor Core Web Vitals after implementation

Need Help?

For assistance implementing lazy loading, contact our support team.