Non-Composited Animations
Priority: Critical
Impact: Negative
What issues it may cause
Animations that are handled by the main thread can cause performance issues because the main thread is responsible for many tasks, including handling user interactions, running JavaScript, and rendering page content.
Janky Animations: When animations are run on the main thread, they can become janky or choppy, especially if the main thread is busy with other tasks. This can lead to a poor user experience and can increase Cumulative Layout Shift.
Longer Time to Interactive (TTI): The main thread being occupied with animations can delay the time it takes for a page to become interactive, as the browser has to juggle rendering animations and processing user interactions simultaneously.
Increased CPU Usage: Non-composited animations can increase CPU usage since the main thread is more heavily utilized. This can drain battery life faster on mobile devices.
How do you fix it
Use CSS Properties that Promote Compositing: Stick to CSS properties that are known to be handled by the compositor thread, such as
transform
andopacity
. Avoid properties liketop
,left
,width
, andheight
for animations.Enable GPU Acceleration: Ensure that animations are hardware-accelerated by using the
will-change
property to hint to the browser that an element will be animated.Optimize Animation Performance: Minimize the use of complex animations and avoid animating large elements. Simplify animations where possible to reduce the burden on the main thread.
Learn how to avoid non-composited animations.
What is the positive impact
Smoother Animations: By ensuring animations are composited, they will run more smoothly and appear more fluid, enhancing the user experience and CLS.
Reduced Main Thread Workload: Offloading animations to the compositor thread frees up the main thread to handle other tasks, improving overall page performance and responsiveness.
Better Battery Life and Efficiency: Optimized animations that leverage the GPU can reduce CPU usage, leading to better battery life on mobile devices and more efficient use of system 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
urlCount
nodeNodeLabel
failedAuditsCount
warningAuditsCount
infoAuditsCount
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"non_composited_animations_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 nodeNodeLabel failedAuditsCount warningAuditsCount infoAuditsCount } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"non_composited_animations_failed_items"}}' https://api.lumar.io/graphql