Front End Friday: Performance Wins op het web

 
14 juni 2013

Speed winEerder hadden we het al over het optimaliseren van je website of -applicatie door middel van het gebruik van sprites. Dat is echter slechts één van de performance wins die je kunt behalen. Wat kun je nog meer doen om je site(beleving) te versnellen?

High-traffic websites (denk bijvoorbeeld aan Facebook, nu.nl of Kieskeurig) zijn geen standaardwerk voor Sogyo. Toch loont het ook om ‘kleinere’ sites of webapps te optimaliseren, zodat gasten of gebruikers zich niet ergeren aan traagheid of mislukkende acties. We zullen wat mogelijkheden behandelen om je site te optimaliseren. Sommige verbeteringen zullen je bekend voorkomen, andere zullen je misschien verrassen.

Verminder het aantal HTTP requests

Als je een webpagina bezoekt, worden er nogal wat bestanden binnengehaald: afbeeldingen, tekst, video’s, advertenties, JavaScriptbestanden, Analytics, noem maar op. Het doen van een request kost tijd. Meestal loont het de moeite om bestanden te combineren. Ook al zou de totale hoeveelheid gegevens in kilobytes groter zijn, toch gaat het sneller als het om minder requests gaat. De makkelijkste opties zijn dus:

  • Iconen en stijlafbeeldingen samenvoegen in sprites
  • JavaScriptbestanden combineren
  • CSS-bestanden combineren
  • Bonus: Gzip de componenten, dit wordt door de meeste browsers ondersteund

Minify CSS en JavaScript

Als je aan het testen bent, wil je graag kunnen achterhalen waar er iets misgaat. Daarom is je CSS en je JavaScript leesbaar. Maar zodra je klaar bent met testen en naar productie gaat maakt het niet uit of je functie ‘is_user_logged_in()’ of ‘ao()’ heet. Dat laatste is korter, dus sneller. In CSS kun je bovendien veel whitespace en puntkomma’s weglaten zonder dat er iets stukgaat. Zo wordt een bestand van 1.000 regels ineens 4 regels en bespaar je gemakkelijk 15% op de data die je verstuurt. Als je SASS of iets vergelijkbaars als Less gebruikt kun je instellen of de CSS leesbaar moet zijn of dat het moet worden gecomprimeerd.

  • Gebruik een obfuscator voor JavaScript
  • Comprimeer JavaScript
  • Comprimeer CSS

Zet CSS bovenaan, scripts onderaan

Het is zinvol om CSS in de HEAD-tag van de HTML te plaatsen. Hierdoor duurt het een fractie langer voordat de pagina wordt getoond (omdat de browser die bestanden eerst moet ophalen) maar is wat er wordt getoond wel meteen op de juiste manier zichtbaar en voorkom je onnodig verspringen van elementen. JavaScript is niet meteen nodig, dus als je scripts zoveel mogelijk onderaan de site zet (voor de sluittag van BODY) kan een bezoeker de pagina alvast bekijken, zelfs al is de site nog niet helemaal bruikbaar. Met dat laatste bedoelen we: sommige acties, zoals het klikken op een knop, zijn afhankelijk van JavaScript. Dat die knop nog niet meteen werkt is niet erg, want binnen een seconde kan er wel op worden geklikt. Tijdens die seconde lijkt het net alsof de site al helemaal is geladen.

Optimaliseer het moment van laden van onderdelen

Sommige componenten bevinden zich ‘under the fold’, wat betekent dat ze pas zichtbaar zijn als je omlaagscrollt. Die zou je best later kunnen laden dan de rest van je site. Of helemaal niet. Denk bijvoorbeeld aan een comment-sectie of een Facebook-Like-button onder een bericht.

Als je redelijkerwijs kunt verwachten dat een gebruiker vanaf een bepaalde pagina een andere pagina zal gaan bezoeken, dan kun je alvast plaatjes, scripts, style etc. gaan inladen. Denk bijvoorbeeld aan een inlogpagina. Terwijl de gebruiker zijn authenticatiegegevens invult, is er tijd genoeg om alvast achtergrondplaatjes van de rest van de site aan de cache van de browser aan te bieden.

  • Laad eerst de onderdelen die meteen nodig zijn, dan pas de rest
  • Onderzoek of sommige onderdelen pas later hoeven worden ingeladen, laad deze dan bijvoorbeeld als er wordt gescrolld
  • Pre-load onderdelen wanneer je verwacht dat een bezoeker die nodig gaat hebben

Maak gebruik van caching

Caching is een krachtige performancetool. Het scheelt requests en bandbreedte.

  • Stel de juiste headers in voor alle elementen op je site: Expires, Cache-Control
  • Afbeeldingen en andere static elements kun je gerust nooit laten ‘expiren’ (maak je geen zorgen over een logootje dat er over twee jaar anders uit zou kunnen gaan zien; er zijn manieren om het nieuwe logo tegen die tijd toch te tonen door bijvoorbeeld ‘logo.png?bypass_the_cache=yes’ op te vragen)
  • Zoek uit welke scriptbestanden kunnen worden gecachet
  • Vermijd bij zulke bestanden (statics, scripts) dat ze worden opgehaald door middel van een steeds wisselend GET-request
  • Vermijd inline scripting en CSS

Krijgt je site een make-over? Stuur de generieke CSS, afbeeldingen etc. alvast mee met de ‘oude’ site. Als een bezoeker dan op die nieuwe site terechtkomt wordt er minder geklaagd over traagheid.

Gebruik liever GET dan POST voor Ajax

Als het niet per se nodig is om POST te gebruiken, gebruik dan GET om Ajax-bestanden op te halen. POST is in browsers namelijk zo ingebouwd, dat er tweemaal iets wordt verstuurd: een keer de headers, de tweede keer de gegevens. GET stuurt beide in één actie.

Verminder het aantal DOM-elementen

Modulair opgebouwde websites hebben er een handje van om te veel elementen aan de DOM te hangen: onderdeel A heeft ergens een DIV staan waarin component B of C kan worden geplaatst. Dat component heeft zelf ook al een container, ‘want je weet maar nooit waar het in terechtkomt’. Zo onstaat er een extra (en dus overbodig) DOM-element.

Het verminderen van het aantal DOM-elementen scheelt uiteraard data, maar dat is niet eens zo veel. Wat voornamelijk een voordeel is, is dat het opzoeken van een bepaald element sneller gaat als er minder elementen in de DOM zitten. Daar maak je je JavaScript blij mee.

Controleer je site op 404’s

Vermijd het opvragen van niet-bestaande afbeeldingen of scripts. Zeker bij scripts, want wellicht probeert de browser de response te parsen, wat niet zal lukken, wat uitmondt in nutteloze traagheid.

Enzovoort

Natuurlijk zijn er nog meer manieren om te optimaliseren. Wat we hier benoemen is maar een greep uit de mogelijkheden. Met name JavaScript kan flink worden geoptimaliseerd door slim te programmeren. Dat is echter zo specifiek dat we het daar een andere Front End Friday over gaan hebben.


Werken met ?
Kijk dan bij onze mogelijkheden voor zowel starters als ervaren engineers.


Categorieën: Front End Friday

Tags: , , ,