Disable lazy load images: It is recommended to lazy load images to optimize your site speed. This means the photos do not come to appear until they are needed. For example, if you have web page images that will be shown to users when they scroll down, they will appear when visitors reach their location. Therefore, it is one of the key factors in implementing and strengthening the speed of your site. Fortunately, WordPress started introducing it in version 5.4. Thus, WordPress users don’t need to use javascript or other third-party plugins anymore.
Why Should You Disable Lazy Load Images?
Gtmetrix and Page Speed Insights are the leading websites in determining site strengths and bugs that need to be corrected. Simply enter your URL into one of these sites and click enter to point out errors on your page. Try fixing each of them to make your website load faster. Thus, you may see tons of errors on your page that need to be fixed. Avoiding fixing them will hurt your site’s ranking in the google search engine.
Despite this, it is recommended to disable lazy load images when your homepage has LCP (largest contentful paint) photos such as (author, main slider). Keeping them enabled on LCP can have a detrimental effect on your site speed. You need to find how to circumvent this obstacle to improve your site health. There are multiple ways to rush off this error. However, Gtmetrix or page speed insight can help you identify a specific image that has lazy loading enabled on LCP.
How to Disable Lazy Load Images on LCP
There are many simple and easy methods by which lazy loading can be disabled on LCP. All you need to do is to check your site health and identify images enabled as lazy loading on LCP. Therefore, visit one of the websites mentioned earlier and follow us. In this article, we are going to use gtmetrix to identify our site score, and if the image appears as loading =”lazy” on LCP.
In my case, it is showing me that performance is 97% and structure is 88%. But, when I scroll down the page it also displays the lazy loading images that appear on the top of my homepage.
Simply click on the “arrow” option and you will see the file that is enabled on LCP. Alternatively, You can also view the image source by visiting your site. Just right-click on the homepage or the image that appears above and click “inspect element”. Type “F” to find the image in the “Element” section and you will see that it is enabled as loading “lazy”. The following are the methods to disable lazy load images on LCP.
1. Placing a Code in the WordPress Editor
- Sign in to your WordPress account
- Go to “Theme File Editor” in the “Appearance section”
- Click “functions.php” to the right of the coding
- Copy the code below and paste it right after “<? Php” then click update file.
add_filter('wp_lazy_loading_enabled','__return_false');
This is how you need to input the code in the functions.php section. You can also make code changes using the control panel by visiting your hosting provider.
Note: Create a backup before you update your theme editor to avoid unpleasant situations in the future. Creating a backup file can retrieve your data later if necessary.
Let’s check the site health again and also the error if it still appears.
Hurrah! As we can see that the error has faded away. However, if the problem persists on your end, there is nothing to worry about, we are more than ready to help you with other strategies. People who own hosting from Hostinger can access the control panel via the Hostinger Dashboard. Simply click on “File Manager” and there they will find the Public Html folder and “public_html->/domains/example.com/public_html” file. Click on this option and you will be directed to your Public Html section where you can control your website through codings.
Remember, compliance with the above method may result in an adverse effect in exceptional cases on some sites because that method is used to disable lazy load images on your whole website. If you want to apply it to a specific image, please follow the instructions below.
2. Native Lazy Loading
If you are using an attribute loading “lazy” in HTML, simply remove them from the identified images on LCP. Be aware, that your LCP image may differ on mobile and desktop, so you are more likely to apply it to all of the above-folded images.
3. Javascript Library
It is advised to exclude lazy loading LCP images if you apply javascript for lazy loading. JavaScript libraries are collections of prewritten code snippets that are used and reused to perform common JavaScript functions.
4. Disable Lazy Load Images Using a Plugin
There are also plugins available for disabling lazy load features on-site or on a specific image. Please follow the instructions below.
- Go to Plugins->Add New->Search for disable lazy load
- Find a Plugin by Sachyya
- Click on “Install Now”
- Activate the Plugin
- Go to Dashboard->Media->Library
- Now, choose the image you want to disable lazy load
- You will find “Disable lazy loading”
- Tick on the checkbox and click save
- Do not forget to purge the caches
5. Disable Lazy Loading for Featured Image
Simply, insert the below code into function.php.
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');Now, you’re all done. There should be no mistake if the following instructions are followed correctly. Keep in mind that the plugin may conflict with some other plugins and also interfere with certain features. In some cases, it does not allow the recent posts feature to be displayed at the end of each blog. In addition, it conflicts with a plugin called “Easy Table of Content”. Both of them are vulnerable to each other which disables some of their features.
Well, if the plugin works for you and doesn’t conflict with any of the features, that’s fine. Otherwise, you will need to make some code changes to disable lazy load images.
Solemnly, we would not refrain to suggest you install a plugin called “Wp Rocket“. Unlike other caching plugins, Wp Rocket proactively caches your content and crawls your site.
Other than that, I would strongly recommend checking on Stackoverflow.com or hiring a developer through fiverr.com. Besides, you are always welcome to ask anything here via live chat, joint community, or Email.
You may also be interested in: How to Write SEO Friendly Article 2022