It’s all about speed! I mean, you want your visitors to stick around, enjoying your content instead of waiting for stuff to download, no? And I bet you would love Google to consider your site quick, now that speed has been confirmed to have an impact on search ranking?
“High Performance web sites”-guru Steve Souders is doing incredible work studying the impact of 3rd party content -and especially javascript-based services such as analytics and bannering- on the performance of a web site.
An entirely different type of 3rd party content is Flash video, especially YouTube embeds, but there are a number of indicators that these indeed do impact performance as well:
- opening a page with embedded YouTube can take some time when on dialup (or mobile data)
- YouTube-heavy pages tend to slow down older computers (flashblock or adblock anyone?)
- Facebook doesn’t really embed YouTube by default, but uses a placeholder with a thumbnail instead that is replaced by the embedded YouTube only when clicked
- Google Webmaster Tools “Site Performance” seems to sometimes single out pages with YouTube embeds (e.g. stating that there is a DNS-resolution overhead)
Indeed, when testing this simple page with some text and 2 embedded YouTube clips on webpagetest.org, these were the main results (full results including nice graphs here):
- (base) download complete: 0.356s for 2KB
- start render: 0.426s
- full page download complete: 3.005s for 315KB
There’s good and bad news in those figures. As could be expected the YouTube Flash embed doesn’t impact the rendering of the base page. But 2.6 seconds and 312KB just to display 2 video’s a visitor might not even bother to look at (I bet that the click-rate for embedded YouTube video is somewhere between 2 and 20%), that’s … sub-optimal?
So I threw some JavaScript at my computer to build an alternative to the default YouTube embed, the main goal being to build a Flash-less initial view with only a few lines of html/javascript which at some point people could copy/paste in their site just like they do now. And LYTE (Lite YouTube Embed) came into the world.
The main results when testing this LYTE-test-page on webpagetest.org (full results here):
- (base) download complete: 0.324s for 4KB (which is marginally faster)
- start render: 0.363s (again marginally faster)
- full page download complete: 0.803s for 35KB (leaner, meaner and faster!)
The code that would have to be copy/pasted (multi-line for clarity):
<div class="lyte" id="gnDh6PqWqD8" style="width:480;height:385;"><noscript><a href="http://youtu.be/gnDh6PqWqD8">Watch on YouTube</a></noscript>
<script>(function(){d=document;if(!document.getElementById('lytescr')){lyte=d.createElement('script');lyte.async=true;lyte.id="lytescr";lyte.src="http://futtta.be/lyte/lyte.js";d.getElementsByTagName('head')[0].appendChild(lyte)}})();</script></div>
The nitty-gritty (do skip if you’re not inclined to get aroused by technical details): this code attaches (a minified version of) lyte.js to the page’s head. The real work is done in that javascript-file: get all divs with class-name “lyte” (with a hack for friggin’ IE inlined), use the videoid which is in the divs’ id to fetch the thumbnail and title from YouTube, display these in a fashion which is very YouTube-like and add an onclick eventhandler to replace the fake with a real player when clicked (and remove the eventhandler to clean things up).
So using LYTE you can embed YouTube in such a way that the amount of data, the total download time and the total rendering time are significantly lower, without loosing any functionality.
And this -to conclude this long post- is what LYTE looks like (soundtrack by Nôze – “Meet me in the toilet”, it’s Friday after all);
And we can all link to your server for the javascript file (http://futtta.be/lyte/lyte.js)?
Shouldn’t you be ordering more bandwidth right now? Or maybe switch to Amazon S3 😉
Anyhow, nice hacking…
well, i can always migrate the js (and images) to your stale S3-account and issue HTTP 301’s responses, no? 🙂
Interesting piece of coding but there’s one thing that renders it useless to me: you can’t customise the size. I’m also guessing none of the &autoplay=1 or the startat: works with this code. Anyway you can change your code so we’ll be able to use it?
hi maxwell; i’ve rolled lyte into a wordpress-plugin. the most recent version of the code to be copy/pasted does allow to set the player size.
<div class="lyte" id="YUzoE-Bzy0w" style="width:640px;height:385px;"><noscript><a href="http://youtu.be/YUzoE-Bzy0w" rel="nofollow"><img src="http://img.youtube.com/vi/YUzoE-Bzy0w/default.jpg"/></a></noscript><script type="text/javascript">/*< ![CDATA[*/var bU='http://blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/';pW='640';pH='385';var d=document;if(d.addEventListener){d.addEventListener('DOMContentLoaded', insert, false)}else{window.onload=insert} function insert(){if(!d.getElementById('lytescr')){lytescr=d.createElement('script');lytescr.async=true;lytescr.id='lytescr';lytescr.src='http://blog.futtta.be/wp-content/plugins/wp-youtube-lyte/lyte/lyte-newtube-min.js';h=d.getElementsByTagName('script')[0];h.parentNode.insertBefore(lytescr, h)}};/*]]>*/</script><div class="lL">Watch this video <a href="http://youtu.be/YUzoE-Bzy0w" rel="nofollow">on YouTube</a> or on <a href="http://icant.co.uk/easy-youtube/?http://www.youtube.com/watch?v=YUzoE-Bzy0w" rel="nofollow">Easy Youtube</a>.</div>
regarding autoplay; that indeed does not work, the aim of (wp-youtube-)lyte is cut the overhead of having to load flash for the initial (non-playing) state. when you need autoplay, you need flash (or html5 video, which wp-youtube-lyte supports as well) active.
Nice but I think youtube went ahead of you. they’re trying a new embed method with a new tag that seems to be the new standard for embeding video. Google a bit on it. It’s quite interesting and, as it turns out, the code is a lot smaller.
the new youtube code is already integrated (and activated when a user actually clicks the play-button), but (wp-youtube-)lyte is still not more efficient, as it does not load flash (or html5 video) before the play-button is actually clicked, cfr. the stats in http://blog.futtta.be/2010/08/30/the-state-of-wp-youtube-lyte/ 🙂
Hi,
Is it possible to add a few options with this method, like a fullscreen button on the video?
Ben
is pretty straightforward; you’d have to edit lyte.js to add the correct params in the embed src.
hope this helps,
frank
Hey,
This is great it made my sped things up for my site but I am having z-index issues. I can’t seem to get it behind other elements. Any advice? Thanks in advance.
Peter
I suppose you mean when playing the video? Normally YouTube should take care of this automatically, as one of the parameters passed is “wmode=opaque”. Can you provide me with the URL of your blog so I can have a look?
Hello. Thanks for your quick response to my question. I’m not sure why I was having problems with my z-index but I have solved the problem on my own. My site is not live yet so I created this fiddle as an example http://jsfiddle.net/WMDLH/11/ My drop down menu. The “Animals” menu was dropping behind the video, but as you can see the problem was solved with a simple use of the z-index css attribute. Once again thanks for replying so quick.
Hi, I’m building a test website right now using Flexslider and I have embedded your lyte.js script in the page. I am having a problem with the play, pause, and volume controls not working when clicked. Do you have any suggestions on how I can get them to work? Thank you so much for your help! This website is a HTML 5 template (Porto) using Flexslider.
Flexslider + youtube is a challenge, I’m afraid I can’t guarantee that flexslider + lyte + youtube will work Crystal.
Thank you Frank. It is a great tool and I will definitely use it in other applications.
Do you know if it is compatible with Revslider?
No idea really, I haven’t touched the original lyte.js in years (it evolved into a WordPress plugin) and I am pretty ignorant as far as jQuery sliders are concerned.