Skip to main content

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.

What is the positive impact​

  • 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.

  • 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.

  • 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.

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
            savingsSecs
            pageviews
            productOfSavingsSecsAndPageviews
            itemsCount
            auditResult
          }
        }
      }
    }
  }
}

Try in explorer