Lazy Load Usage on Websites & Improving Image Loading Speed

In today's web environment, speed is a critical factor for SEO success and user experience. Especially on visually rich sites, Lazy Load is a very effective solution to shorten page loading times and reduce resource consumption. In this article, we will explain how to implement lazy load for both PHP-based sites and WordPress, with technical details and sample code.

In addition, internal SEO compliance is ensured with the following content:

What is Lazy Load?

Lazy Load is a technique that allows only the images visible on the user's screen to be loaded, instead of preloading all images when the page loads. This makes the page load faster and saves bandwidth.

Lazy Load Implementation in PHP-Based Sites

For lazy load implementation on a custom site developed with PHP, the loading="lazy" HTML5 attribute can be added to image tags:

<img src="resimler/urun.jpg" alt="Product image" loading="lazy">

However, for more advanced control, you can use a JavaScript-supported method. Example:

<img class="lazy" data-src="resimler/urun.jpg" alt="Product image">
<script>
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);
    });
  }
});
</script>

This code ensures that only images that come into the visible area are loaded. It is extremely useful, especially on pages containing grid and flex structures.

Using Lazy Load in WordPress

With WordPress 5.5 and later versions, loading="lazy" is automatically added to images by default. However, the following plugins can be preferred for more control:

a3 Lazy Load
Smush (image optimization + lazy load)
Lazy Load by WP Rocket

Manual support with functions.php example:

function lazyload_images($content) {
  $content = preg_replace('/<img(.*?)src=/i', '<img$1loading="lazy" src=', $content);
  return $content;
}
add_filter('the_content', 'lazyload_images');

With this code, the lazy loading attribute is automatically added to the image tags found in all post content.

Impact on Performance

By using the lazy load technique:

Page loading times are significantly reduced
Bounce rate decreases, SEO scores increase
Google PageSpeed Insights score is positively affected

In addition, in mobile-first designs (See: Mobile First Design) and responsive grid structures, lazy load allows you to use device resources efficiently.

Conclusion

Using lazy load on visually rich sites is one of the essential techniques for both user experience and SEO success. This technique, which is easy to implement and has a high impact on PHP and WordPress-based sites, works much more efficiently in interfaces with grid and flex structures.

You can also check out the following content for more UI/UX and performance tips: