Animated Content with Inefficient Formats
Priority: Critical
Impact: Negative
What issues it may cause
Slow Page Rendering: Complex or resource-intensive animations can delay the rendering of page content, leading to a slower user experience.
High CPU Usage: Inefficient animations can consume significant CPU resources, particularly on lower-powered devices, leading to poor performance and reduced battery life.
Poor Accessibility: Excessive animations or rapid transitions can be disorienting or distracting for users, particularly those with cognitive or visual impairments.
How do you fix it
Convert GIFs to more efficient formats: consider using MPEG4/WebM videos for animations and PNG/WebP for static images.
Replicate behaviour of GIFs: replace animated GIFs with video elements (<video>) to maintain autoplay, continuous looping, and silence.
Learn more about efficient video content
What is the positive impact
Faster Page Load Times: Optimizing animations can reduce the time it takes for a page to become interactive, improving overall page load times.
Improved Battery Life: By reducing CPU usage, optimized animations can help extend battery life on mobile devices.
Enhanced User Experience: Smoother, more responsive animations can enhance the user experience and make the website feel more polished and professional.
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
wastedKibAvg
urlCount
wastedKibSum
gaPageviewsSum
savingsScoreSum
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"efficient_animated_content_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 wastedKibAvg urlCount wastedKibSum gaPageviewsSum savingsScoreSum } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"efficient_animated_content_failed_items"}}' https://api.lumar.io/graphql