Enhance lazy loading of media by skipping fetch if not in viewport for at least 1 sec. Pause media when not visible in viewport.
Adding videos to your website can sometimes be a double-edged sword. Web users love high-resolution videos, but if your website isn’t optimized to handle them, such content can cause performance problems.
When it comes to optimizing background videos for fast loading, there are several steps you can take.
Reduce the file size
One of the main factors affecting the loading speed of background videos is the file size. Large video files can take longer to load, especially on slower internet connections. To optimize the file size, you can try the following techniques:
- Compress the video: Use video compression tools like HandBrake to reduce the file size without significantly affecting the video quality. This can be done by adjusting the video bitrate, resolution, and other settings. Smaller media files load faster, so you can save users a substantial amount of time by compressing all of your videos. Try not to sacrifice video quality during your compression efforts. High-quality videos make your website appear more professional, but videos that look like animated gifs can leave a bad impression on users.
- Choose the right video format: Some video formats, such as MP4 and WebM, are more efficient and have better compression capabilities. Consider using these formats for your background videos.
- Trim unnecessary footage: If your video contains unnecessary footage, consider trimming it to reduce the file size.
Remove audio from muted videos
If you have a video with the audio muted, you can actually remove the audio data from the video file to save on the size of the video. If you made the video yourself, it might be possible to omit the audio while exporting the file. Otherwise, you can use a simple video editing tool or FFmpeg to strip the audio.
On MacOS you may use iMovie to detach the audio from the video.
Convert to HTML5 supported formats
HTML5 allows developers to deliver video content without the aid of a plugin. Use an online video converter to convert your video files to HTML5 formats such as MP4 and WebM.
The following video codecs are the most frequently employed on the the web:
| Codec name (short) | Full codec name | Container support |
|---|---|---|
| AV1 | AOMedia Video 1 | MP4, WebM |
| AVC (H.264) | Advanced Video Coding | 3GP, MP4 |
| H.263 | H.263 Video | 3GP |
| HEVC (H.265) | High Efficiency Video Coding | MP4 |
| MP4V-ES | MPEG-4 Video Elemental Stream | 3GP, MP4 |
| MPEG-1 | MPEG-1 Part 2 Visual | MPEG, QuickTime |
| MPEG-2 | MPEG-2 Part 2 Visual | MP4, MPEG, QuickTime |
| Theora | Theora | Ogg |
| VP8 | Video Processor 8 | 3GP, Ogg, WebM |
| VP9 | Video Processor 9 | MP4, Ogg, WebM |
Optimize the video’s dimensions and aspect ratio for the page layout
Another important aspect of optimizing background videos is the video dimensions.
Here are some tips:
- Resize the video: If the video is larger than the display area, resize it to match the dimensions of the container or the screen size. This can help reduce the file size and improve loading speed.
- Consider responsive design: Implement responsive design techniques to ensure that the video adapts to different screen sizes and devices. This can help optimize the video dimensions and improve the user experience.
Lazy loading for video, including CSS background
Lazy loading is a technique that delays the loading of non-critical elements, such as background videos, until they are needed. This can help improve the initial loading speed of your website. Lazy loading can be implemented using JavaScript libraries or plugins specifically designed for this purpose.
To lazy load a video, audio or image with the additional improvement of triggering loading when the video, audio or image stays for a minimum of 2 seconds in the viewport, read article Improved Lazy Loading for Image, Video, and Audio. This solution not only lazy loads but also prevents images, videos, or audio from loading when the user is fast-scrolling the content and the media isn’t visible for at least 2 seconds in the current viewport.
However, it is worth mentioning that lazy loading and playing video using the CSS background property isn’t available, but it can be mimicked using the container element and the video element absolutely positioned. You can see a workable example for lazy loading image, audio and video, including CSS background.
Preload the video
Use the preload attribute to indicate that the video should be preloaded before it is played. This can help reduce buffering time and improve the overall loading speed.
preload="metadata" with caution, because sometimes quite a large amount of metadata is downloaded, which you can see in the developer console, network panel.See the example where there are 66 videos on the page with preload="metadata" and see how much data is being downloaded anyway.
Use a poster image
Set a poster image for the video, which is displayed while the video is loading. This can provide a visual placeholder and improve the user experience during the loading process.
Use a video hosting platform that supports adaptive bitrate streaming
Hosting your videos on dedicated video platforms like Vimeo can help improve loading speed, as these platforms are optimized for video delivery and can handle the bandwidth requirements more efficiently.
Comments