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 Contentful Paint image was lazily loaded?

Lazy loading is normally a smart tactic to speed up your site’s load times. 🎿

But if you’re lazy loading an above-the-fold image that’s being used to calculate your site’s Largest Contentful Paint time, then it may work against you. Why? Lazy loading that first image can actually slow down your site’s Largest Contentful Paint times because it takes it longer to appear.

That’s precisely why PageSpeed Insights displays the “Largest Contentful Paint image was lazily loaded” diagnostic message.

Thankfully, there’s a pretty easy fix – all you need to do is to exclude the first image from lazy loading.

πŸ‘‰ In this post, you’ll learn the easiest way to get that done on your WordPress site.

How to fix Largest Contentful Paint image was lazily loaded message in PageSpeed Insights

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

  1. Use the free Optimole plugin which offers optimized lazy loading plus tons of other image optimization features.
  2. Add a code snippet to adjust WordPress’s native browser lazy loading functionality.

1. Use Optimole to optimize your images for Largest Contentful Paint

The easiest way to fix the Largest Contentful Paint image was lazily loaded diagnostic is to use the Optimole plugin. It’s an all-in-one image optimization tool that’s part of the Themeisle family.

In addition to letting you fix this specific problem, Optimole also simply offers lots of tools to optimize your site’s images for Largest Contentful Paint (and just generally for web performance).

πŸ–±οΈ Here’s what it can do:

  • Serve adaptive images in real-time that are optimized for each visitor. For example, someone browsing on a low-resolution smartphone would receive smaller images than someone 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 like WebP and AVIF.
  • Deliver images via its built-in content delivery network (CDN), powered by Amazon CloudFront’s global network.

When it comes to the Largest Contentful Paint image was lazily 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 start, install and activate the free Optimole plugin on your site. It’s listed at WordPress.org and you can install it like any other free plugin.

Once you activate the plugin, you’ll be prompted to create a free account to access the API key. This will allow you to connect your site to the Optimole service.

How to activate Optimole

Just follow the instructions. You’ll have it running in under a minute.

Exclude the first image(s) from being lazy loaded

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

You can always access it by going to Media β†’ Optimole.

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.

how to fix the Largest Contentful Paint Image Was Lazily Loaded diagnostic with Optimole

Configure other image optimization features according to your preferences

In addition to fixing any issues with lazy loading and Largest Contentful Paint images, Optimole also offers lots of other useful image optimization features that are worth exploring.

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

Other Optimole settings

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

Even if you’re not using a dedicated lazy load plugin like Optimole, you still might run into the Largest Contentful Paint image was lazily loaded message. The reason is because WordPress added native lazy loading support in WordPress 5.5.

This caused issues with poor Largest Contentful Paint at first because it lazy loaded all images.

To fix this and avoid the Largest Contentful Paint image was lazily loaded message, WordPress 5.9 tweaked this behavior to exclude the first image from lazy loading automatically.

However, you still might be experiencing the problem with WordPress’s native lazy loading through some type of edge case or issue with your theme.

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

For example, you could exclude the first two images instead of just the first image.

To do this, add the following code snippet to the functions.php file of your child theme 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;
} );
how to fix the Largest Contentful Paint Image Was Lazily Loaded diagnostic with code

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

Fix the Largest Contentful Paint image was lazily loaded message for good 🎯

If you’re seeing the Largest Contentful Paint image was lazily loaded message in PageSpeed Insights, that means you’re slowing down your site’s Largest Contentful Paint times by lazy loading the main image.

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

Beyond fixing this diagnostic, it also does lots of other helpful things to optimize your images for Largest Contentful Paint times and web performance in general.

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

πŸ‘‰ For some other ways to improve this metric, you also might want to read our five tips for speeding up Largest Contentful Paint times, as well as our general guide to Google Core Web Vitals.

Do you still have any questions about how to exclude the first image from being lazy loaded in WordPress? Let us know in the comments!

Free guide

4 Essential Steps to Speed Up
Your WordPress Website

Follow the simple steps in our 4-part mini series
and reduce your loading times by 50-80%.Β πŸš€

Free Access

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!