Optimizing Shopify Videos for Faster Load Times and Enhanced Quality

When I walk into my nearest H&M store, I can check out the entire catalog and try on anything I like.

But when I visit the H&M store online, I can only see pictures of models posing in different products. And that’s a bummer because:

• I don’t have the comfort of trying on clothes I want
• I can’t check out a video to see how they’d look on me

If you’re an eCommerce brand building and scaling your Shopify business, you can’t afford to make this mistake.

You have to give online shoppers a closer look at your products with high-quality videos and help them make confident purchases. But the key to unlocking higher conversion rates with videos on your store is in video optimization.

Let me tell you why exactly you should optimize your videos and share six best practices to level up your website performance with optimized videos.

Do you really need video optimization for your Shopify store?

I know what you’re thinking—what’s wrong with simply uploading videos to my Shopify store without the extra step of compression?

Optimizing your Shopify videos may seem like a hassle, but it can directly impact your revenue. Here are four critical reasons why you should invest time and effort in video optimization.

• Maximize shopper engagement: First impressions can make or break your Shopify business. And we all know what a big turnoff slow-loading videos can be. By compressing your videos, you can load videos quickly and give first-time visitors (or repeat shoppers) a seamless website experience.

• Optimize for varying internet speeds: Most people shop from their mobile phones, and internet speeds can vary based on where they’re located. Compressed videos will load quickly, even with a slow connection. So, you can remove this point of friction from your eCommerce store and give buyers a complete glimpse of your products.

• Better search visibility: Page speed is a decisive factor in Google’s page experience evaluation. In simple words, compressed videos create fast-loading pages and lead to a smooth page experience. These pages have a chance of ranking higher on search engines like Google. The result? Higher visibility and more traffic from organic search.

• Higher conversion rates: You only have a few seconds to capture a new visitor’s attention and convince them to check out your products. Without video compression, your videos won’t load quickly enough to influence these visitors. But fast-loading videos can intrigue shoppers and nudge them to make a purchase.

That’s what Carl Weische, a CRO specialist for D2C brands, believes. He explains how optimizing videos helps load pages quickly and improves conversion rates.

6 video compression tactics to enhance your store’s user experience

Time to pull up your sleeves and get to the real work now. There are a few ways you can optimize Shopify videos to improve your website loading times and the overall user experience.

Let’s break down the six best practices for video optimization.

1. Select the right format and convert videos

The easiest way to optimize videos for your eCommerce store is by choosing the right format. You can choose any of these video formats depending on where you’ll post this content:

• MP4: offers a high compression rate for fastest load times
• AVI: popular for Windows devices and offers high-quality videos
• HTML5: supports native video playbook within most web browsers
• MOV: purpose-built for Apple devices and supports most web browsers
• ASF: popular for streaming videos anywhere and compatible with Windows
• Matroska: open-source format similar to MP4 and supported on most browsers

Shopify’s guidelines mention that you can only upload videos in the .mp4 and .mov format. So, you have to use tools like Handbrake or Adobe Media Encoder to convert your videos into any of these formats.

2. Set a maximum resolution limit

Video resolution directly impacts the file size—the larger your video’s resolution, the larger the file’s size. But choosing the right resolution is often a trade-off between quality and loading speed.

While high-resolution videos offer crisp video quality, they can take a few extra seconds to load since the file is pretty big. On the other hand, low-resolution videos load quickly, but they don’t offer the same quality because the file size is small.

Since Shopify allows a maximum of 4k video resolution, you can easily upload a high-definition video. However, you should set 1080p as your maximum resolution limit to reduce the file size.

To change the video resolution, use tools like Adobe Premiere Pro, Shotcut, or any video editing tool and upload your video. This will tell you its original resolution. Now, you just have to export it and choose 1080p as the resolution for downloading the optimum video file.

3. Minimize your videos’ bitrate

Bitrate is a technical term that defines how much data it takes to process every frame in your video. The higher the bitrate, the better your video will look because more frames are being processed per second. And a lower bitrate means fewer frames are loading every second, leading to blurry or low-quality videos.Image source

But a higher bitrate also means you need more data to load a video. So, if your shoppers have a slow internet connection, your videos will simply not load.

As a video optimization best practice, you should minimize the bitrate without compromising the video quality depending on the resolution. For a 1080p video, a bitrate of 5,000-8,000 kbps would work well and for a 720p video, 2,500-4,000 kbps is enough.

Here are a few tips to choose your video bitrate:

• Keep your videos under Shopify’s suggested file size of 20MB
• Experiment with different bitrates to balance video quality and file size
• Avoid adding fast-moving shots since they won’t load properly at low bitrates
• Optimize your audio bitrate as well to reduce the overall file size

Don’t forget to review the final output and test it for quality. You can check how the video loads on different screens at varying internet speeds.

4. Pick the right codec for maintaining video quality

Codecs allow you to turn a video into a smaller file and export it in your preferred format. It’s one way to compress videos for fast loading speeds.

The H.264 codec is the perfect choice for eCommerce videos. It’ll load videos quickly without spoiling the quality.

Depending on the video compression tool you use, you’ll see various options within the H.264 codec. There’s not much difference between these options, but you can try them to see if the output is better in any one of them.Note that even H.265 is a more efficient codec, Shopify doesn’t support it yet and it’ll not load videos with this codec.

5. Apply lazy loading and autoplay

Lazy loading ensures that your videos load only when they appear on the screen. So, if your online store has a video toward the middle or bottom of the page, it’ll only start loading when visitors scroll down to that part of the page.

Instead of loading all the content simultaneously—which naturally takes more time, lazy loading processes each element when needed to reduce website loading times.

You can also apply autoplay for these videos to maximize engagement. Visitors don’t have to click on the play button to watch a video. It’ll automatically start playing when people scroll to the right section of the page.

6. Compress videos for a smaller file size

Video compression is a popular way of optimizing content for eCommerce websites. You can use cloud-based compression tools like CloudConvert and Clipchamp to:

• Reduce the video resolution
• Convert to the right format
• Adjust the video bitrate

These tools will help you adjust all the elements we discussed above to minimize the file size. You can also outsource your video compression efforts if you want to do it at scale.

For example, when True Classic wanted to upload videos to over 700 product pages on their website, they worked with Videowise to compress all assets and achieve a strong page speed. Videowise help them upload high-quality videos with:

• Asynchronous, small-sized .JS scripts of just 37kb
• Adaptive bitrate streaming for consistent streaming even with slow internet
• Lazy loaded video widgets for loading videos quickly as soon as viewers click play

Read the case study

Create more delight for shoppers with optimized videos

If you run a Shopify business, you can’t sleep on the potential of videos anymore—especially when 85% of shoppers rely on video to make purchase decisions.

But you also can’t create a great video, upload it directly to your online store, and call it a day. If you don’t optimize these videos for fast load times, they won’t help your buyers or your business.

That’s why you need to balance quality with the right file size and format to optimize all videos for a seamless user experience. Save this quick guide to make a checklist of the exact factors you need to take care of when compressing videos.