You already know, passing Core Web Vitals is no easy task — and it is 10x more difficult on a website that is playing videos.
So I figured many of you out there would be interested to know how a website with a large hero video is getting a passing score on Core Web Vitals and and what I would further do on to optimize this site.
Before we dive in, let’s take a look at the website itself. You can find the URL in the screenshot below, which displays a passing score in Core Web Vitals despite a less-than-optimal page performance rating.
We can see it is clearly passing the Core Web Vitals, but the page performance score is bad.
The first important thing to note here is that the Core Web Vitals Assessment is the result of the aggregate user data over a a 28 day period; not at this moment in in time.
A quick word on large videos on site…
I don’t like them or use them. Agencies and business owners (their clients) like them cause they look fancy and modern. In testing however I’ve found that they usually have a statistically significally lower rate of conversion than a page for the same offer without video sections AND they decrease page loading times.
Factors of their Core Web Vitals pass.
Upon inspecing the site there were 3 key things I undercover.
1. The site is using BunnyCDN in to serve the video. I’ve never personally used BunnyCDN but I’ve heard it recommended frequently. Most CDNs don’t serve the videos either — Bunny Does. And after reviewing the performance of this site, if you’re going to use large hero videos, BunnyCDN is a winning solution.
2. Fast hosting with Amazon Web Services (AWS). If you want to have a fast site, you need at least decent hosting. AWS is no slouch when it comes speed, but it comes at a hefty price. The lowest price I could find available in a ‘non-developer’ friendly interface was with Cloudways at $38.56 per month. I don’t see the cost as worth it here since you would get the same or faster speeds from Vultr HF at $16/m on Cloudways.
3. The code has been optimized to eliminate Cumulative Layout Shift (CLS): CLS is a key metric within Core Web Vitals, measuring the visual stability of a webpage. When dealing with videos, especially large ones, maintaining a good CLS score can be challenging. However, it appears that the site’s code has been optimized to minimize layout shifts, contributing to a positive Core Web Vitals assessment. This is something that cannot be fixed by simple plugins and requires an experienced developer.
4. They’re using LiteSpeed caching: An efficient caching system plays a significant role in improving website performance. LiteSpeed caching, in particular, is known for its speed and effectiveness when paired with a Litespeed Server (Rec A2 Hosting for low cost Litespeed with Turbopan) for server side caching. Litespeed is not needed to achieve good results, but high quality caching is. I am using WP Rocket for my own sites.
Room To Improve
Despite their impressive ‘pass’ the site is failing miserably in one area that is pretty easy to optimize for. It’s like they done a 93% job, but just said F it. Take a look.
That good ole notice of ‘serve images in next-gen formats’ that results in an estimated savings of 16.5s followed by ‘Properly size images’. Both of these could be easily fixed, which I cover in this blog post.
On that note;
combining LiteSpeed caching with BunnyCDN, fast hosting on Amazon Web Services, and code optimization to eliminate Cumulative Layout Shift (CLS) helps this website maintain a passing score on Core Web Vitals. These factors collectively contribute to a positive user experience and ensure that the website’s performance remains within the acceptable range, even with the challenges posed by hosting large videos. Remember that while these strategies are effective, ongoing monitoring and optimization are key to maintaining good page performance on a video-heavy website.