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
- Variables
- cURL
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
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"prioritize_lcp_image_failed_audits"}
curl -X POST -H "Content-Type: application/json" -H "apollographql-client-name: docs-example-client" -H "apollographql-client-version: 1.0.0" -H "x-auth-token: YOUR_API_SESSION_TOKEN" --data '{"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 } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"prioritize_lcp_image_failed_audits"}}' https://api.lumar.io/graphql