8 Video Optimization Tips for Faster Loading Times
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. This guide to video optimization explains how to make sure your multimedia content is increasing conversions instead of driving away users.
Why is video optimization important?
Offering multimedia content is a great way to keep users engaged, which is why more developers are adding videos to their websites. The size of the average web page grew from about 1 MB to over 3 MB between 2011 and 2017 thanks largely to an increase in video content.
The size of the average web video also grew from 204 KB to 729 KB in just the past two years. If you have a lot of video content on your website, then you can achieve massive performance improvements by following some video optimization best practices.
Which video formats are best for the web?
Thanks to their ability to pack high quality videos into small file sizes, MP4 and WebM have become the standard formats for platforms like YouTube and Vimeo. MP4 videos are supported by all browsers while WebM is currently only fully supported by Chrome and Firefox.
WebM files also tend to be lighter than MP4 files, but MP4 videos look slightly better on mobile devices.
Introduction to video optimization for websites
Delivering high quality video content to users is a two-step process. You must:
- Optimize the video file so that it has a minimal effect on page speed.
- Optimize the web page to properly embed and display video content.
Video file optimization for web pages
For best results, follow these tips before adding videos to your website:
1. Use data compression tools
Data compression tools like Blazemp and HandBrake reduce the size of video files without degrading image quality. 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.
2. Convert to HTML5 supported formats
A major advantage of HTML5 is that developers can now 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.
3. Remove audio from muted videos
If you have a hero 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.
4. Stream directly from your server
In the dark ages of the internet, video files had to be fully downloaded to the user's device before they could be viewed. Today, streaming technology allows videos to be delivered in small chunks that are ready for playback in the user's browser. Medium has a helpful article that explains how to optimize video streaming on your website using HTML5 tags.
5. Use a content delivery network
A CDN is a network of servers that store cached copies of your site's static assets. In addition to improving redundancy, CDNs ensure faster content delivery as the content is served from the nearest edge server. This is essential for large files such as videos. That way, users don't have to wait forever for your videos to download and buffer.
Using a CDN can drastically improve your website's overall performance. Check out our video CDN solution to learn more about how KeyCDN can optimize your video delivery.
Web page optimization for video content
Selecting the right video format and optimizing how data gets delivered is a good start; however, to ensure a smooth user experience, your website must also be optimized to support high quality videos. Here are some tips:
1. Specify the video size
In your HTML or CSS, be sure to define the width and height of videos so that the browser can allocate the necessary bandwidth with no extra work.
2. Defer loading videos until page load is complete
If you have a video that plays automatically when a user arrives on the page, defer it from loading until the initial page load is complete to achieve a smoother user experience.
3. Prioritize mobile users
More people are accessing the web from tablets and smartphones every day, so websites that aren't optimized for mobile face a major disadvantage. Follow the principles of responsive web design to make your website adaptable to different screens sizes and display resolutions. Your website must also be able to detect the device's orientation in order to properly display video.
Even if you're an expert frontend developer, designing pages that look great on all screen sizes can be challenging. You could build a separate version of your website specifically for mobile devices, but that would double your maintenance duties. Fortunately, there are usually easier ways to accommodate mobile users.
For example, let's say you have a hero video on your home page, but it doesn't look so great on mobile devices. You can prevent your hero video from downloading on narrow screens by adding this code to your CSS:
@media screen and (max-width: 650px) {
#hero-video {
display: none;
}
}
Video optimization for SEO
Platforms like YouTube are great tools for gaining exposure, but if you want to boost your website's ranking on Google, then you should host your video content on your own domain. When you upload videos to YouTube with a link to your website in the description, search engines give preference to YouTube. Therefore, it's possible that someone could search for your company name on Google and end up on YouTube rather than your website, which is a scenario you want to avoid.
- Create metadata to make your videos easier to index.
- Video titles should be descriptive instead of generic. Keep titles short, but pack your description details with keywords.
- Picking the best keywords may require some research, but any information you provide will improve your chances of appearing in search results.
- Don't forget to choose an appropriate thumbnail.
- Complete these steps after data compression so that your beautiful metadata doesn't get wiped out during the process.
Of course, self-hosting video content requires more resources than embedding a video uploaded elsewhere. Invisible Harness has an insightful blog post about the pros and cons of self-hosting videos.
If you have large video files and don't want, or can't, host them on your origin server, use upload them to a separate storage cluster such as a KeyCDN Push Zone or an Amazon's S3 bucket.
Does your website really need videos?
The benefits of having video content on your website usually outweigh the cost added to your page load. That said, if your video content isn't adding value to the user experience, then it's just wasting a lot of resources.
In such instances, the performance boost you'd get from omitting videos altogether might be more beneficial to your bottom line. Use multimedia content strategically so that you don't overwhelm new visitors. Regularly reevaluate all of your multimedia content to make sure each element of your website serves a purpose.
Summary
As long as you optimize your media files and your page design, adding videos to your website should have minimal impact on performance. Whenever you make changes or add new content to your website, take note of the effect it has on your conversions. Experiment with placing different videos in different places. Video optimization is relatively easy; making videos that maintain users' interests is a much more difficult task.