It’s all nice and well to hammer out some code to create a lite YouTube embedded player, but as long as that embed-code can’t simply be copy/pasted from the YouTube-page, it’s all pretty theoretical, no?
Well here you are, a simple bookmarklet that will display the LYTE-code when you’re on a random YouTube video page:
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)
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.
(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);
A couple of days ago I installed Lorentz, a beta version of Firefox. Lorentz is virtually identical to Firefox 3.6.3, except that it incorporates part of the work of the Electrolysis team. Their “Out-of-process plugins”-code lets Firefox-plugins (on Windows & Linux, they’re still working on Mac OSX according to the release notes) run in a separate process from the browser, meaning Flash (but also Silverlight or Quicktime) can’t crash Firefox any more.
Apperantly Lenevo, Huawai and ZTE have expressed interest, but I for one am especially rooting for HTC. They do great hardware (e.g. my old Qtek 9100, my current HTC Hero and Google’ Nexus One) and they have exprience with a multi-OS product line (Windows Mobile and Android). But most importantly; they have Sense UI!
Sense is the user interface that HTC puts on top of WinMo and Android, to provide users with good looking, easy to use home screens that feature widgets to display e.g. calender, mail, clock, weather, but also information from Facebook, Twitter and Flickr. WebOS could really help HTC broaden and deepen Sense; e.g. by porting the WebOS multitasking cards metaphor, Synergy (unified contact list, deeply integrating internal sources and social web) and the nifty notification system. And Mojo could (easily?) be ported to WinMo and Android as well, HTC could then open up Palm’s App Catalog for all HTC WebOS/Sense devices, allowing developers to create, publish and sell mobile applications for multiple operating systems!