I have been wondering how much time does YouTube embed player cause me to load even I don’t play it. I watch at least a few videos a day on YouTube and sometimes I embed videos in my blog. So, I must ask myself, how much time? I believe many people have felt Adobe Flash Player isn’t a cheap player at all, it uses quite amount of resources. Try to scroll down (Page Down) while YouTube Blog is loading, you will see what I mean. Even after Square Preview released and it got improved significantly, still, you have to pay some.
I decided to investigate. YouTube recently switched to <iframe/> as default embed code, you still can choose the old embed old. So I used the new code and Chromium 8.0.552.224 to test (Firebug does not supports Firefox 4 yet).
The following code only contains the <iframe/>:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title></title> </head> <body> <iframe title="YouTube video player" width="853" height="510" src="http://www.youtube.com/embed/ahCwBBndlVY?rel=0&hd=1" frameborder="0" allowfullscreen></iframe> </body> </html>
The loading time is 720ms, sum of loading times of
- the page self,
- www.youtube.com/embed (~300ms),
- a css,
- a gif,
- a js,
- a swf (~273ms),
- a xml, and
- a jpg.
It’s clear how much loading a YouTube player will cost you. Basically, almost 600ms for loading the player. I added another video’s embed code, it took 1.02 seconds, then third video, 1.45 seconds. It’s safe to say the loading time is ~0.5 multiply by the number of videos.
How can we avoid? I thought maybe we can load the player later if the visitor wants to watch. Just an empty box with hint, that’s a good idea, isn’t that? Not everyone is interested in playing a video in your stuff. At first, I wrote this simple code,
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title></title> <style> .yt-loader { font-size:2em; text-align:center; } </style> <script> function load_yt(div) { var yt = document.createElement('iframe'); yt.title = "YouTube video player"; yt.width = "853"; yt.height = "510"; yt.src = "http://www.youtube.com/embed/ahCwBBndlVY?rel=0&hd=1"; yt.frameBorder = "0"; yt.setAttribute('allowfullscreen', ''); div.parentNode.replaceChild(yt, div); } </script> </head> <body> <div class="yt-loader" style="width:853px;height:510px;border:1px solid black;-webkit-box-shadow: 1px 1px 5px black;" onclick="load_yt(this)">Click here to load</div> </body> </html>
Visitors can click to load player if they really want to play. The loading time is 1.25ms, or 0.00125 seconds. Of course, it shouldn’t take much time. It’s just a page with a <div/> and simple style and a JavaScript function. But there is an issue, that isn’t attractive at all. Yeah, I did add box-shadow, that wasn’t really helpful. What visitors really want to see is a thumbnail. We look first, then read. Well, most people don’t do that latter at all.
I have few experiences with YouTube API, I know there is thumbnails in response data. Therefore, a better version,
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title></title> <style> .yt-loader { font-size:2em; text-align:center; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script> function load_yt(div) { $yt = $('.yt-loader'); $yt.replaceWith($('<iframe title="YouTube video player" width="853" height="510" src="http://www.youtube.com/embed/ahCwBBndlVY?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>')); } function init_yt() { $yt = $('.yt-loader'); $.getJSON('http://gdata.youtube.com/feeds/api/videos/ahCwBBndlVY?v=2&fields=media:group(media:thumbnail)&alt=json-in-script&callback=?', function(data) { var tbs = data.entry.media$group.media$thumbnail; var tb; for (var idx in tbs) { tb = tbs[idx]; if (tb.yt$name == 'hqdefault') break; } $yt.append($('<img/>').attr('src', tb.url)); }); } $(init_yt); </script> </head> <body> <div class="yt-loader" style="width:853px;height:510px;border:1px solid black;-webkit-box-shadow: 1px 1px 5px black;" onclick="load_yt(this)"><div>Click here to load YouTube player</div></div> </body> </html>
This version retrieves a thumbnail of the video via YouTube API. The loading time is 284ms, jQuery 1.5 takes ~30ms, API request takes ~200ms, and a jpg takes ~10ms. It can be automatically played using YouTube JavaScript Player API after visitor click. If you don’t want to use jQuery, you can cut 30ms out.
I don’t know if anyone has also noticed such time waste and resource waste. Maybe someone has written a library to do similar job. Anyway, I am thinking something like…
<script src="blah.js"></script> <script>blah_embed('YOUTUBE_VIDEO_PAGE_URL', width, height, div_id);</script>
, or a function uses document.write() (which I dislike very much),
<script src="blah.js"></script> <script>blah_embed('YOUTUBE_VIDEO_PAGE_URL', width, height);</script>
, or a <iframe/>,
<iframe src="http://example.com/embed/..." .../>
Just replace youtube.com with example.com, where provides this kind of function. Then the script will render a nice video thumbnail with text and wait visitor to click.
But then I think, since <iframe/> is default embed code, YouTube can already make this happen. If they did, the world would be greener.
Hi and thanks for this post. I try to insert code in my template and it give me error. So I saw your page source and copied htm code. It worked. As well as I could see in my demo article youtube vídeo where I appreciated on top of the vídeo thumbnail "Click here to load youtube player". I saw your article http://blog.yjl.im/2012/04/sotd-four-gate-you-by-aurorous.html and I would like to have similar design of the player. I blog and make video almost every day and I really appreciate if my postpage load faster.
ReplyDeleteThanks very much http://www.vladimirklimsa.com