Skip to main content

Lazily Loaded LCP images

Priority: Critical

Impact: Negative

What issues it may cause​

  • Delayed Visual Feedback: Lazy-loading the LCP image can significantly delay its appearance, giving users the impression that the page is loading slowly.

  • Negative Impact on Core Web Vitals: Since LCP is a critical metric, delaying this image can negatively affect your site's performance scores, impacting SEO and user satisfaction.

  • Suboptimal User Experience: Users may experience frustration as they wait longer for the main content to appear, especially if the LCP image is a significant part of the page's content or functionality.

How do you fix it​

  • Avoid Lazy-Loading Critical Elements: Ensure that LCP elements are not lazy-loaded. These elements should be prioritized in the loading sequence to improve the perceived load time.

  • Use Proper Resource Prioritization: Mark important resources with high priority using the appropriate HTML attributes or server hints (e.g., preload, prefetch) to ensure they are loaded as quickly as possible.

  • Optimize Media Assets: Compress and resize images to ensure they load faster without sacrificing quality. This reduces the load time for the LCP element.

Learn more about optimal lazy-loading.

What is the positive impact​

  • Improved Page Load Times: Ensuring the LCP element loads promptly enhances the overall page load time, improving the user's initial impression of your site's performance.

  • Enhanced User Experience: Faster loading of critical content keeps users engaged and reduces bounce rates, leading to higher satisfaction.

  • Better Core Web Vitals Scores: By improving the loading time of the LCP image, your site can achieve better performance metrics, potentially having a positive effect on SEO rankings and overall site visibility.

How to fetch the data for this report template​

You will need to run a crawl for report template to generate report. When report has been generated and you have crawl id you can fetch data for the report using the following query:

query GetReportStatForCrawl(
    $crawlId: ObjectID!
    $reportTemplateCode: String!
    $after: String
   ) {
      getReportStat(
        input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
      ) {
        crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) {
          nodes {
            opportunityDigest
            element
            title
            auditId
            exampleUrl
            urlCount
            failedAuditsCount
            warningAuditsCount
            infoAuditsCount
          }
          totalCount
          pageInfo {
            endCursor
            hasNextPage
          }
        }
     }
   }

Try in explorer