A full-width hero video looks great in the design file. In production, it's often the heaviest thing on the page, and it quietly drags down your performance score.

This is a checklist I use whenever video shows up in a frontend project. Each item is small, but together they make a big difference.

First, measure

Before changing anything, find out whether video is actually your problem:

Run Lighthouse or PageSpeed Insights on the page.

In Chrome DevTools, open the Network tab, filter by Media, and sort by size.

In the Performance panel, check what element is reported as your LCP. If your LCP element is a video poster or a frame, or if the video request competes with your critical resources on a slow connection, keep reading. The checklist

Compress the source file first Most videos exported from editors or screen recorders are far heavier than they need to be.…