How do you improve LCP when the LCP element is a video?
By default, LCP is measured when the first frame of the video is presented. Some videos, especially third-party videos, can take a long time to load. You might be able to optimize the video to improve LCP but for third-party videos, that usually is not an option. So, how can you fix this?
One way to fix this is to add the optional poster attribute to a <video> tag. This is recommended by web.dev as well. The poster attribute indicates an image that should be displayed while the video is downloading. If the poster attribute is specified, LCP is determined by when this image is rendered. If you use a well-optimized image with a small file size for the poster attribute, the poster image will load much faster than the video. This results in a faster LCP.
Here is what the <video> code looks like:
<video poster="my-video-poster.webp">
<source src="my-video.mp4" type="video/mp4">
</video>An image will almost always load faster than a video. So, you never want to let a video be your webpage’s LCP element. Using an image as the LCP element will help you avoid excessively long LCP times.
What do you do about YouTube videos? That uses an <iframe> tag instead of a <video> tag but we can modify the poster idea for YouTube videos. You can use a well-optimized placeholder image by default. This article discusses one method of using a placeholder.