There are numerous ways to enhance the performance of your WordPress website. Images and other media assets are some of the most common causes of slow loading times. That means that adding any image optimization approach, including lazy loading, can have a considerable influence on site performance.
Although we already covered how you can implement lazy loading for images, this post will explain the topic furthermore from a different angle. Then we'll go through some of the most popular methods for adding delayed loading in WordPress for various types of items. Finally, we'll go over some of the most typical technical concerns that this option might bring.
Let's get started!
What is Lazy Loading?
When you browse a website, all of its elements attempt to load at the same time. Everything on the page will be seen in full in your browser. If the page contains a large number of media assets, such as images, they can significantly slow down loading times.
Create Amazing Websites
With the best free page builder Elementor
Start Now
There are numerous methods for reducing the impact of photos on website loading times. Image optimization, browser caching, the use of a Content Delivery Network (CDN), and the usage of lower file types are all options. You should ideally go the extra mile and apply as many of those optimizations as feasible because there is no such thing as an overly fast website.
Lazy loading has no effect on image file sizes or the amount of time it takes to load for each user. This setting, on the other hand, can delay loading each image until your browser viewpoint reaches the area of the page containing that file.
Benefits of Lazy Loading in WordPress
Initial loading times can be reduced by delaying loading. This is critical given that 40% of people will exit a website if it takes more than three seconds to load. As a result, this option can encourage people to stay on your site and explore your material.
In addition, delayed loading can lessen the pressure on memory and storage. As a result, using it may allow you to choose a more inexpensive website hosting package.
It's worth noting that, as of WordPress 5.5, the CMS has default options for lazy loading pictures. There is significant debate, however, concerning whether the default strategy can damage Core Web Vitals scores.
On paper, delayed loading improves loading times by default. However, it can have a negative impact on Largest Contentful Paint (LCP) scores.
The length of time it takes for the largest image or text block on any page to load is measured by LCP:
For photos on your website, WordPress employs the HTML loading=lazy property. In general, this is the simplest technique to implement deferred loading. That attribute, however, is not supported by all browsers.
If you wish to deactivate deferred loading for individual images, you must manually change the attribute using HTML. The other option is to use a WordPress plugin that accomplishes delayed loading in a different way.
Lazy Loading On Other Elements
Technically, nearly any component on a website can have its loading delayed. Delayed loading works incredibly well with photos and is also a fantastic feature for video files.
In addition to media files, you can postpone the loading by code such as JavaScript and CSS. In fact, we propose postponing scripts that may prevent your website from rendering in order to boost your First Contentful Paint (FCP) scores.
Following that, you can choose to lazy load text assets. However, from the aspect of usability, this is not a good approach. Furthermore, even displaying a whole book's worth of material on a page should not have a substantial influence on loading times.
Deferred loading is ideal for hefty media assets that have a large influence on loading times. The WordPress core, on the other hand, only supports slow loading for pictures. If you wish to apply that approach to additional elements, you'll need to find a different way to do so. This is where plugins come into play.
Add Lazy Loading in WordPress
You can use the a3 plugin for excluding specific images and pages from slow loading. Furthermore, it offers delayed streaming for videos on your website.
Lazy loading of external photos and videos is also supported by this plugin. That is not something the WordPress core mechanism does.
From your WordPress admin area, install and activate the plugin. You can now change the tool's properties.
Adjust the Plugin Settings
Then, go to Settings > a3 Lazy Load. If you look under Lazy Load Activation, you'll see that the plugin is enabled by default after installation.
Navigate to the Lazy Load Images tab. You can choose which images to delay on your website and set a fallback for browsers that do not support JavaScript. You can also specify a CSS class for photos that you don't wish to load later.
Every option is enabled by default, which we recommend leaving alone. Create a CSS class that will allow you to skip deferred loading for specific images.
Then click the Lazy Load Videos and Iframes tab. Like pictures, it also allows you to set delayed loading for certain clips.
The plugin enables videos in contents and widget, and it includes a workaround for browsers that block JavaScript:
You can define a CSS class that removes specific videos from delayed loading in the video settings. You may use the identical class you picked in the pictures section for an easier setting.
Finally, in the Exclude by URLs and Page Categories tab, you can stop delayed loading for specific types of pages. You can specify which sites or content categories should not use lazy loading here.
Save your adjustments to the plugin's settings, and you're done. To deactivate delayed loading for a specific element, enter the editor and choose the image or video block to adjust.
To discover the Additional CSS box, open the block settings menu and go to the Advanced tab.
That field can be used to add the lazy-loading exclusion class that you created while configuring the plugin. If you do this, when a user visits your site, the image will load instantly.
Lazy Loading Troubleshooting
Although delayed loading is a useful and essential feature of WordPress, it also can cause a variety of issues on your website. This section will go over what those problems are and how to solve them.
Image Above the Fold Issues
In general, we advise against lazy loading graphics above the fold. When we say "above the fold," we're speaking about the initial viewport that your users see when they visit your website.
Delaying photos over the fold can have an effect on your FCP score. It might also have an impact on users' first thoughts of your website.
The straightforward answer is to stop delayed loading for images in page headers and other top components. If we take this page as an example, we would advise deactivating lazy loading for the logo and the header background.
To disable WordPress's default implementation of slow loading, you must add code to your website. The simplest approach to disable delayed loading for individual media assets is to utilize a plugin like a3 Lazy Load, which we discussed in the last section.
Layout Shifting For Lazy Loading
When you load a page, components move around as they become visible, causing layout shifting. The Cumulative Layout Shift (CLS) is a Standard Web Vital that quantifies layout shift. Poor execution of lazy loading can have an impact on your website's CLS ratings in several instances.
Items on a page do not all load at the same time. Instead, they pass through one by one, even if the procedure appears to be near-instantaneous on a browser. When image files load after other elements, they have the ability to move those assets around.
To circumvent this issue, avoid utilizing full-size photos in WordPress. When you upload images to WordPress, the CMS will resize them to standardized resolutions for you.
Even with deferred loading, using standard resolutions decreases the possibility of severe layout modifications. You can also manually define image dimensions for each file. That, however, is a time-consuming operation. In brief, we only recommend it for photos that need to be displayed in a specific size.
Lazy Loading and Caching Plugins Problems
Caching plugins frequently overlap with lazy loading tools. Some cache plugins, such as WP Rocket, have delayed loading capabilities built-in. Using that feature in conjunction with a deferred loading plugin, such as a3 Lazy Load, will frequently result in problems.
To avoid issues with pictures not showing up due to competing tools, we suggest staying with one family of plugins. If you have both the lazy loading and caching plugins activated and have difficulties, we recommend removing the former first.
Try to see if your images are loading properly after removing the lazy loading plugin. If this is the case, your caching solution most likely includes delay loading functionality. That means you won't need to install any additional software to take advantage of that feature.
Ending Thoughts
Although lazy loading is a key feature of WordPress, there are ways to optimize its application. To have additional control over delayed loading on your site, you can utilize plugins such as a3 Lazy Load. You may also configure and disable delayed loading for external elements with the right plugin.
Depending on how you handle lazy loading, it should significantly reduce page loading times. The more media-heavy your website is, the higher the results you'll receive — all while maintaining a positive user experience.
