Why autoplaying video hurts performance
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 192, free, in about 45 seconds.
What it is
Video autoplay is when a video starts playing as soon as the page loads, set with the autoplay attribute on a <video> element or in an embed's settings. It is common on hero sections and product pages as a background video.
An autoplaying video downloads megabytes before the visitor has asked for anything, competes with the page's own content for bandwidth, drains phone batteries and puts movement on screen while people try to read. Browsers block autoplay with sound, and WCAG 2.2 requires a way to pause any motion that lasts more than 5 seconds.
OK looks like this: videos show a poster image and play on click, and any background video that must autoplay is muted, short, under about 1 MB, pausable and switched off for visitors who prefer reduced motion. getReport counts the videos that start on their own.
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.
- Remove the autoplay attribute and show a poster image with a play button instead.
- If a background video must autoplay, keep it muted, under 1 MB and use prefers-reduced-motion to disable it.
Questions people ask
What is Chrome's autoplay policy for muted video?
Chrome always allows muted videos to autoplay. Videos with sound can autoplay only after the visitor has interacted with the site, or on sites where they often play media, and are otherwise blocked. Safari and Firefox have similar rules, so an autoplaying video must be muted to play reliably.
How do you autoplay a video in HTML?
Add the autoplay, muted and playsinline attributes to the video element, for example <video autoplay muted playsinline loop poster="cover.jpg">. muted is required for browsers to allow it, and playsinline keeps it from going full screen on iPhones. Include controls or a pause button so visitors can stop it.
Is autoplay video bad for page speed?
Usually, yes. The browser starts downloading the video immediately, often several megabytes, which competes with images, fonts and scripts the page needs first. If a video must autoplay, keep it short and small, set a poster image and use preload="none" or lazy-load it when it is below the fold.