Skip to main content

Pages with Inefficient Animated Content

Priority: Critical

Impact: Neutral

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:

Operation: query GetReportStatForCrawl( $crawlId: ObjectID! $reportTemplateCode: String! $after: String ) { getReportStat( input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode} ) { crawlSiteSpeedAudits(after: $after, reportType: Basic) { nodes { url auditId title displayValue savingsKib pageviews productOfSavingsKibAndPageviews itemsCount auditResult } totalCount pageInfo { endCursor hasNextPage } } } }Variables: {"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"efficient_animated_content_failed_audits"}
GetReportStatForCrawlTry in Explorer
GraphQL
query GetReportStatForCrawl(
    $crawlId: ObjectID!
    $reportTemplateCode: String!
    $after: String
   ) {
      getReportStat(
        input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
      ) {
        crawlSiteSpeedAudits(after: $after, reportType: Basic) {
          nodes {
            url
            auditId
            title
            displayValue
            savingsKib
            pageviews
            productOfSavingsKibAndPageviews
            itemsCount
            auditResult
          }
          totalCount
          pageInfo {
            endCursor
            hasNextPage
          }
        }
     }
   }