How To Lazy Load CSS Background Images On WordPress Easily

Some of us may already understand the importance of Lazy Loading for website speed performance. And we have also used this feature on our website.

But maybe some of us are still looking for a solution how to lazy loading the background image to remove the warning from Google Page Speed ​​Insights (PSI).

Are you one of them?

What is lazy-loading

According to this article from Web Dev, lazy-loading is a technique that defers loading of non-critical resources at page load time. 

To understand this, we need to know about the above the fold and below the fold area. Above the fold is the area that appears first on a computer or mobile screen when a website is accessed. On the other hand, below the fold is the area that appears on the computer or mobile screen after the website is rolled.

Non-critical resources are all assets such as images and videos that are in the area below the fold. By doing this technique, we can optimize a website to increase the speed of website performance.

Why we need to lazy load images

The answer is simple. That is to reduce the load time of a web page caused by loading images. Instead of loading all images at once, it is recommended to load only the critical resources. This means only images in the above fold area are loaded on initial load and the rest of the images are deferred using the lazy-loading technique.

That’s why Google uses the Defer Offscreen Images metric as one of the assessments of website speed performance on their creation tools, namely Google PSI and Lighthouse. If there are images detected by this tool that have not been lazy-loaded, a warning will be issued from the tool to defer offscreen images.

So, to fix defer offscreen images warning from Google PSI or Lighthouse, you need to lazy load images of your website.

Note:

‘Offscreen images’ means images that are located below the fold area, not on the screen (above the fold) on initial load.

Types of a background image

Generally, there are 2 types of background images. The first type is the background image in External or Inline style/CSS. The second type is the background image in which the style is inlined in the HTML tags (div/sections). See the picture from WP Speed Matters.

When this article is written, I find most performance plugins like WP Rocket, Flying Press, and Litespeed cache plugin can detect and lazy load background images if they’re in HTML as an inline style.

But if the background image is in external or inline style/CSS as found on a website that uses a page builder plugin or Gutenberg addon, as Gijo says in the article, things will get tricky as we can’t figure out whether an HTML element has a background image or not. 

Free yet powerful WordPress plugin to lazy load – Optimize More! – Images

WordPress core basically already has a native lazy load feature since version 5.5 and the performance is getting better now on version 5.9 when I write this article. Some free or premium plugins to optimize website performance also have a lazy load feature. There is also a dedicated lazy load plugin.

However, not all have the feature to lazy load background images which are called by CSS. So, warnings from Google PSI or Lighthouse still appear. At the time I wrote this article, the Flying Press premium plugin already has this feature.

If you need a free but powerful WordPress plugin that has a feature to lazy load CSS background images, the Optimize More! – Images developed by ThinkWeb.dev can be one of your favorite plugins of choice. This plugin can be combined with other cache & performance plugins.

There are 2 methods to use the lazy load background images feature, that are:

1. Using CSS class helper “lazyload”
2. Using container class name or id

The 1st method is the easiest if the page builder you are using has a field to add a custom class. One of the popular page builders like Elementor or one of the popular Gutenberg addons like Generateblocks has a feature to add Custom Classes.

The second method can be said to be more suitable for advanced WordPress users who are familiar with coding. If you’re used to using the Inspect Elements tool to find the container class name or id, then you can use this method.

Important:

Before applying the method, make sure the Lazy Load CSS BG Images is ENABLED as seen on this image.

Here comes the fun part. Let’s lazy-loading some background images in the popular WordPress page builder and Gutenberg addon.

Let’s get started.

How to lazy load background images on Elementor

In my first demo, I will do lazy load CSS background image using Elementor as one of the popular WordPress page builder.

There are several steps that need to be done to lazy load background images.

1. Analyze which background images need lazy-loading using the Google Page Speed ​​Insights tool
2. Input “lazyload” in the custom class field in a section, column, or widget that uses an image as a background

Here are the results of the Google Page Speed ​​Insights test. You can see there are warnings for Defer Offscreen Images.

In the following case study, there are 3 screenshots of images of the placement of the “lazyload” custom class on a section, a column, and a Video widget.

Here are the results of the Google Page Speed ​​Insights test after lazy loading background images. It is fixed. You can see there are no more warnings for Defer Offscreen Images.

Note:

Sometimes results from Google PSI may change. Based on my experience, the warning to fix defer offscreen images still appears for background images that have not been detected previously.

How to lazy load background images on Generateblocks

In my second demo, I will do lazy load CSS background image using Generateblocks as one of the popular WordPress Gutenberg addon.

What’s great about using Generateblocks is that I rarely find “defer offscreen images” warning from Google PSI for areas that use background images. So, I use GTMetrix to check the waterfall of the images.

Here is the screenshot before activating the Lazy Load CSS BG Images feature on the plugin:

Here is the screenshot where custom CSS “lazyload” is used on the container widget of Generateblocks:

Here is the screenshot after activating the Lazy Load CSS BG Images feature on the plugin:

As you can see on the result, even there is no warning of defer offscreen images on Google PSI when using Generateblocks, if the Lazy Load CSS BG Images feature is used, we can save the loading time even for milliseconds.

Conclusion

So, after reading this article, I believe you have found a simple solution to lazy load CSS background images. And if you do that, it can boost your performance website especially for Core Web Vitals. By the way, if you want to learn more on how to optimize your WordPress website for Core Web Vitals, you can read this article.

If you have some questions or need some helps to optimize your WordPress site, please reach us by filling the form on this contact page. We’re happy to help. Cheers.