Website optimalisatietips: de tools
Na de vorige artikels, zou je nu moeten weten hoe je de serverconfiguratie kan optimaliseren en welke technieken aan de frontend je kan hanteren om je website performanter te maken. Nu rest ons alleen nog: hoe kan je de performatie van een website meten en eventuele problemen opsporen?
Tools om performantie te meten
Het lijkt allemaal eenvoudig: je laadt een webpagina, je start de chrono en je drukt opnieuw af wanneer de website geladen is. Alleen zijn we met die onnauwkeurige en algemene tijd niet veel. We moeten veel preciezer weten hoeveel tijd bepaalde componenten nodig hebben en achterhalen waar we verbeteringen kunnen aanbrengen.
Gelukkig bestaan er een aantal tools die dit proces voor de frontend ontwikkelaar vereenvoudigen.
IBM Page Detailer
IBM Page Detailer is een Windows tool, die in de achtergrond gegevens analyseert terwijl je surft. Aan de hand van deze tool kan je kijken hoe webpagina’s aan de browser worden bezorgd. Dit houdt ondermeer in: de timing en volgorde, bestandsgroottes, de identiteit en details van elk item op de pagina.
IBM Page Detailer moet als zelfstandige applicatie draaien en werkt dus browseronafhankelijk.
Handig bij de Page Detailer zijn de gedetailleerde waterfall reports. Aan de hand van deze charts kan je de sequentie en de timing van webobjecten analyseren. Je zal dus kunnen zien waar de typische performantieproblemen optreden. Ondermeer dat het laden van Javascript files de rest van de downloads blokkeert, of de browserlimitatie van 2 connecties per hostname.
Naast de grafiek, heb je ook nog toegang tot een detailscherm, met daarop meer informatie over elk object op de pagina. Je kan bovendien zelf in de tabel definiëren welke gegevens moeten weergegeven worden.
Firebug
Met deze onmisbare extensie ben je ondermeer in staat om te meten wat er precies allemaal in Firefox gebeurt. Firebug beschikt onder de tab Net ook over waterfall reports en basisgegevens van bestandsgroottes, requests en de tijd die nodig is om de bestanden binnen te halen. Wanneer je met de muis even blijft hangen over items, krijg je een preview van dat element te zien.
Firebug toont echter geen details van elk van de requests. De response time, delivery time en zelfs de tijd om JavaScript uit te voeren worden gecombineerd.
YSlow (Firebug extension)
YSlow is een Firebug uitbreiding, ontwikkeld door Yahoo!. Hiermee kan je een website testen tegen de 14 performantieregels, toegelicht in het boek High Performance Web Sites. YSlow analyseert je website aan de hand van Firebug’s Net Panel in combinatie met het overlopen van de DOM tree. Het voorziet de website dan van een score (Performance Grade).
Je kan op elk van de items klikken om meer details te ervan te bekijken.
Onder stats vinden we dan weer een handige grafiek waarop je de empty en primed cache met elkaar kan vergelijken.
De components tab geeft een overzicht van alle componenten die ingeladen werden, met onder andere vermelding van type, url, response time, bestandsgrootte, ETag,…
Zeer praktisch is ook de print view (onder Tools), de ultieme checklist om mee te starten.
AOL Pagetest
Deze tool werd oorspronkelijk door AOL ontwikkeld voor interne performance testing, maar enkele maanden geleden werd de tool gereleased als open source. Het is momenteel de applicatie met de meeste features.
Bij AOL Pagetest worden ook waterfall reports gegenereerd, maar deze zijn voorzien van tijdslijn bovenaan, genummerde componenten en markeringen voor belangrijke sleutelmomenten bij de rendering van de pagina.
Elke request wordt visueel in een aantal kleuren voorgesteld en dit iets eleganter dan bij IBM Page Detailer.
Naast de charts heb je ook nog toegang tot een handige checklist view, die je componenten test tegen een aantal optimalisatieregels (vergelijkbaar met die van YSlow).
Bij AOL Pagetest kan je optimalisatierapporten exporteren (in .txt files), of de charts en checklists als afbeelding (.png)
Pagetest is enkel beschikbaar voor Internet Explorer.
Download AOL Pagetest
Er bestaat tevens een online versie: Pagetest webpage performance test
Zelf de websiteperformatie testen
Nu je weet welke tools je kan gebruiken, is het belangrijk te weten wat je moet doen om deze zo waarheidsgetrouw te gebruiken.
We willen uiteraard zowel testen voor de bezoekers die nog nooit op de website hebben gesurfd, als de terugkerende bezoekers.
Flush DNS
Wanneer een browser een domeinnaam voor het eerst tegenkomt, moet hij een DNS lookup uitvoeren, om het IP adres van die domeinnaam te achterhalen. Gemiddeld duurt dit zo’n 10 tot 20 ms.
Dat IP adres wordt dan lokaal gecached. Dus voor je de website op performantie test, kan je deze cache best legen.
Windows: Start -> run -> ipconfig /flushdns
Mac OS X: Terminal -> lookupd -flushcache
Browsercache legen en cookies wissen
Om te verzekeren dat alle bestanden moeten gedownload worden, wis je best de cache en cookies.
Internet Explorer 7:
Selecteer Tools -> Internet Options -> Delete -> Delete Files
Selecteer Tools -> Internet Options -> Delete -> Delete Cookies
Internet Explorer 6:
Selecteer Tools -> Internet Options -> Delete Files
Selecteer Tools -> Internet Options -> Delete Cookies
Firefox:
Selecteer Tools -> Clear Private Date -> Check Cache, Cookies -> Clear Private Data Now
Connectiesnelheden simuleren
Als webontwikkelaars verschillen wij meestal van de doorsnee websitebezoekers: zo beschikken wij over recente computers en snelle internetverbindingen. Daarom zou het wel handig zijn als we bepaalde parameters kunnen simuleren.
Charles
Charles is een web debugging proxy. Via Charles kan je ondermeer toezicht houden op al de HTTP traffiek tussen jouw computer en het internet, dus zowel requests, responses als de HTTP headers zelf. Bovendien kan je verschillende connectiesnelheden simuleren en bewust vertragingen introduceren (round-trip latencies).
Charles is een Java applicatie en is zowel beschikbaar voor Windows, Mac OS X als Linux / Unix.
Download Charles
En tot slot…
Zo, deze reeks van artikels over website (en dan vooral frontend) optimalisatie zit er bijna op. Ik wil jullie om af te sluiten nog enkele handige resources meegeven, voor zij wiens honger nog niet helemaal gestild is.
Interessante websites
Aanbevolen boeken
- High Performance Web Sites (Steve Saunders)
- Website Optimization (Andrew B. King)