futtta's blog

Although it has been a few months since I last wrote about my baby WordPress plugin, time did not stand still between version 0.3.0 and 0.5.2; the player size can now be changed in the options-screen, I’ve replaced my newTube html5-hack with Google’s official (yet experimental) new html5-compatible embed code and I started migrating the CSS from the mess that had become the JavaScript-file. And I almost forgot what may be the most important change; I started searching for blogs that use WP-YouTube-Lyte to see how it behaves in the wild. Some of the bugs I discovered that way;

• WordPress has a lousy “the_excerpt”-function which removes script-tags but not the script itself, which caused my JavaScript to be displayed as normal text in excerpts (typically in category-pages). Fixed with some unpleasant CDATA-tinkering.
• Some blogs allow crawlers to see the contents of a directory if no index.* is in place, so e.g. options.php gets indexed with an ugly (but logical) error-message. Fixed with an index.html.
• There’s a lot of themes and some of those have CSS that impacts the way WP YouTube Lyte is displayed. Most issues should be fixed by better CSS for my plugin, but do let me know if you encounter more weird display-problems (especially the controls that are incorrectly positioned).

But with all those changes you might start to wonder if WP-YouTube-Lyte still reduces download size & rendering time substantially, no? So I ran a couple of new tests for this page on my blog (it has 3 embedded YouTube’s) on webpagetest.org (settings: 5 runs on IE7 via Amsterdam, excluding requests to stats.wordpress.com). The difference is … well, judge for yourself (or see below the tables for the summary)

With normal Flash-based embeds (full results here):

And with WP YouTube Lyte (full results here):

Did you see that? Less requests, less data and faster rendering for first and repeat views. Hurray for WP-YouTube-Lyte! But enough with that ego-tripping already, I’ve got an Opera-bug to look into! Or wait, I’ll watch this great new Pomplamoose+Ben Folds+Nick Hornby  videosong first:

I-dosing mag dan misschien de nieuwste hype, dreiging of hoax zijn, maar een intense muzikale roes heb ik als tiener toch ook dikwijls opgezocht. Het moet in maart of april 1986 begonnen zijn, toen ik op de radio voor het eerst “Taking the veil” hoorde. Ik kende David Sylvian nog niet, maar de donkere, poëtische sfeer van het nummer bleef wel hangen in mijn jonge licht-melancholische geest. Dat lag niet zozeer aan de tekst, maar wel aan de muziek; de fretless bass van Ian Maidman als hook, de open maar toch zeer strakke en droge percussie van Steve Jansen, de tweestemmige vocals en de gelaagde gitaren van Sylvian, Phil Palmer en de repetitief-knarsende Robert Fripp. Op de onnodig uitgesponnen 12inch klonk dat zo:

Een paar dagen later, ‘s avonds laat, hoorde ik hetzelfde nummer opnieuw op Radio21 en ik drukte snel tegelijkertijd op de “Record” en “Play”-knoppen van mijn Sharp radio-cassetterecorder. De presentatrice kondigde met warme stem af en ik had bijna op “Stop” gedrukt, toen ik hoorde dat er een ander nummer van Sylvian volgde. Het was een instrumentaal stuk, “Upon this Earth” geloof ik. En dus nam ik verder op en “Gone to Earth” passeerde volledig de revue, instrumentaal na vocaal, afgewisseld met de prachtige stem van de presentatrice, die duidelijk fan was.

Op het einde van de uitzending had ik de Radio21-editie van “Gone to Earth” quasi volledig op een cassette van 90 minuten staan. Ik kocht dat 2de solo-album van David Sylvian korte tijd daarna op vinyl en later ook op CD, maar op zoek naar hoger sferen en naar de verwondering van die eerste beluistering, heb ik die tape -dikwijls voor het slapengaan- grijs gedraaid. i-dosing avant-la-lettre dus, m’n vader maakte zich blijkbaar niet voor niets zorgen. De grote liefde voor al wat Sylvian maakt, is ondertussen een beetje weggeêbt, maar “Gone to Earth” blijft een indrukwekkende verzameling indringende songs en atmosferische instrumentale miniatuurtjes.

Soit, ik denk dat ik straks toch nog maar eens een dosis neem, for old time’s sake én omdat het nu echt cool is, natuurlijk.

I re-implemented newTube.js, an earlier experiment to embed HTML5 YouTube video, into my WP YouTube Lyte plugin. This means that WP YouTube Lyte (for easy lite YouTube embeds, reducing download size & rendering time substantially) can now also use the HTML5-based YouTube video-player to play your embedded video.

If the -experimental- HTML5 option is enabled, WP YouTube Lyte will embed HTML5 YouTube video if:

• Your visitor uses a browsers that supports the h264 (Safari, Chrome, IE9) or WebM (currently development versions of Chrome, Opera and Firefox) video codecs
• Your visitor is enrolled in the YouTube html5 beta

If these requirements aren’t met, your visitors will see a Flash-based version of the YouTube video you specified.

As newTube.js is sort of a dirty hack which replaces the LYTE dummy player with an iframe with overflow:hidden, in which the full YouTube-page is carefully positioned to display only the player, there are some other caveats to take into account as well:

• It might break if YouTube implements x-frame-options for their video-pages
• Positioning of the player might be a few pixels off in some browsers
• Some buttons in the embedded player (e.g. view full screen) won’t function properly
• This might (not) work on iPhone/ iPod/ iPad’s (there are known issues with iframes & overflow in mobile Safari that might affect html5 embedding, feedback is welcome)

But apart from all this small print, is works rather nice if I may say so myself. Or better still, just look at this little They Might Be Giants gem embedded here;

This 3rd episode in the “High performance YouTube embeds” series brings you yet another way to use LYTE instead of normal YouTube embeds: wp-youtube-lyte. This WordPress-plugin will automatically replace YouTube-links that start with “httpv://” with Lite YouTube Embeds, thereby significantly reducing download size & rendering time.

wp-youtube-lyte plays nice with the great “Smart Youtube” plugin, in which case it will take care of the default embeds (httpv), while Smart Youtube will parse the other types (httpvh, httpvhd, httpvp, …).

You can download the plugin from http://futtta.be/lyte/wp-youtube-lyte.zip.

A quick demo maybe, to finish things off? Owen Pallett performing “Lewis takes action” live in the KCRW studios:

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);

Ge zou het misschien niet geloven, maar ik luister niet alleen naar Gilles Peterson. Akkoord, de man draait mooie plaatjes en toen ik in de aflevering van afgelopen zondag Ali Farka Touré hoorde, was ik weer totaal overtuigd van het genie van Mr. Brownswood. Maar ik mag niet zo overdrijven, mensen hebben dat niet graag, zo van die blinde idolatrie.

Dus nee, deze blogpost gaat echt niet over Gilles Peterson. Als ik niet in een eindeloze loop naar GP’s Worldwide luister, stem ik dikwijls af op KCRW, een radiostation uit California, USA. En wat ik daar hoorde heeft me blij gemaakt;

Bovenstaand YouTubeken is “Ambivalence Avenue” van Bibio (zie ook z’n myspace pagina), artiestennaam van de Brit Stephen Wilkinson, die iets geloofwaardig met electro en folk doet. Ge moet maar eens rondsnuisteren op YouTube, hij heeft zo nog leuke melodietjes.

Het zal wel iets met het grondwater of met Stonehenge te maken hebben, maar Bibio’s vernieuwingsdrang is niet nieuw. Eind jaren ’60 begin jaren ’70 bijvoorbeeld, deden Terry Cox, Bert Jansch, Jacqui McShee, John Renbourn en Danny Thompson samen prachtige dingen met jazz, folk en blues. En nu ik zo geheel toevalligerwijze aan Pentangle (want zo heette hun groep) heb, ben ik ervan overtuigd; Bibio is ook een fan en onderstaande “Light Flight” heeft hem diep geraakt;

Ik zit godganse dagen op het internet en als er tussen computer en smartphone dan toch nog wat tijd voor media overblijft, pikken we selectief wat televisie-in-uitgesteld-relais mee. Dat was vroeger wel anders; ik verslond boeken, tijdschriften en kranten, kocht veel CD’s, ging regelmatig naar de cinema, schuimde festivals af … Maar daar blijft weinig van over en ik mis dat allemaal wel, maar prioriteiten zijn prioriteiten en het is wat het is nietwaar?

Eén liefde is echter gebleven; radio! Ik en mijn radio, we go a long way back; als kind luisterden we met m’n ouders naar “Die tijd van toen” of “Te bed of niet te bed”. Toen ik 11 was, hoorde ik met een transistor-radiootje (dat ooit van mijn moeder was) Lutgart Simoens van onder m’n hoofdkussen. Als 14-jarige speurde ik in spanning de FM-band af tussen 100 en 104 Mhz, op zoek naar illegale vrije radio’s. Toen ik 17 was hoopte ik zelf plaatjes te kunnen draaien bij een héél lokale radio, maar dat is er nooit van gekomen. En later, als twintiger, kocht ik een wereldontvanger om naar Spaanse of Marokkaanse  staatsradio te kunnen luisteren, of naar een verdwaalde Amerikaanse conservatieve talk-radio en als dertiger schuimde ik het internet af op zoek naar online radio, kicken op dat middengolf-gevoel van 16kbit/s streaming in Realplayer.

Nu, als veertiger, download ik podcasts, luister ik in uitgesteld relais naar Gilles Petersons WorldWide op StuBru, stem ik in WinAmp af op KCRW music, ga -afhankelijk van m’n stemming- slapen met “Jazz” op Klara of  “Select” op StuBru. En soms, als ik ‘s nachts niet kan slapen, dan gaat de lamp van de nachtradio nog eens branden en dan val ik in slaap met muziek van Neil Young, Tom Robinson (“Listen to the radio” vanzelfsprekend) of onlangs nog met deze vergeten parel van 10000 Maniacs;

Nee, hand-gekozen kwaliteitsmuziek van samenstellers en presentatoren met een passie voor de plaatjes die ze draaien, daar kunnen last.fm, Pandora of Spotify wat mij betreft echt niet mee concurreren. Ik ben immers een Radiohoofd.