Skip to main content

Pages where LCP Image is Lazy Loaded

Priority: Critical

Impact: Neutral

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}
        ) {
          crawlSiteSpeedAudits(after: $after, reportType: Basic) {
            nodes {
              url
              auditId
              title
              displayValue
              score
              itemsCount
              auditResult
              exampleItems
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }

Try in explorer