How to Defer Offscreen Images in WordPress With Lazy Loading
One of Google PageSpeed Insights performance suggestions is to defer offscreen images in WordPress with lazy loading.
Lazy loading images in WordPress lowers the initial load time and page payload, without sacrificing content. Lazy loading improves your visitor’s experience, by serving only what your visitors need when they need it. It’s way more efficient than the load-all-the-images-just-in-case approach that results in a slow loading image traffic jam.
In this post, I’m going to show you how lazy loading can improve page performance and how it works. Then we’ll look at how to lazy load your images in WordPress.
What is Lazy Loading?
Lazy loading is a technique for improving initial page speed and payload by deferring the loading of non-critical assets that are “below-the-fold” or in other words, everything that is not currently in the browser viewport. To defer offscreen images in WordPress basically means to wait to load the images we can’t see yet.
Notice I said assets and not images because a lot of things on your webpage can be lazy loaded, so long as they’re not needed to serve up the site layout and the top of the webpage that your visitor first sees.
Images are an ideal use case for lazy loading because they’re so resource intensive. Videos, scripts, and comments are also ideal candidates because they tend to add a lot of weight to a webpage.
With lazy loading, an asset doesn’t load until the moment is needed, but if the user never reaches it, then it is never loaded at all.
Why is Lazy Loading Better Than Regular Loading?
Lazy loading your images in WordPress improves site performance, SEO and your visitor’s experience.
Lazy loading serves up a much lighter initial webpage and adds elements as needed. With lazy loading, the browser will first build the DOM so your user can begin interacting with your site, even when the full page isn’t finished loading.
Lazy loading doesn’t actually make your image files or your webpage file size smaller. If you have a 3MB page size, that’s how big your page will be with or without lazy loading. This isn’t like compressing images. But lazy loading will greatly improve how your user perceives your site. It feels faster and that may just be enough to keep them on the page.
Google also uses pages peed as a ranking factor and recommends lazy loading images in order to improve performance. We also know that Google rewards faster sites with higher rankings, so lazy loading your images is a way to indirectly improve your image SEO.
I created a page with several huge images. I ran an audit of my test site on Google PageSpeed Insights and my score increased from 89 to 91 just by adding lazy loading using Smush Pro (yup, Smush now has lazy loading). That may not seem like a lot, but that is the difference between average (50-89) and fast (90-100) my friends.
Lazy loading also uses less data. Your visitors who are using a slow mobile connection will thank you. Lazy loading cuts down the resources used when a visitor doesn’t load all your images because they stopped browsing and moved on to the next page.
How Does Lazy Loading Work?
Here’s how you would defer offscreen images in WordPress without a plugin.
First off, you need to determine what images you want to lazy load. You should lazy load any images that are not visible in the viewport and do not contribute to the structure of your page. For example, logo images in the header or hero images above your body text should not be lazy loaded. To provide the best user experience, you should also load images that are within about 500px of the viewport, so they have time to load before the visitor gets to them.
Prevent Images from Loading the Normal Way
When you utilize lazy loading, you need to prevent images from loading the regular way on your site. One way to do this for images utilizing the
<img> tag is by removing the image URL from the
src attribute and moving it to another attribute, such as
data-src, to be stored there temporarily.
Determine How the Browser will Detect Images in the Viewport
If browser compatibility is crucial, then using the
getBoundingClientRect. It can also cause a slight delay when rendering images. You can see an example here.
The Intersection Observer API
The Intersection Observer API is the modern and most efficient way for compatible browsers to figure out when an image has crossed into the viewport. It’s also faster than using event handlers. You’ll write way less code because you can skip the part where you have to come up with an image visibility detection method and just register an observer to watch the elements and determine what the browser should do when the image is visible.
Move the Image URL to the src Attribute
Once the browser detects that the image is “on stage” or close to it, then it’s time to pull the image URL into the
How to Lazy Load Images in WordPress
- react-lazyload – A React lazy loading library, doesn’t use Intersection Observer
- lozad.js – Only uses Intersection Observer, super lightweight
- blazy – Also super lightweight, but doesn’t use Intersection Observer
- yall.js – Uses Intersection Observer and falls back to event handlers
- lazysizes – Can lazy load video and iframes also
You can also use a jQuery plugin for the job since jQuery is included in WordPress core.
Option 3: Use a Lazy Load Plugin
But by far the easiest way to get started with lazy loading is to use a WordPress plugin.
To activate lazy loading with Smush, we’ve made the process super duper simple. All you need to do is go to the Lazy Loading section in Smush Pro and push the Activate button.
That’s it. If you want more control over what images are lazy loaded, you’ll have additional options available once you activate lazy loading. When you activate lazy loading in Smush Pro you’ll also lazy load your images for mobile users.
Things to Watch Out for When Lazy Loading Images
- While lazy loading may not add extra weight that slows down your site, it can interfere with the search engine’s ability to crawl your site if not done correctly.
- When trying to keep images above the fold, the fold varies by device, so keep this in mind when you’re trying to decide what images to defer.
- Use a placeholder image instead of leaving the
srcattribute blank. And specify a height and width for your image so your content doesn’t shift as your images load.
Deferring offscreen images and other assets is a great and easy way to improve your site performance. This technique will work for all the images in an
<img> tag on your site, from images on your home page to the images in your posts and pages. If you want to lazy load background images in CSS, you’ll use a similar technique, but you’ll use CSS identifiers to target the images. Here’s an example of how to lazy load background images.
The easiest way to get started with lazy loading is with Smush free or Smush Pro. Smush Pro adds other features that can help you with other Google PageSpeed Insights opportunities. It can help you serve images in next-gen formats by converting your images to WebP files and properly size images by scaling your images with the Smush Pro CDN. Smush Pro is even compatible with the popular WP Retina 2x plugin, so you can lazy load those huge Retina images without slowing down WordPress.
Try Smush Pro free for 7 days and see how much of a difference it can make for your site.