Magento Adding Youtube videos to homepage

We’ve all added youtube video’s to a cms page, but what if it’s going on the homepage?
Be prepared for slow page loads.
One of my client’s recently added a youtube video to the top of their homepage. It really fit in with their site’s products, and was an important part of their homepage.
But, when I checked page load times, I was surprised to find that the video was adding a whole bunch of overhead to the page.
In fact, page load time was 5.7 seconds on a cable connnection using Webpagetest.org.
You can see all the overhead associated with a framed video on this screenshot of individual assets being loaded to support iframe.
iframe

In order to avoid all this overhead, I am going to use a bit of google’s own js goodness to only show a thumbnail of the image, along with an overlay play image.
That way none of the overhead will be loaded until the video play button is clicked.
Here are two code examples, the first is the typical iframe method.
The second is using js, which reduces page load time significantly.
[download id=”2100″]

After modifying the homepage video, I retested and was able to reduce page load time by almost 4 seconds, to 1.59, which is pretty quick for a magento store.
I would recommend this method whenever adding youtube video’s to either cms or catalog pages.
It’s the best way to keep those page load times down. And we all know faster page loading means more sales.

This entry was posted in Magento. Bookmark the permalink.