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 GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
  getCrawl(id: $crawlId) {
    reportsByCode(
      input: {
        reportTypeCodes: Basic
        reportTemplateCodes: [$reportTemplateCode]
      }
    ) {
      rows {
        nodes {
          ... on CrawlSiteSpeedAudits {
            url
            auditId
            title
            displayValue
            score
            itemsCount
            auditResult
            exampleItems
          }
        }
      }
    }
  }
}

Try in explorer