How can I optimize page load speed using lazy loading for images?

<!-- BEGIN COPY / PASTE -->
    <img src="placeholder.jpg" data-src="actual-image.jpg" alt="Description" loading="lazy" class="lazyload">
    <script>
      document.addEventListener("DOMContentLoaded", function() {
        const lazyImages = document.querySelectorAll("img.lazyload");
        const imageObserver = new IntersectionObserver((entries, observer) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              const img = entry.target;
              img.src = img.dataset.src;
              img.classList.remove("lazyload");
              observer.unobserve(img);
            }
          });
        });

        lazyImages.forEach(image => {
          imageObserver.observe(image);
        });
      });
    </script>
    <!-- END COPY / PASTE -->