How to make website loads faster

As the Best Webdesign, we often face website loads slowly, because it has to wait for long time to download whole contents such as CSS, Javascript, and images. This content must be downloaded first before the browser shows the content.

Now, we will earn how to tell the browser to not download whole images on the website directly. The technique is called lazy load.
By using this technique, the images are not downloaded directly when we open the website. The image will be downloaded when we scroll to the point where the images exist.

Read: The usage of Bootstrap-DateTimePicker for Date Range

Read: Checking Password Strength with pStrength jQuery Plugin

Generally, we use the below HTML code to call the image:

<img src="images/blabla.jpg">

By using this code, browser will download the image when we open the website. The more images are, the longer we need to see the content of the website.

Using lazy load we modify the code with the one below:

<img data-src="images/blabla.jpg" class="lazy">

With this code, browser will not download the image directly when we open the website, so automatically browser just download CSS, Javascript, and HTML code.

How to show the image on scrolling?
We need to use Javascript code to do that.

Read: The usage of Bootstrap-DateTimePicker for Date Range

Javascript Code:

document.addEventListener("DOMContentLoaded", function() {
  var lazyloadImages;    

  if ("IntersectionObserver" in window) {
    lazyloadImages = document.querySelectorAll(".lazy");
    var imageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove("lazy");
          imageObserver.unobserve(image);
        }
      });
    });

    lazyloadImages.forEach(function(image) {
      imageObserver.observe(image);
    });
  } else {  
    var lazyloadThrottleTimeout;
    lazyloadImages = document.querySelectorAll(".lazy");
    
    function lazyload () {
      if(lazyloadThrottleTimeout) {
        clearTimeout(lazyloadThrottleTimeout);
      }    

      lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
              img.classList.remove('lazy');
            }
        });
        if(lazyloadImages.length == 0) { 
          document.removeEventListener("scroll", lazyload);
          window.removeEventListener("resize", lazyload);
          window.removeEventListener("orientationChange", lazyload);
        }
      }, 20);
    }

    document.addEventListener("scroll", lazyload);
    window.addEventListener("resize", lazyload);
    window.addEventListener("orientationChange", lazyload);
  }
})

You can see the demo of one Best Webdesign:

DEMO

source: css-tricks.com