How to Disable Lazy Loading for Featured Images in WordPress

Why Disable Lazy Loading?

You might be wondering why you would want to disable such a great feature that comes pre-made with WordPress. The reason is that native lazy loading has some minor issues, such as delaying the loading of the first images displayed.

Especially, featured images should not be lazy loaded like the rest of the images, as this will affect the loading speed of the web page and result in a slow display of the first content. As you know, the first content should be displayed or even preloaded for a better user experience.

What is Lazy Loading?

Lazy loading images in blog posts or websites is a page speed improvement technique that has been used by many for years. To enable lazy loading, users have used JavaScript and various plugins for WordPress that enable the magic.

Recently, after the WordPress 5.5 update, WordPress enabled the native web solution that relies solely on the presence of a new ‘loading’ attribute on img tags and provides a standardized user experience without content shifting.

After this update, WordPress users do not have to install an extra plugin or additional JavaScript for lazy loading images in post content.

Drawbacks of Lazy Loading

This type of lazy loading has a few drawbacks as well as advantages. The native lazy loading may conflict with other lazy loading plugins installed.

To solve this, you just need to uninstall those plugins, because you already have lazy loading enabled natively after WP 5.5.

But the real problem is not that. It is the lazy loading of featured images. Usually, you can disable the native lazy loading by adding a few lines of code recommended by WordPress developers.

But still, the code does not work for featured images or only for featured images.

There are SEO and Core Web Vitals issues in lazy loading the images on the first paint, which means the featured image.

Your Google page speed score and user experience will also be affected by this problem, and this will lead to lower page speed, lower Google search ranking, and poor performance on the largest contentful paint (LCP) metric.

Core Web Vitals have become an important factor for ranking and user experience, and if the LCP is above 2.5 seconds, you have failed to achieve good web vitals stats.

Lazy loading is overall good for your website and blog, but if lazy loading is applied to above-the-fold content (like the LCP image), the browser may prioritize other resources over the LCP image.

As the LCP image is not downloaded immediately, it may delay your LCP and make your page appear incomplete to the user for a longer period of time.

Solution [Without Plugin]

Some users complained that using the WordPress recommended option to disable lazy loading for featured images does not work. There is a workaround.

We can get things done by a simple code change that implements the ‘eager’ attribute to the ‘loading’ tag instead of removing the whole code. [Only for featured images]

Here is the code to disable lazy loading only for featured images:

function disable_lazy_load_featured_images($attr, $attachment = null) {
	$attr['loading'] = 'eager';
	return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'disable_lazy_load_featured_images');

Just paste this code onto your ‘functions.php’ file of your theme. And get rid of this problem.

If you are not using a child theme, I recommend installing the DLLFI Plugin, which can disable the lazy loading for featured images without altering the ‘functions.php’ file.

DLLFI [WordPress Plugin]

This plugin helps to disable the lazy loading feature for featured images.

Download Plugin

How to Use This Plugin

This plugin allows you to disable the new WP Lazy Loading feature (added in WP version 5.5) for Featured Images. If you want to re-enable lazy loading for Featured Images at any time, you can simply deactivate the plugin.

Benefits of This Plugin

* It is lightweight – it only adds one line of code to your site.
* It fixes the core web vitals issue of lazy loading the first image (Featured Image), which can hurt your site’s SEO and user experience.
* It disables lazy loading only for featured images, so you can still enjoy the benefits of lazy loading for other images on your site.

Why Do You Need This Plugin?

This plugin is useful because it gives you more control over how your site loads images. Lazy loading is a good technique to improve your site’s performance, but it can also cause problems if it is applied to the wrong images.

For example, if your site uses a Featured Image as the largest contentful paint (LCP) element, you do not want to lazy load it. Lazy loading the LCP element can delay its appearance on the screen, making your site look incomplete and slow to the user.

By using this plugin, you can prevent this issue and ensure that your Featured Image is loaded eagerly, while other images are loaded lazily. This way, you can optimize your site’s speed and user experience.

If you like this plugin, you might also want to check out my ‘WordPress Pro’ plugin, which addresses many other core problems and performance issues on WordPress sites. You can find more information about it on my website.