In today's digital space, videos have become an integral part of web design. They have significantly increased user engagement through interactive experiences and convey messages with greater impact.
However, along with the increasing use of videos on websites, a significant challenge arises – the impact on website speed and performance. The very elements that aim to attract and retain users can sometimes hinder their experience, leading to frustration and potential loss of conversions. As videos consume valuable bandwidth and resources, they can slow down page loading times, causing visitors to lose interest and abandon the site altogether.
The good news is that there are solutions to overcome these performance hurdles. By implementing five essential tricks, you can optimise videos on your website, striking a balance between user engaging video content and optimal loading times. These techniques will ensure that your business continues to reap the benefits of engaged users, without sacrificing the overall performance and speed of your website.
In this article, we will explore these five practical tricks that will help you maximise the business value of interested users while addressing performance issues. From simple adjustments to more advanced optimizations, we will guide you through the process of enhancing video delivery, lazy loading, and boosting your website's overall performance.
1. Format
It is crucial to utilize web-friendly formats that are optimized for the web and generally lighter when it comes to the weight. Two recommended formats for web-based videos are .mp4 and .webp.
While .mp4 is a well-established format widely supported across browsers and devices, .webp is a relatively newer format that is gradually becoming a standard. Videos saved in the WebP format tend to have significantly smaller file sizes, resulting in faster loading times and improved website performance.
💡 Quick Tip!
Save your video in .mp4 (h.264) or .webp format. Do that even if you have a desire to simply use a GIF.
While the latter is a simple format, you cannot control its playback and the quality is very limited. And yes, it’s now possible to implement a transparent video on the web (while a bit more tricky, as there are inconsistencies between HEVC and VP9 codecs support among different browsers - more on that in a future article).
2. Weight
This point is the most important one as the video weight has the biggest impact when it comes to website performance. The weight of a video refers to its file size, and directly affects the loading time of the website as it consumes bandwidth. The video weight depends on factors such as its length and quality.
To strike a balance between video size and website loading speed, it is generally recommended that shorter videos, around 10-15 seconds in length, used for hero sections or key focal points, should ideally range between 3MB and 6MB in size. However, it's essential to make conscious decisions based on your audience's expectations and the level of quality required for your specific purpose.
Consider the trade-off between file size and video quality. Optimize the weight of your videos by compressing them without compromising the visual experience. Don’t forget about selecting the right FPS (frames per second) setting, that matches the original video. If you decide to lower the FPS, do it only in case of going from 60 to 30 frames. Otherwise, you’ll degrade its fluidity and smoothness. By finding the right balance, you can ensure that your videos load efficiently, keeping your audience engaged while maintaining a smooth and speedy website performance.
💡 Quick Tip!
Keep your videos as light as possible. Find the sweet spot between size and quality.
3. Dimensions
While quality is a priority for many brands, it's important to strike a balance between high-quality visuals and optimal loading times. In this regard, we recommend a sweet spot for video dimensions is typically between 1680px and 1920px in width.
Recording videos in 4K resolution specifically for high DPI displays is generally not recommended due to a couple of downsides. Firstly, higher resolutions result in larger file sizes, impacting the overall weight of the video and potentially slowing down website loading times. Secondly, rendering such large elements on the screen can put additional strain on the browser, affecting overall performance.
By opting for video dimensions within the recommended range, you can achieve a good balance between visual quality and loading speed. This ensures that your videos retain their impact while minimizing any negative impact on website performance.
💡 Quick Tip!
Keep your videos up to 1920px in width. A rule of thumb is that for dynamic, fast-paced videos lower resolution will work just fine while very static scenes (e.g. Apple-style product shots), lower resolution might get much more noticeable.
4. Optimization
Now, let’s take a look at video optimization that addresses the issue of performance when the video has autoplay functionality. This trick is super useful especially when you have multiple videos present on a website. When one or more videos play simultaneously, it can strain the website's performance. However, there is a solution to mitigate this impact: pausing videos that are not currently within the user's viewport.
By implementing this approach, you can ensure that only video visible in the user's viewport is playing at any given time, reducing the burden on system resources and improving overall performance. It's worth noting that implementing this optimization requires developer assistance, as it involves technical modifications to the website's code.
💡 Quick Tip!
Pause videos that are not currently within the user's viewport.
5. External CDN
And last but not least - video optimization can involve utilizing external Content Delivery Networks (CDNs) for serving videos. CDNs, such as Cloudflare or Mux, offer optimised caching servers located closer to the user's destination. This enables faster delivery of video content and improved overall performance.
By leveraging CDNs, you can offload the delivery of videos to specialised infrastructure, reducing the strain on your own servers and improving the loading times for users across different geographical locations. CDNs also provide streaming capabilities, allowing for efficient delivery of longer videos by enabling users to view the content while it is being streamed, rather than downloading the entire video file.
Integrating external CDNs into your video delivery strategy can significantly enhance the performance and user experience on your website. By leveraging their optimized caching and streaming capabilities, you can ensure smoother video playback, reduced buffering times, and overall improved website performance. Consider exploring the options provided by CDNs like Cloudflare or Mux to take advantage of their video delivery services.
💡 Quick Tip!
Consider using external CDN’s for the best video delivery. As a bonus, platforms like Mux can deliver streaming capabilities. But, it’s not always a solution - you should consider it for longer videos to speed up the initial playback while avoiding it in case of short, looping clips (when a simple mp4 can be downloaded quickly and cashed in the browser).
Summary
Despite the widespread use of videos on websites, the full potential of the above optimization tips often goes untapped in many projects. Don't let your project's potential slip away - harness the power of these optimization tricks and supercharge your success!
If you or your developer is struggling with the performance issues caused by the videos, send them a link to this article or feel free to reach out to us! We’ll be glad to help!
