Reducing Page Load with Better YouTube Embeds (Is it Better for SERP? We’ll See)

For every website, we recommend providing a diverse selection of content to appeal to the many different visitors and their many different preferences, goals, and pain points.

Honestly, it’s hard to talk about this sort of thing without comparing the many different kinds of content on your website to food. So I’ll just come right out and say it: without a great spread, your website simply won’t be as appetizing to the many different people that land on it. As a provider of internet marketing and web design for B2B companies, this is something we encounter every day.

Let’s use our client, the Mobile Shop Company, for example. As a business that provides an innovative product to virtually anyone concerned with facility maintenance, the demographic is fairly large. However, considering the nature of the product and the audience that might be researching it (buyers, maintenance workers, CFO’s), video was clearly an efficient and effective type of content to really gain some ground. This resulted in a number of different videos proudly displayed on the home-page for the visitors that need them the most.

But there’s one problem with that: videos take time to load, and video embeds from Youtube can add a sizable chunk of weight to your page.

video-takes-time

While the videos helped Mobile-Shop sell more product through their e-commerce site, the downside was that the load-time for Mobile-Shop’s home page climbed far higher than we would have liked. As you may know, the loading time of your website matters. While Matt Cutts (Google’s authority on SEO) has already laid rest fears that speed would drastically impact ranking, he still acknowledges one important thing that will have an impact: user experience.

This year at Hubspot’s yearly Inbound Conference, Chad Pollit touched on this perfectly. He pointed out that “SEO is not something you do anymore. It’s what happens when you do everything right.” This business with the page-load times? Yeah, it might have an indirect relationship with search engine ranking. But more importantly, driving down page-load is simply a part of  doing everything right. While shaving seconds off of your load time might not immediately impact your search rankings, building better and more useful websites is what helps us meet our goals — and of course, a website that’s faster is easier to use. Ease of use / user experience, same thing right?

So, Cameron  found a neat little way to solve the problem with Javascript and CSS.

How to Cut Load Times and Lower Page Size When Using Embedded Youtube Videos

If you take a look at Google Plus, you’ll notice that it uses a pretty sweet little work around to load Youtube videos without bogging down the website. To put it simply, Google Plus just displays the videos’ thumbnail instead of the actual video. This not only keeps page size low and helps it load faster, it also works better for responsive websites. Here’s an example:

the "standard" embed makes over 11 requests (to google, youtube, etc) for over 550KB of data.

The “standard” embed makes over 11 requests (to google, youtube, etc) for over 550KB of data.

While the embed using Java-script that uses only the video’s thumbnail shaves this down to 3 requests and only 43KB.

If you’re a developer looking for the Javascript and CSS needed to do this for yourself, check out Amit Agarwal ‘s post on Labnol.org for more detail. Or if you’re just looking for the code, you’ll find it below.

The HTML for faster Youtube Embeds:

The Javascript for Faster Youtube Embeds

CSS for Quicker Youtube Embeds

Just add this code to your site’s CSS file to finish the process.

The Result

While it’s still too early to make any real connections regarding trends on the homepage we’re working with, you’ll notice in the screenshot below that the average session duration on the website increased from 1:36 to 2:13 after improving page load time with better Youtube embeds. That’s a pretty nice jump, which could also coincide with adding a new video to the site’s homepage — but we’re confident that a drastically faster page didn’t hurt one-bit. I’ll check back in a couple months to get a real look at the impact of this tweak over time.

session-duration-page-load-time

Running into a problem with your website running slowly or have a question for us? Don’t be a stranger!

Leave a Reply

Videos, Slideshows and Podcasts by Cincopa Wordpress Plugin