Increase website speed by lazy loading images

Website Speed
Increase your website’s speed by lazy loading background images. Only load images above the fold, and let the rest lazy load.

The problem: Too many images and website is designed responsively

By only loading the top images of your website, you can increase your website’s speed. This is especially true when you have a long page of graphics.

Most image lazy load solutions only work for <img> tags. But what if you want to lazy load images in a responsive designed website? In responsive design we use multiple images for the same graphic. We do this because different graphics are loaded for different screen widths, hence the responsive component.

The solution: Load background images when the user scrolls

Load below-the-fold images when the user scrolls to increase website speed optimization.

Lazy load background images by simply adding a CSS Class to the body tag after the user starts to scroll. That’s it! Now your site is optimized for speed by only loading the images the user sees on load.

Responsive lazy load library

I wrote a simple JavaScript library to handle this. It is called Zoink and you can find it on our github page.

The reason why this is so important is because normal websites load all the images on the site. Absolutely no reason to load images that aren’t seen by the user. I recommend showing the first two main images on your site, and load the rest of your CSS with Zoink.

Case study: Recognize

On Recognize’s homepage, we use a lot of large images. On page load on a desktop browser Recognize loads 400k of images. Most of the bulk is due to the first two images we load.

But when the user scrolls the page we load the reset of the images. A total of 858k of images are loaded. We are saving the user from waiting for all those images to load when they may not ever scroll to them.

Lazy loading background images improves performance on mobile, tablet, and desktop. Stop loading images your users may not ever see.