How to Disable Lazy Load for Specific Image in WordPress

Updated: September 27, 2022

As you might know, by default WordPress loads all images with the lazy load feature enabled (loading="lazy" attribute). Added to the core of WordPress since WordPress 5.5, the lazy load feature helps you improve your WordPress website’s performance by deferring the loading of each picture until your browser viewport reaches the section of the page with that picture.

With the image which is one of the website elements with a big size deferred, the lazy load feature will make your initial page load quite a bit faster. However, when the image is on the above fold, you may want to disable the lazy load on that image as it can delay the Largest Contentful Paint(LCP) and may result in a blank screen when the page is loaded and harm your SEO if the LCP score is too high. The Largest Contentful Paint is one of the three Core Web Vital that represents explicitly how quickly the biggest content is rendered within the viewport.

The above fold is most likely the first viewport the users will see on your site. So, for the above reason, you may want to disable the lazy load on the first large image of your website. In this tutorial, we will show you how to disable the lazy load feature for a specific image in WordPress.

Disable Lazy Load for Specific Image in WordPress with Plugin

To disable lazy load for a specific image, we use the LiteSpeed Cache plugin by LiteSpeed Technologies. With more than 3 Million active installs on wordpress.org, the LiteSpeed Cache plugin is one of the most popular caching plugins at the time of writing. The plugin helps to cache your pages from server-level with Lite Speed Web Server. There are also a lot more features besides caching to improve your website loading speed and help you to get better ranks. And Lazy Load Image Exclude feature is one of the plugin features we can use to disable the lazy load for a specific image on your website.

To disable lazy load for a specific image on your website, first, you need to install and activate the plugin. Once installed, navigate to a new menu the LiteSpeed Chace menu from your WordPress admin dashboard, then head to Page Optimization Media Settings and toggle on the Lazy Load Images setting.

Once enabled, the Lazy Load Images setting will automatically disable the WordPress core Lazy Load (the loading="lazy" attribute) feature and activate the plugin Lazy Load feature (adding data-lazyloaded="1" attribute). Save the setting by clicking on the Save Changes button.

The next step is to copy the URL of the image you want to exclude from the lazy load feature. You can do so by going to the Media Library from your WordPress dashboard and then clicking on the Copy URL to clipboard link from the image section. Or you can just right-click on the image and copy the image address to get the URL.

Once you have the link, continue with the plugin setting by heading to the Media Excludes tab and placing the URL you’ve copied in Lazy Load Image Excludes. As WordPress creates 3 more copy images with different resolutions when you upload an image, you may want to delete the extension of the image from the URL if you want to exclude all of the image copies from the lazy load feature or if you’re not sure which image copy is being lazy loaded. Save the setting by clicking on the Save Changes button and it will automatically remove the domain from the image URL.

Now, your image will not be lazy loaded anymore and it lost its data-lazyloaded="1" attribute.

The Bottom Line

The lazy load feature will make your initial page load quite a bit faster. However, when the image is on the above fold, you may want to disable the lazy load on that image as it can delay the Largest Contentful Paint (LCP) and may result in a blank screen when the page is loaded and harm your SEO. This tutorial shows you how to disable the lazy load feature for a specific image in WordPress.

Even without lazy loading, images are not initially loaded with the highest priority by browsers as they are not render-blocking resources. If you want to disable the lazy load feature completely, you can read our previous article about how to disable lazy load on WordPress.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.