Lazily Loaded LCP images
Priority: Critical
Impact: Negative
What issues it may cause
Delayed Visual Feedback: Lazy-loading the LCP image can significantly delay its appearance, giving users the impression that the page is loading slowly.
Negative Impact on Core Web Vitals: Since LCP is a critical metric, delaying this image can negatively affect your site's performance scores, impacting SEO and user satisfaction.
Suboptimal User Experience: Users may experience frustration as they wait longer for the main content to appear, especially if the LCP image is a significant part of the page's content or functionality.
How do you fix it
-
Avoid Lazy-Loading Critical Elements: Ensure that LCP elements are not lazy-loaded. These elements should be prioritized in the loading sequence to improve the perceived load time.
Use Proper Resource Prioritization: Mark important resources with high priority using the appropriate HTML attributes or server hints (e.g., preload, prefetch) to ensure they are loaded as quickly as possible.
Optimize Media Assets: Compress and resize images to ensure they load faster without sacrificing quality. This reduces the load time for the LCP element.
Learn more about optimal lazy-loading.
What is the positive impact
Improved Page Load Times: Ensuring the LCP element loads promptly enhances the overall page load time, improving the user's initial impression of your site's performance.
Enhanced User Experience: Faster loading of critical content keeps users engaged and reduces bounce rates, leading to higher satisfaction.
Better Core Web Vitals Scores: By improving the loading time of the LCP image, your site can achieve better performance metrics, potentially having a positive effect on SEO rankings and overall site visibility.
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 CrawlSiteSpeedAuditOpportunities {
opportunityDigest
element
title
auditId
exampleUrl
urlCount
failedAuditsCount
warningAuditsCount
infoAuditsCount
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"lcp_lazy_loaded_failed_items"}
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 CrawlSiteSpeedAuditOpportunities { opportunityDigest element title auditId exampleUrl urlCount failedAuditsCount warningAuditsCount infoAuditsCount } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"lcp_lazy_loaded_failed_items"}}' https://api.lumar.io/graphql