Use code BLACKFRIDAY through Dec. 1st for 30% off!
  1. Home
  2. Docs
  3. Tips
  4. How to fix the “Largest Contentful Paint image was lazily loaded” warning

How to fix the “Largest Contentful Paint image was lazily loaded” warning

Lazy loading is standard practice these days and one of the easiest ways to speed up your WordPress site. By lazy loading images, you ensure they don’t load until they are needed as a user scrolls down the page. Also, if you don’t, you’ll get the “Defer offscreen images” warning from PageSpeed Insights. 

With that being said, it doesn’t mean that every image should always be lazy loaded. Generally, you don’t want to lazy load images that appear above the fold; otherwise, it can cause higher Largest Contentful Paint (LCP). It might also generate the warning in Google PageSpeed Insights: “Largest Contentful Paint image was lazily loaded.”

Largest Contentful Paint image was lazily loaded warning
Largest Contentful Paint image was lazily loaded warning

There are a couple of ways you can fix this warning, which we’ll dive into below. This tutorial assumes you’re using lazy loading in Perfmatters.

Manually exclude image from lazy loading

The easiest way to fix the “Largest Contentful Paint image was lazily loaded” warning is to simply manually exclude the image from lazy loading

Step 1

Click into the Perfmatters plugin settings.

Perfmatters plugin settings
Perfmatters plugin settings

Step 2

Click on the “Lazy Loading” tab.

Lazy Loading tab
Lazy Loading tab

Step 3 

In the “Exclude from Lazy Loading” box, enter the URL of the image you want to exclude from lazy loading. You can also add any unique portion of its attribute string (class=”example”).

Exclude image from lazy loading in Perfmatters
Exclude image from lazy loading in Perfmatters

Step 4

Scroll down and click “Save Changes.”

Automatically exclude leading images

An alternative to a manual exclusion is to use the Exclude Leading Images feature in Perfmatters. This allows you to automatically exclude a certain number of images starting from the top of the page (above the fold).

Step 1

Click into the Perfmatters plugin settings.

Perfmatters plugin settings
Perfmatters plugin settings

Step 2

Click on the “Lazy Loading” tab.

Lazy Loading tab
Lazy Loading tab

Step 3 

Under “Exclude Leading Images” choose how many images you want to be automatically excluded from lazy loading, starting from the top of the page (above the fold).

Exclude leading images
Exclude leading images

Step 4

Scroll down and click “Save Changes.”

Was this article helpful?

Related Articles