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

Try in explorer