Grow your CSS skills. Land your dream job.

How To Fix Video Slowing Down Your Page Load Time

Published by Chris Coyier

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.

Comments

  1. Good solution. I’ve run into the same problem and solved it the same way.

  2. Great post. Could you throw up a link to the video player that you found?

  3. Can you put

    into the movie.html as well?

  4. That’s the best idea when you hand-code players’ object element plus you make sure it’s supported across browsers. But if you just want the job done, use SWFObject. Result – pretty much the same. :)

    And yeah, I know embed tag is plain wrong – I’m a perfectionist myself. ;)

  5. I believe SWFobject doesn’t wait for all the images to load up, just the DOM. But I could be wrong?

  6. Chris, I see you want with the minimal approach we discussed. But I would like play a little devils advocate here.

    What if the person does not have JavaScript enabled?
    What if there is an item on the page that never completely loads?

    First one’s easy

    Second one can be a bit complicated but I think the easiest is to put a setTimeout in there somewhere with an arbitrary time and if the page does not load before that time, execute the movie load, if it does, kill the timeout.

  7. I guess I would assume with #1 that if you don’t have javascript enabled you probably don’t have what is required to watch the movie anyway, so it’s best it doesn’t try to load.

    #2 I hadn’t though about. I guess about a 30-second timer would do it. Give the page plenty of time, but not long enough that people would give up on it (if they really wanted to see it)

  8. My bad, there was supposed to be code in my post:

    That would be the fix for no JS.

  9. Ok, looks like the code tags not working well, basically I am trying to say wrap an embed with the noscript tag.

  10. Great post, very useful for my current project.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".