What do I do about a 4 MB hero video?
Three options, in descending order of how much the marketing team will like them.
The honest first answer is to remove it, which is correct and usually unavailable. So, in order of realism:
- Poster image first, video loaded on interaction. The page paints instantly and the video still exists.
- Serve a short, muted, heavily compressed loop, and only above a connection threshold.
- If it must autoplay, make it the LCP element deliberately: preload the poster, and treat the video as decoration.
Check prefers-reduced-motion first
An autoplaying background video should not play at all for a visitor who has asked the system for less motion.