how to lazy load images in WordPress without plugin

3>Understanding Lazy Loading

Lazy loading is a technique that defers the loading of non-critical resources at page load time. In the context of WordPress, it refers primarily to images and iframes. Implementing lazy loading can significantly speed up page loads, improve user experience, and conserve bandwidth.

The Benefits of Lazy Loading Images in WordPress

Before diving into the “how,” let’s briefly discuss the benefits:

• Faster Page Load Times: By loading images as they enter the viewport, you reduce initial page weight and request count.
• Improved Server Performance: Lessening the immediate load can reduce server resources required at any one time.
• SEO Advantages: Faster sites often rank better in search engine results because of better user experience metrics.

Step-by-Step Guide to Manually Lazy Load Images in WordPress

Step 1: Modify Your Theme’s Functions.php File

Start by adding support for native lazy loading in WordPress. Access your theme’s functions.php file which can be located under Appearance -> Theme Editor in the WordPress admin dashboard. Append the following code to enable lazy loading for img and iframe tags:

function add_lazy_loading($content) {
    $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
    $dom = new DOMDocument();
    @$dom->loadHTML($content);

    foreach ($dom->getElementsByTagName('img') as $img) {
        $img->setAttribute('loading', 'lazy');
    }

    foreach ($dom->getElementsByTagName('iframe') as $iframe) {
        $iframe->setAttribute('loading', 'lazy');
    }

    return $dom->saveHTML();
}
add_filter('the_content', 'add_lazy_loading');
add_filter('widget_text', 'add_lazy_loading');
add_filter('get_avatar', 'add_lazy_loading');

This code snippet modifies the WordPress content by injecting a loading="lazy" attribute into all image and iframe tags.

Step 2: Ensure Compatibility

Verify that your theme uses standard WordPress functions to output images and iframes, such as the_content(), get_avatar(), widget_text(), etc. If your theme uses custom functions, you might need to manually inject the loading="lazy" attribute in those functions.

Step 3: Test Changes

Once the changes are applied, test your website to ensure that images load as expected when scrolling. Tools like Google Chrome’s Developer Tools can help check lazy loading functionality under the Network tab (filter by Img). Delayed loading when an image enters the viewport indicates correct implementation.

Step 4: Fine-tuning and Performance Checks

Not every image benefits from lazy loading. For instance, images above the fold (the part of the webpage visible before scrolling) should load immediately when a page loads for a better user experience.

Use JavaScript to enhance control over which images are lazy-loaded. Here’s a simple script to help manage that:

document.addEventListener("DOMContentLoaded", function() {
  let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

Step 5: Consider Implementing srcset and sizes

To further enhance the responsive behavior and loading efficiency of images, use srcset and sizes attributes alongside lazy loading. This ensures that different image sizes are served depending on the device, further saving bandwidth and improving load times.

Wrapping Up

With lazy loading properly implemented, your WordPress site will benefit from reduced initial page load times and improved overall performance. Be sure to keep abreast of best practices and updates to web standards related to image loading and performance optimizations.