Do you want to remove the Lazy Loading on featured image of your WordPress blog posts? You’re in the right place.
In this tutorial, I will guide you step-by-step on how to remove/disable the Loading=”lazy” attribute on featured/hero image of blog posts in WordPress using a simple free plugin called Custom Image Attributes.
The Custom Image Attributes is a lightweight simple WordPress plugin that removes/disables Loading=”lazy” on featured image of blog posts and also provides you an additional feature that allows you to add other custom Image attributes such as fetchpriority=”high”.
Following topics will be covered in this post:
- What is Lazy Loading?
- Why it is Important to Disable Lazy Loading on Featured Image
- How to Install Custom Image Attribute Plugin
- How to Remove Loading=”Lazy” on Featured (LCP) Image
- How to Add Fetch=”Priority” on Featured Image
01. What is Lazy Loading
A Lazy Loading is an advanced feature that tells browsers to defer the loading of images until page visitor scrolls near them. It improves the performance (loading speed) of a page and saves the resources such as bandwidth.
You can see in this video that images are being loaded only as I scroll/reach near them.
When Lazy loading is enabled you can see the image attribute Loading=”lazy” on the Image tag <img> also known as Image Embed Element, in the Page Source, as shown below.
02. Why it is Important to Disable Lazy Loading on Featured (LCP) Image
When Lazy Loading improves the loading speed of a page then why it is important to disable the Lazy Loading on Featured/LCP image or above-the-fold content?
The answer is, it can have a very bad effect on your page’s LCP (Largest Contentful Paint) timing because when an image in the viewport is lazily loaded the browser may defer it, that can increase its loading time. To provide a good page-experience to users, the content on the viewport should be immediately loaded.
LCP is one of the key metrics of Core Web Vitals that measures how long it takes for the largest element (image, text, heading, etc) to become visible in the viewport. The viewport is the visitor’s visible area of a web page on a device, as shown below.
You can also test your pages on Google PageSpeed Insights to know whether your LCP images are being lazily loaded or not. If they are lazily loaded, it shows, “Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint.“.
03. How to Install Custom Image Attribute Plugin
In this section, I will guide you on how to install Custom Image Attribute plugin on your WordPress site.
- Go to Plugins and click on the Add New.
- Enter Custom Image Attributes in the plugins search bar.
- Go to Custom Image Attributes plugin by Live SEO, as you can identify it by logo.
- Click on the Install Now button.
- Click on the Activate button.
04. How to Remove Loading=”Lazy” on Featured Image
You must have installed the Custom Image Attributes plugin, now, in this section, I will guide you on how to remove the Loading=”lazy” on featured/hero image.
Here I am showing you how to remove Loading =”lazy” on a new featured image. You can follow this guide to do it for old/existing featured images. You can open your old featured images directly from the Media Library as well as from posts.
- Open a blog post in the WordPress Editor.
- Click on the Post tab.
- Go to Featured image section and click on the Set featured image.
- Upload and select your featured image.
- Go to ATTACHMENT DETAILS section located at your right-side and scroll-down to bottom, as shown in the video.
- Check Mark on the Remove Lazy Loading Yes and click on the Set Featured Image button.
Do this for every Featured Image that you upload. Open your old/existing Featured Images and repeat the same process. When you check mark Remove Lazy Loading Yes, changes are automatically saved, you don’t have to update your post.
- Inspect the source code of the featured image. You can see that the Loading=”lazy” is removed from the <img> tag of featured image.
- You can also see the fetchpriority=”high” attribute that I have added through Custom Image Attribute plugin, as shown in the next section. This attribute tells the browser that this image has high priority and should be loaded quickly with other resources. It improves the LCP score/timing of featured image.
- You can also test your page on Google PageSpeed Insights to know whether featured image is lazily loading or not, and how much LCP score is improved.
05. How to Add Fetch=”Priority” on Featured Image
In this section, I will guide you on how to add fetchpriority=”high” attribute on featured image.
- Go to Settings from your WordPress admin Sidebar.
- Click on the Custom Image Attributes.
- In the Custom Image Attributes field enter fetchpriority=”high”. To add multiple attributes, leave a space, e.g. fetchpriority=”high” data-save=”lightbox”, etc.
- Click on the Save Changes button.
If you like this post then don’t forget to share with other people. Share your feedback in the comments section below.
Also Read
- How To Pass Core Web Vitals Test for Monetized WordPress Blog
- Find & Fix Runtime Score of Core Web Vitals Metrics (LCP, CLS)
- How to Show Last Updated Date on WordPress Posts
- How to Install & Set Up Yoast SEO Configuration
- How to Stop Spam Bot Comments in WordPress
- How to Enable Persistent Object Cache on WordPress
- Rest API did not Behave Correctly | Fix WordPress Block Editor
