defer offscreen images in WordPress

How To Defer Offscreen Images In WordPress

March 9, 2022

If you’re looking to improve the performance of your WordPress site, you’ve probably tested it with Google PageSpeed Insights. You may have come across the warning “defer offscreen images.” In this article, we’ll explain how you can fix "defer offscreen images" by lazy loading your images.


Table of Contents


What does “defer offscreen images” mean?

In Google PageSpeed Insights, the “defer offscreen images” warning means you should only initially load images visible above the fold, and load below the fold images later when they’re needed. This speeds up the initial rendering of the page, since the browser won’t have to download every image right away. This technique is known as lazy loading.

Why is deferring offscreen images important?

For the fastest load times, you should only load critical resources initially, that is, ones that are essential to rendering the above the fold section of the page. Offscreen or hidden images by default, are part of the initial load, but those aren't critical resources, so we can delay the loading until they're needed.

Page speed is not only an important factor in SEO, but also if you're running paid traffic to your site. Users don't like to wait around, and the faster your site, the more people will end up actually interacting with your content. By lazy loading offscreen images, you can make your page load speed much faster.

What is lazy loading?

Lazy loading is when you defer the loading of resources until after the page is finished loading. In the case of lazy loading images, they are usually set to load as the user scrolls down the page. This is most commonly done with JavaScript, using a library that listens for scroll events and uses the intersection observer API. Now the HTML standard includes support for lazy loading images, and soon most users will be on a browser that supports it natively.

Defer offscreen images with a plugin

In WordPress, you can easily enable lazy loading images on all of your pages with a plugin. Using a lazy load plugin is generally the best and easiest way, since it doesn’t require editing code, and these plugins aren’t going to weigh your site down and make it slower.

There are a few popular options for WordPress lazy loading. You can easily fix the "defer offscreen images" warning with any of these in just a few clicks. Just search for them on the WordPress plugin repository, and enable lazy loading in the plugin settings. If you're looking for more free WordPress plugins that will speed up your site, check out our previous article.

Autoptimize

Autoptimize is a very popular speed optimization plugin for WordPress. Best of all, this plugin is totally free. Its main feature is minifying and combining JavaScript and CSS files, but it also can enable lazy loading.

The lazy loading function of this plugin inserts the lazysizes.js JavaScript library into your pages,  and rewrites all of your image tags so they lazy load. It includes <noscript></noscript> fallbacks for browsers with JavaScript disabled, and inserts SVG placeholders until each image loads. The placeholder prevents large layout shifts and bad CLS scores

On Fastify.com, we’re using Autoptimize to lazy load images. We use this plugin to combine and minify our JS and CSS, so enabling lazy loading through the same plugin is a good choice. If you're using another plugin for concatenation and magnification, like Asset Cleanup, then you may want to consider the next option, Lazy Loader.

Lazy Loader

If you're looking for a simple plugin that only handles lazy loading, then Lazy Loader is a great choice. Not only can it handle lazy loading images, but it can lazy load background images, iframes, videos, and audio. All the images on your page will be lazy loaded by default, but you can exclude specific images by specifying CSS classes.

Using this plugin, images are lazy loaded with lazysizes.js. It includes more configuration options that the other plugins listed here, so if you're looking to fine tune your lazy loading settings, this plugin may be the best choice.

WP Rocket

WP Rocket is a popular caching plugin for WordPress. It also has an image lazy loading feature. This is a paid plugin, so if you have some other caching plugin you’re happy with, like WP Super Cache, then it’s not recommended to purchase this plugin just for the lazy loading. However, if you use WP Rocket alraedy, this is a great option.

LiteSpeed Cache

LiteSpeed Cache is a free cache plugin with many other optimization features. Although you need to running the either OpenLiteSpeed or LiteSpeed as your server software to get the most from this plugin, it also works with other servers like Apache and Nginx. LightSpeed Cache has an option for lazy loading, so you can defer offscreen images in just a couple of clicks.

Smush Pro

Smush is a WordPress plugin that resizes and optimizes images automatically. This plugin can also enable image lazy loading. While plugins like Smush aren’t necessary if you manually optimize images before uploading them, if you do use Smush, then this is a great option. With the flick of a switch, you can enable lazy loading for all images on your site.

Defer offscreen images without plugins

It’s possible to lazy load images without plugins, however, these methods will require manually editing your theme code. If you’re using a page builder tool, then these methods may not be possible without making major edits to the plugin.

Generally, it’s best to just use a plugin to enable lazy loading. There's no real downside, and it's a lot less work. If you’re feeling determined and have the technical chops, then here’s how you can do it without plugins. You may also want to know this, just to understand what lazy load plugins are actually doing to your site.

Lazy Load Images With JavaScript

For the best browser support, you’ll still need to use JavaScript to lazy load images. If you want to lazy load images on old browsers like Internet Explorer, you'll need to do so with JavaScript. You can use the popular lazysizes.js library to do this. Once you’ve loaded the library, you can rewrite your image tags.

Many lazy loading plugins use this JavaScript library, like Autoptimize and Lazy Loader. They simply insert the library into your pages with a script tag, and rewrite your image tags to look like this example code. Just replace the src attribute with the data-src attribute, and add the lazyload CSS class for your image tags.

<img data-src=“/path/to/image.jpg” class=“lazyload”>

Lazy Loading Images With HTML

As a newer part of the HTML standard, you can natively enable lazy loading just by setting the “loading” attribute on your images to “lazy.” This will lazy load images in the same way that lazysizes.js does, waiting until the users scrolls near them to load the file.

Although this will make the warning go away in PageSpeed Insights, keep in mind that this won’t actually work on older browser versions. Native lazy loading is supported by the latest versions of major browsers, but until most users upgrade, you won't get the best coverage this way.

<img src=“/path/to/image.jpg” loading=“lazy”>

Is lazy loading good for SEO?

You may be concerned that with lazy loading, Google may be unable to fully crawl your page. However, Google’s crawler is able to execute JavaScript, and Google encourages lazy loading, so this isn’t a problem. Additionally, the lazysizes.js library automatically loads of your images for user agents that can't scroll, like Googlebot. With native HTML lazy loading, the image tags are standard and crawlers will have no issue understanding them.

If you use lazy loading, you’ll be speeding up your site, which benefits your SEO. With Google’e Core Web Vitals, page speed is a direct ranking factor. Speed also indirectly  impacts your SEO, since faster sites have lower bounce rates, and bounce rate is another ranking factor.

Lazy loading is good for SEO, since it speeds your site up, and anything you can do to speed your site will help with SEO. If you've enabled lazy loading, not only should you see the warning disappear from PageSpeed Insights, but the Core Web Vitals will improve as well.

Ready to become a WordPress page speed master?

At Fastify, we’ve worked for years to find all the tricks to achieving perfect page speed. If you’re looking to get the best performance out of your WordPress site, then check out all of the other free resources on our blog. We also offer a step-by-step video walkthrough course that shows exactly how to set up your site for the best performance possible.


Written By 
Mason Wiley
My name is Mason, and I cofounded Fastify after years of experience with SEO and affiliate marketing in a highly competitive industry. I've worked through countless pages of documentation and ran countless experiments to find all the hidden secrets to making screaming fast pages.
menucross-circle