So here’s you: you have a website, you want to put videos on it, but you’re concerned about performance. More specifically, you’re concerned that embedding a bunch of videos on your page could negatively affect how long it takes your page to load.
Good for you! Plenty of website owners and designers don’t pay nearly enough attention to these things, but you’re a smart one. We like you.
And here’s me: I (the author), am slightly obsessive about website performance, because I live in Mexico (where I learned my trade, web design), and fiber-optic internet hasn’t reached certain parts of the country yet (darn it!). Also, data caps are a horrible thing and should be abolished.
Can you tell that I basically live my life online?
Anyway, here’s what I’ve done: I’ve gone through six of the biggest public (and mostly free) video hosting providers out there to see which ones have the most optimized video embedding code. I did it for you, and for a better internet.
The platforms I tested were YouTube, Vimeo, Dailymotion, Metacafe, BitChute, and VidLii.
Now let’s be very specific: I’m measuring the effect of embedded videos on webpage loading time, and their effect on overall page optimization. What I won’t be measuring is the performance of video playback. There are simply far too many variables to accurately measure this, at least with my home computer and budget.
All clear? Good. Let’s go.
The Testing Suite
For this test, I wanted to remove as many variables as possible. So, I didn’t bother making a site on any of the usual popular website builders. I decided to create a small website from scratch on GitHub pages. It’s quick, easy, and a little more minimalist than most websites out there. (In other words, please don’t judge the design or code.)
All pages are identical except for the code that displays the video.
Speaking of the video, I recorded thirty seconds of my cat playing on the bed specifically for this article, because she’s adorable, and should be a model.
Performance will be rated by Google PageSpeed Insights. It’s not the only performance-measuring tool out there, but it’s pretty simple. The speed rank provided also directly affects how your website is ranked overall in Google’s search algorithm, so that’s a factor to consider.
Also keep in mind that scores can change somewhat based on a number of factors, including general server performance, web traffic, and other things. All scores are approximations.
The Baseline Performance Is a Near-Perfect Score
Of course, I ran the basic webpage, with no video, through Google PageSpeed Insights to get a baseline rank, and here it is:
There were a couple of warnings because the webfont files aren’t cached, but otherwise, I got a perfect score on both the desktop and mobile tests. Woohoo!
For anyone interested in what all those numbers at the bottom mean, stick around. Those of you who just want the scores can scroll on down.
First Contentful Paint is the time it takes for the browser to load and display any single part of your page, whether it’s the logo, the navigation, etc.
First Meaningful Paint is the time it takes for the browser to load and display the “main” part of the content, such as the article, blog post, video, or whatever else.
Speed Index is the average time it takes to load and display everything.
First CPU Idle is the time it takes for the browser to say, “All right, everything’s loaded. The processor on this computer/phone can rest a while.”
Time to Interactive is the approximate amount of time until the user can start clicking around.
Max Potential First Input Delay is a measurement of what actually happens when a user starts clicking around on stuff, and how fast the page reacts. This is a lot harder to accurately calculate without user data, and I don’t have any of that for this example. It’s an important metric for real-world websites, but useless in this context.
And now, on to the proper testing…
YouTube’s Embedding Code Works Fine
YouTube is, well, YouTube. Hardly needs an introduction, right? It’s just that big, at least outside of China. YouTube is the face of online user-produced video, and everyone else is playing catch-up. The platform is also owned by Google which, as you might have guessed from the name, also makes the speed-test tool we’re using. So, the code should be decent. Let’s find out.
The page we’re testing:
The desktop and mobile results, side by side:
Well, those mobile test results took a dive.
This is probably not because of poor implementation of the video embedding, but rather because of the generally lower processing power of the average smartphone, and the lower connectivity speeds offered by even 4G networks. A 21-point drop between the desktop and mobile tests is significant but unsurprising.
Vimeo’s Embedding Code Is Very Well Optimized
Vimeo is where you put your videos if you want to be artsy. Seriously, it’s been about the art community since Day 1, and its most popular videos all seem to be highly creative short films.
The only real downside is that you don’t have nearly unlimited storage as you do on some other platforms. There’s a decent free plan, but you’ll need to pay up if you’re posting a lot of HD content regularly.
Anyway, on to the tests…
Vimeo gets a basically perfect score on the desktop, and the mobile tests follow closely behind. Well done.
DailyMotion’s Embedding Code Is Also Fine
DailyMotion is one of the veteran video platforms, founded only months after YouTube. It’s still going strong, and it seems to have an active community. The content ranges from the deeply personal to the highly commercial. How does it measure up?
A near perfect score on the desktop, with a drop-off on mobile, but not as much of a drop-off as YouTube had.
Metacafe’s Embedding Code Is Unsecured
Metacafe is pretty darned old (in internet years), as it predates even YouTube. The popular content seems to be mostly meme/clickbait-related, but then that’s what most of YouTube is these days, too. Let’s see those scores…
And we can’t.
As far I can tell, Google PageSpeed Insights just isn’t loading Metacafe’s video player, at all. This is because the embedding code isn’t set up to use SSL (a basic layer of website security) yet, and PageSpeed Insights refuses to load unsecured third-party embedded videos.
In my experience on rather slow (5Mbs) Internet, I can say that the video player feels snappy overall, but I wouldn’t use it because of the potential security issues.
BitChute’s Embedding Code Is Amazing, But…
BitChute is a fascinating project. It runs on peer-to-peer technology (like BitTorrent does) in an attempt to get away from centralized hosting servers controlled by just one company. BitChute also takes a very permissive view of free speech; so, as long as your videos aren’t illegal, inciting people to violence, or NSFW (not safe for work), you can post them.
But I’m not here to judge anything besides performance, so here it goes…
Those scores are accurate. The video player is loading. The actual video playback has been a little inconsistent, but if it’s pure page-loading efficiency that you want, BitChute has you covered.
VidLii’s Embedding Code Is Also Pretty Amazing
Everything about VidLii is a blast from the past, in terms of design. It’s very, uh… YouTube-esque, if you go back to the beginnings of YouTube, anyway. The content your videos will end up next to also feels a bit nostalgic, with some very homemade-looking stuff on the homepage. But how fast will it load on your page?
VidLii’s scores are about as good as BitChute’s and Vimeo’s, with seemingly none of the drawbacks presented by those platforms. You can’t put any ads in your videos, though, so keep that in mind. You’ll be banned.
So, Which Should You Pick for Embedding?
Assuming your videos meet all the guidelines for each platform and you don’t care what else is on those platforms, I’d pick BitChute or VidLii. If I had a budget and was making lots of artsy stuff, Vimeo would work just fine as well.
YouTube still has a lot going for it outside of embedding your videos, though. With its massive community, it’s one of the better options for achieving organic audience growth. You also have a lot of competition, but it’s easier to build an income from YouTube than it is from many other platforms.
In any case, you could always upload your videos onto a couple of different platforms, or all of them, because you never know how people are going to find you or your content. Just make sure to first read up on what each platform allows.
Last, remember that each video you embed on a webpage will have a cumulative effect on that page’s performance. In other words, more videos = slower loading. Whichever platform you choose, you probably shouldn’t embed too many videos on the same page.
For your convenience, I’ve compiled all the PageSpeed Insights scores into a quick table:
Ezequiel Bruni is biologically Canadian, legally Mexican, and self identifies as a total nerd. He’s been a web and experience designer off and on since he was a teenager, and loves sharing the kind of beginner’s advice he really wishes he’d had when he first started. He also loves video games, tacos, open source software, video games, sci-fi and fantasy in all their forms, and video games. He does not love writing in the third person.