How To Fix Video Slowing Down Your Page Load Time

Avatar of Chris Coyier
Chris Coyier on (Updated on )

I have a client who demanded an auto playing video on their homepage. Normally our job as designers is to translate our brain’s first thoughts:

“OMG. WTF? Are you trying to drive people away never to return?”

Into something more like:

“I’m not sure that is the best idea right now. Some people find autoplaying video on websites annoying and our goal is to keep people on the site so they can discover more about you.”

But sometimes it comes out like:

“Yessum. Right away, sir.”

Ah well, can’t win them all. So, I did it. I even found a sweet little flash video player that did all the cool stuff people like in video players like scrubbing, fullscreen mode, and volume control. I even won a minor battle in muting the video by default so at least people didn’t get blasted with unwanted sound.

But then a few days later I get the call:

“Why is our homepage loading slower?!”

Again with the brain:

“Uhm, because there is a frigging 5MB video on your homepage now and even though it is streaming it still is taxing on your internet connection and it makes everything else load slower.”

Which should be translated into:

“I’ll look into that right away. I suspect it has something to do with the video that we added to the homepage, maybe we are going to rethink that.”

Which comes out like:

“I’ll get on that right way. Sorry, sir.”

 

Fixing the problem

So as our brains so quickly deduced, the problem here is that putting such a huge file on our page will slow down the other page elements that are also trying to load at the same time. The solution then, is to ensure that the video doesn’t load until after the rest of the page is loaded.

In order to do that, we are going to remove the movie code from the page entirely. Only to add it back dynamically through javascript. Technically, I suppose, AJAX. The benefit of doing this through javascript is that we are able to wait for the event of the entire page being loaded before doing to dynamic adding.

First, we make a place on our page for the movie. An empty div will do:

<div id="movie-area">
</div>

This way we can style that area with CSS. This is a good idea so when the movie does get added, it doesn’t abruptly move things out of the way to make room for itself. We’ll also make the area black, much more movie-like:

#movie-area {
	width: 320px;
	height: 240px;
	background: black;
}

The other reason for the empty div is so that we have somewhere to target with the javascript as the area to plug with the movie code. Let’s write the simple javascript do do the job:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(window).bind("load", function() {  
	$('#movie-area').load('movie.html');
}); 
</script>

I am using jQuery to do this. jQuery just makes this job much easier. The above code, in plain english: “Wait for the entire page to load, then find the div with the id of “movie-area”, then go get the file “movie.html” and insert it’s contents inside the found div. The “movie.html” file will of course include whatever the markup is for the video I want. Likely some kind of object or script.

Works like a charm.

VIEW DEMO
Note: the demo has a large image above the video. This image will take a little bit to load – so you can see how the video will patiently wait for that to be done before loading.