{"id":66532,"date":"2023-04-27T16:00:00","date_gmt":"2023-04-27T13:00:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=66532"},"modified":"2023-10-07T12:20:04","modified_gmt":"2023-10-07T09:20:04","slug":"largest-contentful-paint-image-was-lazily-loaded","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/largest-contentful-paint-image-was-lazily-loaded\/","title":{"rendered":"How to Fix Largest Contentful Paint Image Was Lazily Loaded in WordPress"},"content":{"rendered":"\n

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?<\/p>\n\n\n\n\n\n\n\n

Lazy loading<\/a> is normally a smart tactic to speed up your site’s load times. \ud83c\udfbf<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

That’s precisely why PageSpeed Insights displays the “Largest Contentful Paint image was lazily loaded<\/em>” diagnostic message.<\/p>\n\n\n\n

\n
\n

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

\ud83d\udc49 In this post, you’ll learn the easiest way to get that done on your WordPress site.<\/p>\n<\/div>\n\n\n\n

\n\t\t
<\/div>\n\t\t\t
\n\t\t \t
\n\t\t \t\tHow to fix the largest contentful paint \ud83c\udfa8 image \ud83d\uddbc\ufe0f was lazily loaded in #WordPress error<\/a>\n\t\t \t<\/div>\n\t\t \t
\n\t\t \tClick To Tweet \n\t\t \t\t<\/span>\n\t\t \t<\/a>\n\t\t <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n
<\/div>\n\n\n\n

How to fix Largest Contentful Paint image was lazily loaded message in PageSpeed Insights<\/h2>\n\n\n\n

Below, we’ll share two ways to exclude the first image from lazy loading in WordPress:<\/p>\n\n\n\n

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

    1. Use Optimole to optimize your images for Largest Contentful Paint<\/h3>\n\n\n\n

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

    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).<\/p>\n\n\n\n

    \ud83d\uddb1\ufe0f Here’s what it can do:<\/p>\n\n\n\n