Skip to content

Why autoplaying video hurts performance

Best practices1 min readFixes check video-autoplay

An autoplaying video downloads megabytes before the visitor asked for anything. Use a poster image and play on click.

Step by step, with screenshots: Motion and prefers-reduced-motion: animations that respect the visitor →

Check your own site

Runs this check and the other 186, free, in about 45 seconds.

What a passing site looks like

  • No video starts playing automaticallywarning · −0.5 ptseffort S

Autoplaying video

Why it matters. Autoplaying video downloads megabytes before the visitor asked for anything, drains phone batteries and makes the page move while people try to read it.

How to fix it.
  1. Remove the autoplay attribute and show a poster image with a play button instead.
  2. If a background video must autoplay, keep it muted, under 1 MB and use prefers-reduced-motion to disable it.

Filed under Best practices. Copy is generated from the same catalogue that scores every report, so what you read here is what the report says.