Lazy Loading – Don’t load images unless needed

A faster website, save bandwidth, by loading images as needed.

 

Lazy Loading is a process of loading imaged only IF and as needed. Without Lazy Loading, there are three downsides.

  1. Each webpage will load fully even if not needed, maximizing needlessly bandwith usage.
  2. This is especially rough on slow connections, and a very important consideration on mobile. Data is usually limited on mobile phones, and loading only as needed can help save a tremendous amount.
  3. BLANK pages while waiting. It can be possible that while waiting for a webpage to finish downloading all the images, the webpage doesn’t display/load for the end user. Again, this is the most important for slow or cellular connections.

A primary benefit of lazy loading is that the page appears to load almost instantly. And if more images are needed, they will load as you scroll down.

I’ve created THIS page as an example, with 24 medium sized images. As you start to scroll down this page (do it slowly), you will see each image. Do this for a few images, then scroll immediately to the bottom of the page. You will see that the images haven’t quite loaded yet, but they will.

So, go ahead and test. When you are finished, continue reading.

Lazy Loading is a plugin I use for all my website builds. It costs nothing, has amazing upsides, and as of yet, I’ve not discovered any downsides.

Agouti

 

Anteater

 

Baby Giraffe

 

Bald Eagle

 

Bear

 

Bison

 

Black Bears

 

Brown Bear

 

Elephant

 

Fennec Fox

 

Gray Wolf

 

Lions

 

Meerkat

 

Meerkats

 

North American River Otter

 

 

Panda

 

Pygmy Hippo

 

Reindeer Fawn

 

Sea Lion

 

Tasmanian Devil

 

Tuatara

 

Turtle

 

Zebra

 

Zebra

 

Dinosaur

Leave a Comment