Skip to main content

Largest Contentful Paint Elements

Priority: Critical

Impact: Negative

What issues it may cause​

  • Perceived Page Load Speed: 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.

  • SEO Impact: Google considers LCP as a important metric for page experience, affecting search engine rankings.

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:

  • Good: LCP occurs within the first 2.5 seconds of when the page starts loading.
  • Needs Improvement: LCP occurs between 2.5 and 4 seconds.
  • Poor: LCP occurs after 4 seconds.
There are various techniques for optimizing LCP Elements including:
  • Optimize Critical Rendering Path: Streamline the delivery of resources critical for rendering the largest contentful paint element.
  • Reduce Server Response Time: Optimize server response time to ensure faster delivery of the largest contentful paint element.
  • Prioritize Visible Content: Ensure that the largest contentful paint element is prioritized for loading, optimizing its delivery for a faster user experience.
Learn more about optimizing LCP.

What is the positive impact​

  • Improved User Experience: Prompt loading of the main content encourages users to interact with the page more quickly, reducing bounce rates and improving conversions.

  • SEO Benefits: Optimizing LCP improves page experience, potentially boosting search engine rankings and increasing organic traffic.

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
            savingsScore
            description
            auditResult
            productOfSavingsKibAndPageviews
            productOfSavingsSecsAndPageviews
            savingsKib
            savingsSecs
          }
        }
      }
    }
  }
}

Try in explorer