How to Fix Largest Contentful Paint Image Was Lazily Loaded

Did you just run your website through Google PageSpeed ​​Insights only to be met with a diagnostic message telling you that the largest content-oriented Paint image was lazily loaded?

Lazy loading is generally a smart strategy to speed up your site’s load times.

But if you’re lazy loading the above-the-fold image that’s being used to calculate your site’s largest contentful paint time, this can work against you. Why? Laziness in loading that first image can actually slow down the paint time of your site’s biggest piece of content because it takes longer to display.

This is why PageSpeed ​​Insights” Largest Material Paint image was loaded lazilyClinical Message.

How to fix Largest Content Paint image lazy loaded message in PageSpeed ​​Insights

Below, we will share two ways to exclude the first image from lazy loading in WordPress:

1. Use the free Optimole plugin which provides optimized lazy loading as well as tons of other image optimization features,
2. Add a code snippet to accommodate WordPress’ native browser lazy loading functionality,

1. Use Optimole to Optimize Your Images for Largest Contentful Paint

The easiest way to fix the biggest contentious paint image is to use the lazy load diagnostic optimal plugin, It is an all-in-one image optimization tool that is part of the Themisal family.

In addition to letting you fix this specific problem, Optimole also provides lots of tools to optimize your site’s images for the largest contentful Paint (and for web performance in general).

Here’s what it can do:

• Provide adaptive images in real-time, customized for each visitor. For example, a person browsing on a low-resolution smartphone will receive smaller images than a person browsing on a 4K screen.
• Lazy load images, including excluding the first X images from lazy loading.
• Compress images using lossy or lossless compression.
• Convert images to optimized formats such as WebP and AVIF.
• Deliver images through its built-in Content Delivery Network (CDN), powered by Amazon CloudFront’s global network.

When it comes to the largest Material Paint image that was lazy-loaded diagnostic, the most important Optimole feature is the option to exclude the first X images in your post from being lazy-loaded.

Here’s how to do it…

Activate the Optimole plugin on your site

To get started, install and activate the free Optimole plugin on your site. It’s listed on WordPress.org and you can install it like any other free plugin.

Once you’ve activated the plugin, you’ll be asked to create a free account to access the API key. This will allow you to connect your site to the Optimol service.

Simply follow the instructions. You’ll have it up and running in under a minute.

Exclude first image(s) from lazy loading

Once you’ve connected the plugin, you should see the Optimole dashboard.

You can always access it by going Media → Optimol,

Optimole enables lazy loading by default. It also automatically excludes the first three images from being lazy loaded. In other words, it should fix the diagnostic message even with its default settings.

If you want to exclude additional images from lazy loading or otherwise adjust lazy loading behavior, you can go to Settings → Advanced → Lazyload in the Optimole area of ​​your WordPress dashboard.

Configure other image optimization features according to your preferences

In addition to fixing any issues with lazy loading and the largest content-rich Paint images, Optimole also offers a number of other useful image optimization features that are well worth exploring.

To view and/or enable these features, you can explore the Adjustment area of ​​the Optimole interface in your WordPress dashboard.

2. Use code to exclude images from native WordPress lazy loading

Even if you are not using a dedicated lazy load plugin like Optimol, you may still run into the Largest Material Paint image was loaded lazily Message. This is because WordPress added native lazy loading support in WordPress 5.5.

This initially caused problems with the bad biggest Contentful Paint as it lazily loaded all the images.

to fix and avoid the Largest Material Paint image being loaded lazily Message, WordPress 5.9 changed this behavior to automatically exclude the first image from lazy loading.

However, you may still be facing a problem with WordPress’ native lazy loading either through some kind of edge case or issue with your theme.

If you want to be safe, you can use wp_omit_loading_attr_threshold() function and action hook. This will adjust how many images to exclude from lazy loading.

For example, you can exclude the first Two images instead of just the first image.

To do this, add the following code snippet to functions.php Your child theme’s file or a code manager plugin like code snippets,

add_filter( 'wp_omit_loading_attr_threshold', function($omit_threshold){
    if ( is_single() ) {
        $omit_threshold = 2;
    }
    return $omit_threshold;
} );

This code snippet will exclude the first two images of all single posts. If you want to exclude more images, you can change the number “2” to a higher number.

Fix the image of the largest contentful paint was a lazy loaded message for good

The easiest way to fix this problem is to install the free Optimol plugin And configure it to exclude the first few images from lazy loading.

In addition to fixing this fix, it also does a lot of other helpful things to optimize your images for the greatest content paint time and web performance in general.

If you’re using WordPress’ native browser lazy loading instead of a lazy loading plugin, you can manually adjust how many images to exclude from lazy loading. wp_omit_loading_attr_threshold() Celebration.

For some other ways to improve this metric, you might want to read our general guide to Google Core Web Vitals, as well as our Five Tips for Speeding Up the Biggest Contentful Paint Time Ever.