Pages with Unoptimized Images
Priority: Critical
Impact: Neutral
What issues it may cause
Slower Page Load Times: Large, unoptimized images increase the amount of data that needs to be downloaded, leading to longer page load times, especially on slower internet connections.
Increased Bandwidth Usage: Larger images consume more bandwidth, which can be particularly problematic for users with limited data plans or slow network speeds.
Higher Storage and Memory Usage: Unoptimized images can lead to higher storage usage on servers and increased memory consumption on client devices, impacting overall performance.
Poor User Experience: Slow-loading images can lead to a poor user experience, as users may become frustrated with the delay and abandon the page before it fully loads.
How do you fix it
There are various ways to optimize images, including:
- Use image CDNs: Image content delivery networks (CDN) can yield big savings in image file size.
- Resize Images: Ensure that images are no larger than they need to be for their display size on the web page.
- Compression: Use image compression tools to reduce file sizes without significantly affecting visual quality.
- Correct Formatting: Use the most appropriate image format for your content. For example, use JPEG for photographs and PNG for images with transparency.
- Lazy Loading: Implement lazy loading so images are only loaded as they enter the viewport (visible part of the web page), rather than all at once.
What is the positive impact
Faster Page Load Times: Optimized images load faster, improving overall page load times and providing a better user experience.
Reduced Network Usage: By minimizing image file sizes, you can reduce network traffic and save bandwidth, benefiting users with limited data plans.
Lower Storage and Memory Consumption: Optimized images use less storage on servers and reduce memory usage on client devices, improving overall performance.
Improved User Experience: Faster loading images contribute to a smoother, more engaging user experience, which can lead to increased user satisfaction and retention.
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
savingsKib
pageviews
productOfSavingsKibAndPageviews
itemsCount
auditResult
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"uses_optimized_images_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 savingsKib pageviews productOfSavingsKibAndPageviews itemsCount auditResult } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"uses_optimized_images_failed_audits"}}' https://api.lumar.io/graphql