On this page
Collection of pictures in frame

Lazy loading CSS background images for better website loading performance

Find out how to lazy load CSS background images to improve your website loading performance.

Every single HTTP request decreases loading performance. For a simple image, the attribute loading="lazy" can be used in order to defer the loading of off-screen images until the image appears on the screen. Lazy loading of images improves performance by reducing initial page load time, initial page weight, initial page rendering, and system resource usage.

  1. Initial page load time – with lazy loading, the page is loaded faster because only images that are visible on the screen are loaded.
  2. Initial page weight – because images that aren’t visible won’t be downloaded. Hence, the whole page weight will be smaller.
  3. Initial page rendering – less images to render, the faster the whole page will be rendered for the user.
  4. System resource usage – this refers to less resource usage like CPU, network, etc.

Can you lazy load background images?

As of now, browser-level background images can’t be lazy loaded, but with some small JavaScript support using Intersection Observer API, it is possible.

Set the goals for lazy loading CSS background

We want to support single and multiple images (through the image-set attribute) and load the background image in two possible ways. Let’s explore an example for a single image:

  1. Load the image as a background on a given HTML element
    <div style="background-image: url('example.webp');">Some example text</div>
  2. Load the image as a background directly in the CSS
    background-image: url('example.webp');

Unfortunately, the background image will be loaded regardless of being on-screen or off-screen. With exception when element <div> has defined display: none;.

What we need is to stop loading the background image until it’s visible on the screen. Here we can use Intersection Observer API. What is it?

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.

The solution

The solution should be fully automated. We want to just set the attribute data-background-image="URL to the image here" on the HTML element or directly in the CSS.

Let’s then set up our goals:

  1. Set the background through data-background-image="URL to the image here" or directly in the CSS.

    Using attribute data-background-image
    <div data-background-image="example.webp">Some example text</div>
    Set background directly in the CSS
    --background-image-lazy: example.webp;
    background-image: var(--background-image-lazy);
  2. Initialize automatically lazy loading background when the page is ready based on DOMContentLoaded event. At this point, the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, or subframes to finish loading.
  3. When the Intersection Observer API is not supported then simply load all background images. Note that polyfill for Intersection Observer is available for the browser that doesn’t support it, but for our simplification here we’ll skip this part and just allow the browser to load all background images.

Workable example

Here is a workable example of lazy loading CSS background images

The previous example is available on Sitelint Codepen Developer Workspace.

Download package

The package @sitelintcode/css-lazy-loading-background is available in the npm repository.

Discussions

Improved lazy loading for images, video, and audio

This can be further improved by avoiding loading images, videos, and audio that are less than 1 second long on the user’s screen. For example, during fast scrolling. Read more about improved lazy loading for images, videos, and audio.

How to set lazy loading images on other libraries

  1. SplideJS – to enable lazy loading images for SplideJS replace <img src="[path to the image]" alt=""> with <img data-splide-lazy="path to the image" alt="">.

Related posts

Comments

Leave a Reply

Real-user monitoring for Accessibility, Performance, Security, SEO & Errors (SiteLint)