# Largest Contentful Paint Elements

**Priority**: Critical

**Impact**: Negative

## What issues it may cause

<ul>
  <li>
    <strong>Perceived Page Load Speed:</strong> If the largest contentful paint element takes too long to load, users
    may perceive the page as slow, leading to increased bounce rates and decreased user satisfaction.
  </li>
  <li>
    <strong>SEO Impact:</strong> Google considers LCP as a important metric for page experience, affecting search engine
    rankings.
  </li>
</ul>

## How do you fix it

There will always be a largest contentful paint element on a page. First, assess the timing of the element load using Core Web Vitals thresholds as a guideline:<ul><li><strong>Good:</strong> LCP occurs within the first 2.5 seconds of when the page starts loading.</li><li><strong>Needs Improvement:</strong> LCP occurs between 2.5 and 4 seconds.</li><li><strong>Poor:</strong> LCP occurs after 4 seconds.</li></ul>There are various techniques for optimizing LCP Elements including: <ul><li><strong>Optimize Critical Rendering Path:</strong> Streamline the delivery of resources critical for rendering the largest contentful paint element.</li><li><strong>Reduce Server Response Time:</strong> Optimize server response time to ensure faster delivery of the largest contentful paint element.</li><li><strong>Prioritize Visible Content:</strong> Ensure that the largest contentful paint element is prioritized for loading, optimizing its delivery for a faster user experience.</li></ul>[Learn more about optimizing LCP.](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)

## What is the positive impact

<ul>
  <li>
    <strong>Improved User Experience:</strong> Prompt loading of the main content encourages users to interact with the
    page more quickly, reducing bounce rates and improving conversions.
  </li>
  <li>
    <strong>SEO Benefits:</strong> Optimizing LCP improves page experience, potentially boosting search engine rankings
    and increasing organic traffic.
  </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
              savingsScore
              description
              auditResult
              productOfSavingsKibAndPageviews
              productOfSavingsSecsAndPageviews
              savingsKib
              savingsSecs
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

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