# Pages where LCP Image not Preloaded

**Priority**: Critical

**Impact**: Neutral

## What issues it may cause

When the LCP image is dynamically added to a page, it means that the image might not be included in the initial HTML but is instead added later through JavaScript or other dynamic content methods. This can delay the loading and rendering of the LCP image, negatively impacting the LCP metric and user experience.

## How do you fix it

Ensure that the LCP image starts loading as early as possible by preloading it. Use the HTML element with the rel attribute set to preload. This tells the browser to fetch and cache the resource as soon as possible, even before it is required for rendering. To do this effectively, you need to identify the LCP image in your page and then use the element to preload it. [Learn more about how to eliminate LCP resource load delay.](https://web.dev/articles/optimize-lcp#eliminate-resource-load-delay)

## What is the positive impact

<ul>
  <li>
    Reducing Waiting Time: If the LCP image is preloaded, it can be fetched in advance and be ready in the browser's
    cache. When it's time to add the image to the page, the browser can render it almost immediately.
  </li>
  <li>
    Minimizing Blockages: If the browser has already fetched the LCP image, it doesn't need to interrupt other downloads
    or processes to fetch it, allowing other parts of the page to load more smoothly.
  </li>
  <li>
    Improving Overall Page Performance: By having the LCP image preloaded, the browser can present the most significant
    piece of content as soon as possible, leading to a more engaging and positive user experience.
  </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
              savingsSecs
              pageviews
              productOfSavingsSecsAndPageviews
              itemsCount
              auditResult
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

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