Core Web Vitals: keeping video-heavy sites fast
What LCP, INP and CLS are and why they get harder on sites full of video and images. The speed rules we follow for agency and brand websites.
As a video production studio, a website without video is hard to imagine. But every video adds weight to how fast a page opens. Google measures page experience with three metrics called Core Web Vitals. In this post we explain them and how we keep them in good shape on video-heavy sites.
The three metrics
- LCP (Largest Contentful Paint): how long the largest image or block of text on the page takes to appear. Good is under 2.5 seconds.
- INP (Interaction to Next Paint): how quickly the page responds to a click or a tap. It replaced the older FID metric in March 2024. Good is under 200 milliseconds.
- CLS (Cumulative Layout Shift): how much the content moves around while the page loads. Good is under 0.1.
Video and LCP
If there is a large video on the first screen, LCP is usually either its poster image or the headline. So we show the poster first and load the video after. The poster is compressed and given priority at the top of the page. Visitors see something in the first second, and the video takes its place when it is ready.
Do not load what nobody sees
Videos further down the page are not downloaded until the visitor gets close to that section. Videos that are off screen are paused. This protects load speed and, on phones, battery and data.
Prevent layout shift
The biggest cause of CLS is images and videos without set dimensions. We define the width and height ratio of every image and video up front, so the page does not jump when content arrives. We also preload fonts so text does not change after it appears.
Keep interaction light
INP usually suffers because of heavy JavaScript. We build animations with the browser's own tools where possible and avoid changing the page layout while scrolling. Instead of large libraries, we write small pieces of code that do the job.
Phone first
A site that opens fast on a desktop can be slow on a phone. We always test on a mid-range phone with a slow connection too. Where needed, phones get a lighter version of the video. We described how we do that on our own home page in the post about the scroll film.
You cannot know without measuring
The Core Web Vitals report in Google Search Console shows real user data. After launch we follow it regularly. Lab tests are a good start, but decisions should rest on what real users experience.
For a site that is fast and visually strong, see our web design and development page.
Let us talk about this for your project.
Tell us about your project and we will send a tailored quote within 24 hours.
