Offscreen Images
Priority: Critical
Impact: Negative
What issues it may cause
Increased Load Times: Loading all images, including those offscreen, during the initial page load can significantly slow down the page rendering time. This delay affects the perceived performance and user experience, as users have to wait longer for the content they can actually see to load.
Excessive Bandwidth Usage: Loading offscreen images consumes additional network bandwidth, which is inefficient, especially for users on slower connections or with limited data plans. This unnecessary data transfer can result in higher costs for mobile users.
High Memory Consumption: Processing and storing all images, including those not immediately needed, can increase memory usage. This is particularly problematic on devices with limited resources, leading to slower performance and potential crashes.
How do you fix it
Prioritize Critical Images: Load images that are immediately visible to the user first, and defer non-critical images until later
Implement Lazy Loading: Use lazy loading techniques to defer loading offscreen images until they are about to enter the viewport. This can be achieved through native HTML attributes (loading="lazy") or JavaScript libraries designed for lazy loading.
Optimize Image Delivery: Ensure that images are appropriately sized and compressed. Using modern image formats like WebP can reduce file sizes while maintaining quality.
Learn more about deferring images.
What is the positive impact
Faster Page Load Times: By loading only the images that are visible in the initial viewport, the page can render much faster, enhancing the user experience.
Reduced Network Usage: Lazy loading offscreen images minimizes unnecessary data transfer, conserving bandwidth and reducing load times, particularly beneficial for mobile users.
Lower Memory Consumption: Deferring the loading of offscreen images helps keep memory usage low, which is critical for maintaining performance on devices with limited resources.
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
savingsScoreSum
wastedSecsSum
wastedKibSum
failedAuditsCount
warningAuditsCount
infoAuditsCount
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"offscreen_images_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 savingsScoreSum wastedSecsSum wastedKibSum failedAuditsCount warningAuditsCount infoAuditsCount } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"offscreen_images_failed_items"}}' https://api.lumar.io/graphql