blog

Front-end review 22tracks

De muziekindustrie, altijd een populair onderwerp in combinatie met het internet. Bestrijden ze elkaar nou, platenlabels en online muziekdiensten, of versterken ze elkaar? Spotify en iTunes lijken iedereen te overstijgen, maar er is zeker nog ruimte voor kleinere spelers!

Nederland mag zich zeer gelukkig prijzen met het initiatief 22tracks, een online jukebox die (al vanuit 2 steden) door 22 verschillende curators wordt bijgehouden, waarbij je binnen ieder genre dus door inhoudsdeskundigen op de hoogte wordt gehouden van het beste in dat genre. Het idee erachter is nieuwe muziek, op een makkelijke manier. Google 'new music' eens en je ziet waarom enige selectie door kenners noodzakelijk is. Het hoofddoel van de initiatiefnemers is dit concept in 22 steden uitrollen, op naar wereldwijde naamsbekendheid dus!

22tracks player

Fanboys

Wij diginatives volgen 22tracks al van voor hun pitch op The Next Web 2010, en zijn sindsdien enorm fan! Het is niet voor niks dat 22tracks de meest gebruikte muziekspeler is binnen e-sites. Dat betekent dus dat die service ons aan het hart gaat, en daarom is deze post ook geschreven. We willen namelijk even kritisch kijken naar ons favoriete webproduct, en ze eigenwijs als we zijn op een aantal verbeterpunten wijzen. Vanuit het onderwerp productverbetering hebben we onze expertise en ervaring ingezet om wat bij te dragen aan world domination voor 22tracks.

Het gebruik van Flash

De essentie van 22tracks, het afspelen van muziek, gebeurt momenteel via Soundmanager. Dit script, wat ook onder de motorkap zit van grote muziekservices als SoundCloud en Last.fm, wordt in het geval van 22tracks aangestuurd door Flash. “Waarom geen HTML5 audio?” zullen sommige van jullie je afvragen. Een terechte vraag, zeker gezien het feit dat Soundmanager hier ondersteuning voor biedt en dat 22tracks bij de laatste grote update overgestapt is van een volledige op Flash gebaseerde interface naar een meer toegankelijke HTML structuur i.c.m. JavaScript interactie.

Helaas bevinden zich er nog wat valkuilen rondom het gebruik van audio via de nieuwe standaard. De meest significante is het ontbreken van de mogelijkheid om (op een veilige manier) media te streamen. Kijkend naar hoe gevoelig deze kwestie ligt als het gaat om auteursrechten, is de keuze voor Flash snel gemaakt.

Betekent dit dat HTML5 volledig uit beeld is? Absoluut niet. Integendeel, de GetSatisfaction pagina van 22tracks leert ons dat de ontwikkelaars niet terughoudend zijn om, wanneer de technologie het toelaat, de overstap naar HTML5 audio te maken. Dat is hoe dan ook positief om te lezen!

Performance

Web performance is een populair onderwerp vandaag de dag. Net zoals destijds de term SEO in het leven geroepen is zien we tegenwoordig de afkorting WPO ook steeds vaker. Performance guru Steve Souders schrijft hier het volgende over:

“WPO (Web Performance Optimization) is similar to SEO in that optimizing web performance drives more traffic to your web site. But WPO doesn’t stop there. As evidenced by the success stories mentioned earlier, WPO also improves the user experience, increases revenue, and reduces operating costs.”

Zelf hebben we hier eigenlijk niets aan toe te voegen, bottom line is dat er genoeg redenen zijn om ervoor te zorgen dat de performance van je website optimaal is. Een handige tool om in één oogopslag te zien hoe een site scoort op het gebied van web performance is Google Page Speed. Wanneer we 22tracks door deze service onder de loep laten nemen zien we een score van 77.

Google Page Speed resultaten voor 22tracks.com

Zonder al te diep in te gaan op de verbeterpunten die Page Speed opsomt kunnen we concluderen dat er qua performance nog diverse slagen gemaakt kunnen worden. Een tool die we bij e-sites intern gebruiken, en tevens het gros van de performance issues tackelt, is Minify. Deze PHP library gebruiken we bijvoorbeeld om CSS en JavaScript resources samen te voegen, te minifien en met de juiste client-side cache headers te serveren. Met name het samenvoegen c.q. combineren van resources kan voor een flinke performance boost zorgen. Als we kijken naar het aantal JavaScript bestanden die er ingeladen worden bij 22tracks komen we op het volgende overzicht:

JavaScript files 22tracks

Aangezien het vereist is dat Modernizr bovenaan in de code  ingeladen wordt kunnen we bovenstaande requests terugbrengen van acht naar twee. Wanneer we deze truc ook toepassen voor de CSS bestanden kunnen er nog eens twee requests bespaart worden. Volgens Steve Souders is elke HTTP request gemiddeld 200 milliseconden, het loont zich dus absoluut de moeite om het aantal requests zo klein mogelijk te houden.

Comprimeren van images

Een ander punt waarmee de totale grootte van de site enigszins vermindert kan worden is het comprimeren van de gebruikte afbeeldingen. Een tool die we bij e-sites voor deze taak gebruiken is ImageOptim. Er worden in totaal ongeveer achttien afbeeldingen van ‘t 22tracks.com domein ingeladen (externe bronnen tellen we niet mee). Wanneer we deze in ImageOptim gooien geeft dat het volgende resultaat.

ImageOptim resultaten 22tracks.com afbeeldingen

Zoals je ziet vallen er in de huidige situatie met deze techniek niet veel kb’s af te snoepen, waar echter nog wel genoeg ruimte voor verbetering ligt is het samenvoegen van verschillende afbeeldingen tot één grote CSS sprite. Ondanks dat deze techniek momenteel al door 22tracks wordt toegepast kan het nog zuiniger!

Kijkend naar het type afbeeldingen kunnen we onderscheid maken tussen een sprite voor elementen met een vaste afmeting en een sprite voor elementen waar de afbeelding herhaalt dient te worden. Met behulp van css-sprit.es kunnen we eenvoudig een tweetal CSS sprites genereren van respectievelijk 32kb en 2kb. Hierdoor verkleinen we niet alleen de totale bestandsgrootte van alle afbeeldingen, maar reduceren we tevens het aantal HTTP requests van zestien naar twee.

Code review

Een front-end analyse is natuurlijk niet compleet zonder grondige code review. Daar we onmogelijk alle aspecten kunnen behandelen hebben we een overzicht samengesteld van de meest relevante zaken.

HTML5 Boilerplate

Een van eerste positieve dingen die ons opvalt zijn de invloeden van HTML5 Boilerplate. H5BP is het resultaat van jaren onderzoek op het gebied van front-end technieken en wordt onderhouden door een bijzonder grote community van toegewijde developers. Het aantal best practices die 22tracks heeft overgenomen zijn onder andere:

  • het gebruik van het HTML5 doctype;
  • specifieke classes voor IE op de <html> node;
  • het forceren van de laatste IE versie d.m.v. een speciale <meta> header;
  • het gebruik van Modernizr voor het detecteren van HTML5 en CSS3 features;
  • de manier waarop jQuery ingeladen wordt;
  • het inladen van JavaScript bestanden onderaan de code ten behoeve van progressieve rendering.

Template systeem

Wanneer we de broncode bekijken zien we aardig wat regels code die deel uitmaken van een zogenaamd template systeem. Deze regels bevinden zich tussen <script> tags en zien er als volgt uit:

	<script type="text/template" id="branded-template">
  <a href="#<%= slug %>">
    <% if (branded.logo_path) { %>
    <img src=" <%= ROOT + branded.logo_path %>" alt="<%= title %>" title=" <%= title %>" />
    <% } else { %>
    <%= title %>
    <% } %>
   </a>
</script>

Wij zijn erg benieuwd hoeveel winst er te behalen valt wanneer deze templates aan de server kant geparsed én gecached worden om ze vervolgens direct te serveren als zijnde HTML. Op die manier neem je aardig wat logica aan de client-side weg...wat idealiter de laadtijd ten goede zou moeten komen.

Quick wins

Na het analyseren van de code hebben we de volgende lijst met quick wins samengesteld.

  • De aanroep van het favicon in de <head> is niet vereist, alle browsers pakken deze standaard uit de root wanneer deze tag weggelaten wordt.
  • Het type attribuut is volgens de HTML5 standaard optioneel en zou daarom weggelaten mogen worden.
  • Omwille van de onderhoudbaarheid zouden de meeste inline JavaScript snippets, zoals ChartBeat en ComScore, samengevoegd kunnen worden in een losse file (thirdparty.js oid).
  • Momenteel wordt de verouderde Google Analytics snippet nog gebruikt, deze is inmiddels geoptimaliseerd voor een betere performance.
  • In het kader van consistentie zou er gekozen kunnen worden voor HTML- óf XHTML notatie. Momenteel is het een mix van beide.
  • In de broncode bevinden zich diverse HTML comments (bijv. <!-- Begin comScore Tag -->), dit is naar onze bescheiden mening niet echt noodzaak in een productieomgeving ;-)

Ondersteuning IE6

Tot slot, onderaan de broncode, zien we een conditional comment die zich richt op IE6 en lager.

<!--[if lt IE 7 ]>
<script src="/res/js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->

De reden van bovenstaande code snippet is het gebrek aan ondersteuning voor transparante png’s in deze oude browsers. Via een zogenaamde pngfix wordt hier op een nifty manier omheen gewerkt. Wij vragen ons echter af of ze deze fix nog moet serveren aan gebruikers van significant achterhaalde browsers, een web applicatie als 22tracks mag best bepaalde eisen stellen voor een optimale gebruikerservaring.

Een strategie die deze gedachtegang op een verantwoorde manier tot uitvoering kan brengen, en waarbij functionaliteit uit verschillende lagen opgebouwd wordt, is progressive enhancement. Bij deze filosofie staat centraal dat wanneer de situatie van de bezoeker het toelaat er een verbeterde gebruikerservaring gecreëerd wordt. Zo zal iemand met Google Chrome over het algemeen een website prettiger ervaren dan iemand die nog surft in IE6. Wanneer we dit vertalen naar bovenstaand voorbeeld zouden IE6 gebruikers alleen een achtergrondkleur zien...en niet de gradient. En daar valt best mee te leven dachten wij zo ;-)

Toegankelijkheid

Eerder in deze post gaven we aan dat Flash een cruciale rol vervult binnen 22tracks. Maar wat als je geen Flash plugin geïnstalleerd hebt...of deze, om wat van reden dan ook, geblokkeerd wordt? In dat geval verschijnt er na enkele seconden een box met daarin de melding dat de speler niet geladen kon worden en wat hiervan de eventuele oorzaak kan zijn.

Dit is een klassiek voorbeeld van graceful degradation. Er wordt een alternatief geboden wanneer er geen ondersteuning is voor een bepaalde techniek zonder dat de hele boel in elkaar stort. Op zich geen verkeerde aanpak, ware het niet dat wanneer je de box wegklikt er verder geen content getoond wordt en je een vrije lege site voor ogen hebt.

Een andere, meer toegankelijke oplossing, is het uitschakelen van de muziekspeler maar de navigatie en tracklists wel tonen. Op die manier worden bezoekers zonder Flash ondersteuning niet geheel uitgesloten en kunnen de verschillende genres en bijbehorende tracklists nog wel bekeken worden.

Dus.

De site functioneert momenteel prima! Daar zijn we het allemaal over eens, en we kunnen dit geniaal bedachte concept toch niet loslaten na al die maanden trouw luisterplezier. Maar bovenstaande verbeterpunten zouden het geheel nog beter kunnen maken. Het mooie is dat het gros van de punten relatief snel en eenvoudig door te voeren zijn. Dus, devs van 22tracks...doe er je voordeel mee en keep up the good work!

NB Terwijl we dit artikel schrijven land versie 2.0 van de 22tracks app in de app store. Ik denk dat we niet alleen voor onszelf spreken als we claimen dat dit een 100% vooruitgang is ten opzichte van de vorige versie! De compleet vernieuwde interface ziet er niet alleen ontzettend slick uit maar voelt ook erg snappy aan. Zeer puik werk van FONK en designer Niek Dekker!

e-sites. overtreft online.