How to make website loads faster

Best Webdesign - website loads faster - website load

one of the Best Webdesign is making website loads faster

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: CSS Trunk Text

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: CSS Trunk Text

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 =;
          image.src = image.dataset.src;

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

      lazyloadThrottleTimeout = setTimeout(function() {
        var scrollTop = window.pageYOffset;
        lazyloadImages.forEach(function(img) {
            if(img.offsetTop < (window.innerHeight + scrollTop)) {
              img.src = img.dataset.src;
        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:



Related Article

Web Design Services - Best Webdesign - Best SEO Services

Making an input type for checking valid email address in HTML

As a web design services, we often use input type="text" and input type="password" like below: For text: <input type="text" name="username" size="25" maxsize="15"> For password: <input type="password" name="password"> The syntax above ...

Restricted input type for number only by using HTML5

How to make the input type to be valid for number only? We do not need to use javascript, because we can do that easily with HTML5. Let say we want to make an input type for temperature with the following rule: minimum 30o and maximum 50o, but allow ...

Checking Password Strength with pStrength jQuery Plugin

When we make a web design, we often make registration form for the visitor. One of the field is password. One thing we need is password strength to ensure the better security for login access.. To fulfill that we can use pStrength jQuery Plugin.We j ...


Responsive web is special program code, so the website can be read in all devices. It is very suitable for better page rank in search engine like google

graphic design in indonesia

Website Design in Indonesia

Graphic Design in Indonesia


+628113638531 / +628113865464

Webdesigner in Indonesia

Videographer in Bali


Tatamedia Solusindo Surabaya

Dekkophotography Bali

Fine Art Photography in Bali

Web Design


Send your request to