# Pages where LCP Image is Lazy Loaded

**Priority**: Critical

**Impact**: Neutral

## What issues it may cause

<ul>
  <li>
    <strong>Delayed Visual Feedback:</strong> Lazy-loading the LCP image can significantly delay its appearance, giving
    users the impression that the page is loading slowly.
  </li>
  <li>
    <strong>Negative Impact on Core Web Vitals:</strong> Since LCP is a critical metric, delaying this image can
    negatively affect your site's performance scores, impacting SEO and user satisfaction.
  </li>
  <li>
    <strong>Suboptimal User Experience:</strong> 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.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Avoid Lazy-Loading Critical Elements:</strong> Ensure that LCP elements are not lazy-loaded. These elements
    should be prioritized in the loading sequence to improve the perceived load time.
  </li>
  <li>
    <strong>Use Proper Resource Prioritization:</strong> 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.
  </li>
  <li>
    <strong>Optimize Media Assets:</strong> Compress and resize images to ensure they load faster without sacrificing
    quality. This reduces the load time for the LCP element.
  </li>
</ul>
[Learn more about optimal lazy-loading.](https://web.dev/articles/lcp-lazy-loading)

## What is the positive impact

<ul>
  <li>
    <strong>Improved Page Load Times:</strong> Ensuring the LCP element loads promptly enhances the overall page load
    time, improving the user's initial impression of your site's performance.
  </li>
  <li>
    <strong>Enhanced User Experience:</strong> Faster loading of critical content keeps users engaged and reduces bounce
    rates, leading to higher satisfaction.
  </li>
  <li>
    <strong>Better Core Web Vitals Scores:</strong> 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.
  </li>
</ul>

## 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:


```graphql
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
            }
          }
       }
     }
```

**Variables:**
```json
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"lcp_lazy_loaded_failed_audits"}
```