💡 Even with advanced technology like Sharp's, every MB added to the weight of a web page impacts load times. To maximize your profitability and decrease your bounce rate, it is essential to optimize the amount of data to load. Size also matters: the longer a video, the heavier it is, and videos are one of the major sources of weight on web pages, negatively impacting performance.
The format ( .mp4 )
This format is the most universally supported by all browsers, and it is also the easiest to compress: we strongly recommend that you use .mp4 for your videos.
The ratio
Try as much as possible to upload a video whose dimensions correspond to those that will be displayed.
Unlike images, which are automatically loaded and cropped to the correct display size by Sharp to reduce their weight before they even arrive in the browser, this is not possible for videos.
The browser will first load them in full, then be displayed in the dimensions provided by your site. However, since the entire file has been uploaded, it may force users to download the entire video, even though only 1/3 of it is actually displayed on the screen.
Up to 70% of a video can therefore be downloaded for nothing, which slows down the loading of your page.
To avoid this, crop videos BEFORE uploading them to Shopify.
For example, in a square video on a product page, an uncropped 16/9 format video will cause 40% more data to load. Do not hesitate to ask our team for the target dimensions, we will be happy to help you.
Size matters!
Video resolution is also very important. Depending on where it is broadcast and its function (illustration of a text point), the resolution of the video must be adapted.
By default, for a video that is intended to be displayed in full screen, the resolution must be a maximum of 1920 x 1080. In a video displayed as content in a section, a 600 x 600 is more than enough (if it is a square ratio of course, to be adapted according to the latter).
Optimize file
The MP4 format is very good at compressing video. It is absolutely necessary to use it if you want to have the best video quality/file size ratio.
We recommend using the following site to compress your videos: https://www.videosmaller.com/ . VideoSmaller is an online service that allows you to reduce the file size of your videos without losing quality.
If possible, do not click on "Use low compression level (best quality)" which unnecessarily increase the file size. If the end result is too heavy, you can use the "Scale" option to scale it down further.
Important: if your video is only there to illustrate and you don't need the audio, don't hesitate to remove it by clicking on "Remove audio from video"
This can have a really big impact, you should see results similar to the screenshot below:
That's it, you now know how to optimize your videos to optimize the performance of your Ecommerce site!
