Today, we will learn how to implement SEO-friendly lazy loading of images. We will show an example of SEO friendly lazy loading of images. You can implement lazy loading of images.



What is Lazy Loading?

Lazy loading is an online content optimization technique, be it a website or a web application.

Instead of loading the entire web page and displaying it to the user in one go as in bulk loading, the lazy loading concept helps to load only the required section and delays the rest of the content, until the user needs it.



Example

<!DOCTYPE html>
<html>
    <head>
        <title>SEO Friendly Lazy Loading of Images Example</title>
    </head>
    <body>
        <h1>SEO Friendly Lazy Loading of Images</h1>
        <img class="lazy-image" data-src="Screenshot_2.png" />

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function () {
                var e = [].slice.call(document.querySelectorAll("img.lazy-image"));
                if ("IntersectionObserver" in window) {
                    let n = new IntersectionObserver(function (e, t) {
                        e.forEach(function (e) {
                            if (e.isIntersecting) {
                                let t = e.target;
                                (t.src = t.dataset.src), t.classList.remove("lazy-image"), n.unobserve(t);
                            }
                        });
                    });
                    e.forEach(function (e) {
                        n.observe(e);
                    });
                }
            });
        </script>
    </body>
</html>