How to put a video on a landing page without hurting page speed
A product video is usually the heaviest thing on a landing page, and the easiest to get wrong. Here is the setup I use so the video helps conversion without costing page speed. Host it elsewhere, embed it Do not serve a large video file from your own server. Upload to YouTube or Vimeo and embed. YouTube helps discovery, Vimeo gives you more control over the player. Either is fine, so pick based…
When adding a video to a landing page, it's crucial to avoid negatively impacting page speed. The video tends to be the largest file on the page and can be easily mishandled. The recommended approach is to host the video externally and embed it.
Two primary options for hosting are YouTube and Vimeo. Choose based on whether you prioritize discovery (YouTube) or control over the player (Vimeo). Instead of having the video load instantly, display a thumbnail and only load the video player when the user clicks on it. This approach reduces the initial page load time.
To incorporate the video, create a container with a fixed aspect ratio (16:9 in this example) to prevent layout shifts when the player loads. Embed the video using an iframe and set its attributes, such as autoplay, encrypted-media, and picture-in-picture. Include a play button next to the thumbnail for easy access.
Add captions and a brief summary below the video to assist users who watch without sound and improve search engine understanding of the content. Utilize structured data like VideoObject markup to provide search engines with relevant information about the video.
If the landing page is meant for search engine discovery, include the video in a video sitemap. However, avoid autoplay with sound, as it can negatively impact user experience. Follow the checklist provided for optimal video embedding without slowing down the page.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.