Implement Image Lazy Loading in WordPress with Pure Code and JavaScript

What Is Lazy Loading?

Lazy loading is a web performance optimization technique. Its core principle is to load only images within (or about to enter) the viewport. Images further down the page are loaded only when the user scrolls near them. This significantly reduces the number of HTTP requests and data volume during the initial page load, speeding up first-contentful paint and improving user experience.

Why Implement It Manually?

While many WordPress themes and plugins (e.g., WP Rocket) include lazy loading, a manual implementation offers advantages:

• Lightweight: No plugin dependency, reducing code bloat and potential conflicts.
• Greater Control: Fine-tune behavior and styling.
• Educational Value: Understanding the principles aids deeper performance optimization.

Implementation Steps

Step 1: Prepare HTML Structure

Modify image HTML tags. Replace the src attribute with data-src and assign a placeholder (e.g., a tiny preview or solid color) to src. Add a common class like lazy-load.

<!-- Original -->
<img src="large-image.jpg" alt="Description">

<!-- Lazy-load ready -->
<img class="lazy-load" src="placeholder.jpg" data-src="large-image.jpg" alt="Description">

In WordPress, you can modify theme template files (e.g., content.php) or use hooks. Alternatively, use JavaScript to handle conversion dynamically.

Step 2: Core JavaScript Code

Create a function to detect when images enter the viewport and load them. Use the Intersection Observer API for better performance, with a fallback for older browsers.

document.addEventListener("DOMContentLoaded", function() {
    if ('IntersectionObserver' in window) {
        const lazyImages = document.querySelectorAll('img.lazy-load');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    img.src = img.dataset.src;
                    img.classList.remove('lazy-load');
                    observer.unobserve(img);
                }
            });
        });
        lazyImages.forEach(img => observer.observe(img));
    } else {
        // Fallback: scroll event listener
        let lazyImages = [].slice.call(document.querySelectorAll('img.lazy-load'));
        let active = false;
        const lazyLoad = function() {
            if (!active) {
                active = true;
                setTimeout(() => {
                    lazyImages.forEach(img => {
                        const rect = img.getBoundingClientRect();
                        if (rect.top <= window.innerHeight && rect.bottom >= 0 && getComputedStyle(img).display !== 'none') {
                            img.src = img.dataset.src;
                            img.classList.remove('lazy-load');
                            lazyImages = lazyImages.filter(i => i !== img);
                            if (lazyImages.length === 0) {
                                document.removeEventListener('scroll', lazyLoad);
                                window.removeEventListener('resize', lazyLoad);
                                window.removeEventListener('orientationchange', lazyLoad);
                            }
                        }
                    });
                    active = false;
                }, 200);
            }
        };
        ['scroll', 'resize', 'orientationchange'].forEach(evt => {
            window.addEventListener(evt, lazyLoad);
        });
        lazyLoad(); // Initial load
    }
});

Step 3: Integrate into WordPress

Add the code to your site:

1. Enqueue as a File: Save the JS as lazy-load.js in your theme's /js/ folder. Then in functions.php:

function mytheme_enqueue_lazy_load() {
    wp_enqueue_script(
        'mytheme-lazy-load',
        get_template_directory_uri() . '/js/lazy-load.js',
        array(),
        '1.0.0',
        true // Load in footer
    );
}
add_action('wp_enqueue_scripts', 'mytheme_enqueue_lazy_load');

2. Inline Script: For very short code, you can output directly via a hook (not recommended for longer scripts).

Step 4: Automatically Convert Existing Images

To avoid manual HTML edits, use JavaScript to convert images within specific areas (like post content) on page load.

function convertToLazy() {
    const contentImages = document.querySelectorAll('.entry-content img, .post-content img'); // Adjust selector
    contentImages.forEach(img => {
        if (!img.classList.contains('lazy-load') && img.src) {
            img.dataset.src = img.src;
            // Use a transparent SVG placeholder
            img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"%3E%3C/svg%3E';
            img.classList.add('lazy-load');
            img.style.backgroundColor = '#f0f0f0'; // Optional loading style
        }
    });
    // Now initialize the lazy load observer (call the function from Step 2)
    initLazyLoad(); // Ensure this function is defined and available
}
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', convertToLazy);
} else {
    convertToLazy();
}

Considerations & Best Practices

• Placeholders: Use inline SVG or tiny Base64 images for src to avoid extra requests. Set width and height attributes to prevent layout shifts.
• Critical Images: Exclude above-the-fold images (e.g., logo, hero) from lazy loading to ensure immediate load.
• CSS: Add a fade-in transition for .lazy-load for smoother visual feedback.
• Testing: Use browser DevTools (Network panel) and Lighthouse to verify performance impact.
• Plugin Compatibility: Disable other lazy‑loading or caching plugins to avoid conflicts.

Conclusion

This code‑based approach successfully implements image lazy loading in WordPress. The core mechanism stores the real image URL in data‑src and uses JavaScript to replace it when the image enters the viewport. This reduces initial load resources, improves site speed metrics, and enhances user experience. Adjust the image selectors and initialization timing based on your theme's structure for optimal results.