WordPress

Lazy Loading and WordPress


Do you want to speed up your WordPress website and take some of the strain off your server resources? Lazy loading on WordPress may be the answer. 

What is Lazy Loading? 

Lazy loading is a strategy used on webpages to defer loading unimportant elements until they’re needed. 

Let’s say you visit a website with lazy loading. When you load the page, everything within your viewport displays normally. However, what you don’t see is that the images down the page haven’t loaded yet. When you do scroll down, the images will quickly load. If you choose not to scroll down, the images won’t load at all. 

This strategy saves you resources if visitors don’t explore your entire page, plus it helps your page load more quickly when they first navigate to it. 

Lazy Loading and WordPress

WordPress has been making advances toward implementing lazy loading into the WordPress core. In the WordPress 5.5 update, the WordPress team introduced default lazy loading images. Then, in WordPress 5.7, which was released in March 2021, they added default lazy loading iFrames. Both of these features use browser-level lazy loading. 

What is browser-level lazy loading? Well, it’s a rather recent development. Some of the previous lazy loading methods included splitting your code into smaller chunks, using Javascript modules, and strategically breaking up your CSS files. It could be complicated and tricky, especially if you weren’t well-versed in code. 

However, with the recent introduction of browser-level lazy loading, the process has become much more straightforward. This is especially true if you’re using WordPress since lazy loading is used by default!

Browse-level lazy loading is built directly into your browser, which means, unlike in the past, lazy loading doesn’t require any external Javascript libraries. All you need to do is use the Loading attribute with your desired element, like in the example below: 

<img src="myimage.png" loading="lazy">

There are three different types of loading values you can choose from. Each will affect how your browser treats the element. 

loading=”auto”Uses the default settings for the browser
loading=”lazy”Uses lazy loading 
loading=”eager”Loads the resource immediately

Using the eager and auto values will load your website resources normally, since most browsers do not have lazy loading set as a default. If you want the element to use lazy loading, you need to set the loading value to lazy. When set to lazy, the element will delay loading until the viewport (the area the visitor is currently viewing on their screen) is within a certain distance from the elements. 

Browser-level lazy loading is supported on many popular browsers, such as Chrome, Edge, Opera, and Firefox. However, not all browsers, especially old versions of browsers, support it. But even if a browser doesn’t support browser-level lazy loading, it’s still safe to use. That’s because, if an element using browser-level lazy loading is loaded on an incompatible browser, the browser will just act like the element doesn’t have lazy loading and load it immediately.

How Do I Turn on Lazy Loading on WordPress?

With WordPress updates 5.5 and 5.7, lazy loading for iFrames and images comes baked right in the WordPress core default. This means you don’t need to do anything to turn lazy loading on. You just need to make sure you’re updated to the most recent version of WordPress. 

Being updated is good security practice anyways, which we talked about in our recent blog post about WordPress security

How Do I Turn Off Lazy Loading or Set Up Customizations? 

Since WordPress built lazy loading into the core of WordPress, it just works. However, you can still turn off lazy loading or set up customizations if desired. The WordPress team outlines ways you can customize and turn off your lazy loading in their announcement posts.

We’re Here if You Need Hosting Help

If you encounter any issues or have questions, we can help! Our support team is available around the clock, every day of the year, so you never have to worry about catching our office hours. Contact us today!