Video Optimization Guide For Your Website: Quality & Speed

Yes, since including your website in your video marketing strategy has multiple business benefits, which I’ve listed below: 

• Captures your target audience’s attention — Alongside impactful written content and eye-catching website imagery, videos add another layer of interest to your website. A short, snappy video with a strong hook can grab your audience’s attention and generate further interest in your business.
• Builds trust with website visitors — With video content, you’re not just telling, but showing. For example, you might use a video to demonstrate how a product works on a listing page, or post a “meet the team” video on your homepage to forge an emotional connection with your audience.
• Video SEO can improve page rankings — If the videos on your website are SEO-friendly, you could boost your webpage visibility on search engines like Google. This will improve your website traffic, since more users will be able to find your website online.
• Product videos can increase conversions — Customers may hesitate from purchasing a product if they don’t have enough information to make an informed decision. With engaging video content, you can showcase a product’s best features and persuade shoppers to make a purchase.

When you embed a lot of videos on your website, the last thing you want is for them to impact your page load speeds. According to our website load time stats, pages that take over 5.7 seconds to load can make your conversion rates drop below 0.6%, so you need to get your videos up to speed!

For effective optimization, you need to know about bitrate, which is the amount of video data (measured in bits) that’s transmitted to the viewer each second. 

Typically, higher bitrates will result in a higher quality video, but this doesn’t mean you should always opt for the highest bitrate possible. For example, if your website lacks the capability to accommodate high bitrate videos, your on-site videos won’t load quickly anyway.

That’s why you need to identify the right type of bitrate for your website.

What Are the Two Types of Bitrate?

There are two key types of bitrates to choose from: variable bitrate and constant bitrate. I’ve outlined the differences below.

Because variable bitrates take up less space, this is an ideal bitrate for your website’s videos. Not only will it adapt to your video content, but it’s less likely to impact your page speeds.

What Bitrate Should You Use?

To decide on what bitrate to use, you need to think about the relationship between bitrate and video resolution. Video resolution is the number of pixels in a video frame and will impact the clarity and quality of a video on your website.

You can use the table below to decide which bitrate to use for each resolution type and to improve your website speed. Before you begin, please note that this table is YouTube-specific, so you’ll need to upload your videos to YouTube before embedding them on your different webpages.

For additional help, here are a few tips to help you decide on a bitrate for your video content.

• For YouTube videos, the standard video resolution is around 1080p, which leads to a high-quality video. YouTube will automatically create lower quality versions of that video, giving users the option to select a lower quality if needed.
• Use a device and browser that supports VP9 if you have the equipment to film higher resolution video. This is Google’s YouTube-specific video coding platform designed for high-resolution videos.
• Double check your website’s available bandwidth when embedding YouTube videos on webpages. If it’s limited, you’ll need to pick a smaller resolution and reduce your bitrate.

The way that videos appear on your website can make or break the user experience. If your videos continuously buffer, are intrusive, or are difficult to pause or turn off, website visitors may feel frustrated and leave a webpage altogether. This can also impact your page rankings, since Google’s Core Web Vitals penalize websites that don’t provide users with a good page experience.

Because of this, you need to keep users in mind when crafting your webpages. Here are a few pointers to consider:

• Don’t loop video content — Endless video loops aren’t just a drain on CPU, but they can be annoying for your website users, especially if they can’t turn them off.
• Place videos wisely — You need to strategically place videos on your website in a way that makes sense for the user journey. For example, adding an introduction video to your “About Us” page, or adding product videos to your listing pages.
• Give users control — Depending on a user’s needs, they may want to interact with your video content in a specific way. They might want to press pause, increase the playback speed, or turn on captions for better website accessibility. If you give website visitors this option, they’re more likely to feel satisfied when browsing your webpages.
• Think about mobile users — According to Statista, mobile devices account for 62.76% of the total global online traffic, so your website’s videos must be optimized for smartphone users. When you next audit your website, test how it appears in mobile view and check that your videos are responsive on different devices.
• Be wary of pop-ups — Too many video pop-ups on your website can feel intrusive and overwhelming for users. They can also slow down your website, so keep them to a minimum.

An important video optimization step is optimizing your files so they’re ready for your website. Each type of file has its own set of characteristics that dictate how easy it is to view and distribute your videos, and help with the optimization process. The image below showcases some of the most popular formats to consider: 

Out of the four video file formats listed above, I recommend MP4 as the best file format for your website. It’s universally compatible with a wide range of devices and can play high-quality videos while maintaining a small file size — keeping your website as speedy as possible!

Compressing Your Videos

If you find that your video files take up too much space on your website, or are slow to load, you may need to compress them to reduce their file size while maintaining video quality. Fortunately, there are free video compressors you can use. Here are a few of my favourites: 

• FreeConvert — A browser-based video compressor helping you quickly compress videos in bulk
• VEED — A video editor tool that’s fantastic for changing video format and resolution (free plan, but paid plans available with more features)
• Any Video Converter — A download compressor that integrates with video streaming accounts like YouTube, Vimeo, and Dailymotion (free plan, but paid plans available with more features)

Once you’ve found a suitable tool for your needs and start compressing your video files, remember to check their playback quality afterwards. Your aim is to find the sweet spot between a reduced file size and a high-quality video that’ll impress viewers.

Using a CDN (Content Delivery Network)

To help your website run faster and improve video loading times, I suggest looking into a content delivery network (CDN).

These networks put less stress on your website server, since they temporarily store cached copies of your website’s content on servers from around the world. When a user wants to watch a video on your website, the geographical server closest to them will deliver that content.

Getting a CDN depends on how you’ve made your website. For example, website builders like Wix and Shopify already come with a built-in CDN. But, if you’ve made your website on a platform like WordPress, you’ll need to choose a suitable hosting provider that comes with a CDN, or get a cloud CDN installed like Cloudflare.

Before you embed a video on a webpage, you need to make sure that you’ve prepped your website first. Follow the four steps I’ve listed below for video optimization success.

1. Check Your Hosting Provider

The type of hosting provider you’re with could impact video performance on your website, so I recommend double checking your host to see if it’s having any impact on your website’s overall speed. 

Common hosting provider types you’ll come across include:

1. Shared hosting — If you’re on shared hosting, other websites will be sharing a single server with you, which can slow down your website speeds. Though it’s a more affordable form of hosting, you may want to upgrade if your website is struggling to accommodate videos.
2. VPS hosting — A step above shared hosting, VPS hosting is when you share a server with other websites, but you also have your own virtual server with extra resources and space. It’s speedier and more expensive than shared hosting.
3. Dedicated hosting — Typically pricier than shared and VPS hosting, dedicated hosting is when you have exclusive use of a server for your website. It’s expensive, but fast.

2. Cut Back on Plugins

Do you have a lot of plugins on your website? Though they’re an easy way to add further functionality to your website, they can slow your webpages down if you’re not careful. To better prep your website for video optimization, I suggest going through all of your plugins and see if there are any that you can afford to get rid of.

3. Be Mindful of Fonts and Image Files

Other website content, like fonts and image files, can also slow down your website. For example, if your website contains a lot of different fonts or you haven’t optimized your images properly, your website speed and performance could suffer. To avoid this, reduce the number of fonts you’re using (or switch to fonts that need less processing power) and compress your image files.

4. Convert to HTML5

Whenever you see webpage content on the internet, like video, it’ll be formatted through a coding language like HTML. Today, HTML5 is the industry standard for all websites on desktop and mobile devices, so I recommend converting your videos to HTML5 before embedding them on your website. 

For this to work, you’ll likely need to use a HTML5-supported video format like MP4 since it works with all browsers. But formats like WebM work too and are supported in Chrome, Firefox, and Opera.

How Do I Embed Videos on My Website?

With these four steps under your belt, you’re now ready to embed videos on your webpages without them impacting your website’s performance.

If you’re not using a website builder, you’ll need to go into your website’s HTML code and embed your video code there. For best results, you’ll need the video’s code added to the exact spot where you want it to appear.

However, most website builders will have a handy little tool that allows you to place a video without using code. All you need to do is upload your video into your media library and insert it into your template – usually a simple case of dragging it into position. Some of the best website builders will have SEO tips and tools to help optimize the video too.

• Want some more top video optimization tips? Check out our interview with a business owner below:

Advice from Experts: Cloud My Biz

Mike Walsh

CEO of CloudMyBiz since 2016, Mike spent his first five years with CloudMyBiz as a Project Manager and later Director of Operations. He got his first taste of Project Management at Harbor Freight Tools building out their IVR for their customer service and inbound sales lines.

What are some key ways to optimize videos for a website?

The key ways to optimize video for websites are to use the right file type, use data compression tools, prioritize mobile, employ a content delivery network, and convert videos to HTML5 specifications.

What are key ways to optimize for YouTube?

For YouTube, the best ways to optimize are to create a good title with keywords, use appropriate tags, write a compelling description, use an engaging thumbnail, and add closed captions.

What are some tools you use to optimize your videos?

Tools like Tubebuddy and Handbrake are great for beginners because they’re super user-friendly.

Tubebuddy is a free browser extension that lets you manage your channel easily. With it, you can back up your channel and copy annotations.

Handbrake lets you compress videos without losing quality.

Do you want to create live streams to connect with audiences on your website? You’ll need to consider live stream optimizations. Just like putting a pre-recorded video on your website, you could run into similar problems like slow loading speeds or low quality recording.

To avoid making any major live stream mistakes, I have some simple solutions and general tips to keep in mind:

1. Do a practice run before you’re scheduled to go live and check that all equipment, sound, lighting, and cameras are functioning properly
2. Create a sense of familiarity by being consistent with your content, like having a catchphrase that you would naturally say to ease viewers in
3. Check your internet bandwidth to see if it’s stocky enough to take on the live stream
4. Consider switching to an internet cable connection rather than WiFi, because if you have a cut in WiFi then your audience could be left hanging
5. Remember to answer user questions first, since that’s what your audiences will be eager to hear
6. Shut down any unnecessary applications when streaming
7. Adhere to community guidelines of the platform you’re streaming on
8. Create titles that are specific to the content you’re creating, so viewers know what they’ll be watching
9. Avoid using adult language in the content
10. Have fun with it!

Looking for some additional video optimization tips to keep your website running smoothly? My top tips will get you started:

• Optimize your thumbnails — On a webpage, thumbnails typically load before the video itself, so you need to make sure that you’ve optimized them too. Always compress your thumbnails first and check that they still look clear and high-quality before publishing. 
• Look into lazy loading — Lazy loading is when a video loads on a webpage only when it’s needed, which minimizes page load times. For example, if a video is located in the middle of your homepage layout, your video will only start playing when a user has scrolled down to that section. 
• Add subtitles to all your videos — To provide your audience with a great user experience and improve accessibility, remember to add subtitles to your videos. That way, hearing impaired users will still be able to understand the contents of your videos, while some watchers may be in a loud area and want to view your content with the sound off. 

Now that you know the ins and outs of video optimization, you can start adding engaging videos to different webpages without slowing down your website’s performance. Most importantly, your target audience will benefit from these changes, which can also give your business’ performance a little boost!

If your video content is engaging, accessible, and enhances the user experience, website visitors are more likely to revisit your page, share your content with others, and potentially convert. So, as you optimize your videos, think about how users will be interacting with your website and whether your videos are enhancing their experience or not.

• Looking for another way to optimize your website? Check out our guide to voice search optimization and prep your webpages for voice searches