Snelheid website deel 2: Analyse & Monitoring

In een eerder blog schreef ik over het belang van snelheid voor je website. Mensen houden namelijk niet van wachten. Zeker niet als iets elders ook beschikbaar is. In dit deel behandelen we analyse en monitoring voor een website om te kunnen achterhalen of jouw website snel genoeg is en waar de pijnpunten liggen. Dit zal ik zo simpel en praktisch mogelijk houden. Als voorbeeld nemen we pure-im.nl en in een later blog zal ik jullie meenemen in het doorvoeren van optimalisaties.

Analyse

Om te beoordelen of een website snel genoeg is kom je met gevoel al heel ver. Voelt een site langzaam, dan is de site in veel gevallen ook (te) langzaam. Dat is een goede aanleiding om eens in de cijfers te duiken en specifieke informatie op te halen. Desondanks moet gevoel niet de enkele oorzaak zijn. Het is altijd goed om periodiek de snelheid van je website te peilen en (nieuwe) pijnpunten te ontdekken. Voor de meeste websites is de homepage de meestbezochte pagina van de website. Bij Pure IM is dat niet anders. Voor het merendeel van de gebruikers is dit dus de eerste ervaring met een website en de snelheid daarvan. Laat dat laatste niet meteen een punt voor frustratie zijn!

Tools

Een tweetal goede, en gratis, tools om een goed beeld van de snelheid van een website te krijgen zijn:

• http://www.webpagetest.org
• https://developers.google.com/speed/pagespeed/insights

Mijn favoriet is Webpagetest.org, maar laat dat geen reden zijn om de Google Pagespeed test ook te gebruiken. Voordat de test gestart kan worden moeten een aantal keuzes gemaakt worden. Onderstaande screenshot is van Webpagetest.org. De verschillende stappen heb ik genummerd en een beschrijving per punt toegevoegd.

1. Domeinnaam – Vul hier de url in van de website die je wilt testen
2. Test location – Kies de testlocatie. Neem hier een locatie die overeenkomt met je doelgroep. In het geval van Pure IM is dat Nederland, dus een testserver in Amsterdam is prima.
3. Browser – Vanaf welke browser wil je de test doorlopen? Webpagetest.org biedt, afhankelijk van de server de keuze uit alle populaire browsers. Kies simpelweg de browser die door jouw bezoekers het meest gebruikt wordt (maar test zeker ook met andere browsers). Dit is gemakkelijk in je webanalytics pakket te vinden. Voor Pure IM is dit overigens Google Chrome.
4. Connection – Wat is de gesimuleerde verbindingssnelheid voor het bezoek aan je website. Je kunt valsspelen en kiezen voor de snelste verbinding. Je houdt dan echter enkel jezelf voor de gek. Kies wederom de verbinding die bezoekers van je website ook bezitten. Voor Pure IM zie ik aan hostnames dat het merendeel kabel (UPC, Ziggo), ADSL of op een snel bedrijfsnetwerk (100mbit) zit. De keuze voor een 20mbit/5mbit connectie is daarmee het meest reëel.
5. Aantal testen. Meer is beter, maar overdrijven kan ook. Ik kies doorgaans voor drie testen omdat dat een prima beeld geeft, zonder lang te moeten wachten.
6. Repeat view – Deze tool kan simuleert eerste bezoek aan een pagina, maar kan ook meten hoe snel de pagina is als deze opnieuw geladen wordt. Heel vaak zit daar een verschil is. Met name bij inzet van caching. Het is daarom aan te raden om de testen te doorlopen op “First view and repeat view”.

Overige instellingen kunnen mijns inziens ongewijzigd blijven.

Analyseresultaten van Pure IM

Komen de resultaten van de verschillende testen overeen? Als het goed is wel. Wellicht zie je iets als hieronder.

Klik voor de grote afbeelding

Rechtsbovenin staat de algemene ‘beoordeling’, terwijl daaronder de numerieke samenvatting staat. De algemene beoordeling gaat over zeven punten. A is het beste en F het slechtste. De zeven punten zijn:

1. Time to First Byte – Tijd voordat de eerste data verzonden wordt. Daarover voldoende in mijn vorige blog over snelheid van een pagina.
2. Keep-Alive Enabled – Dit zorgt ervoor dat een verbinding open blijft en het versturen van bestanden van webserver naar computer van de gebruiker achter elkaar gebeurd zonder dat bij elk bestand verificatie gevraagd wordt. Nagenoeg altijd staat dit standaard geactiveerd, dus hierin geen verassingen. Mocht dat anders zijn, raadpleeg dan even je webbouwer, want in veel gevallen is het dan een (bewuste) keuze.
3. Compress Transfer – Indien bestanden gecomprimeerd worden verzonden hoeft er minder data verzonden te worden wat de snelheid ten goede komt. Computers zijn snel genoeg om dit zeer snel te decomprimeren en de verzonden data om te zetten naar beeld.
4. Compress Images – Zijn afbeeldingen wel voldoende gecomprimeerd? Vaak is zonder veel verlies van kwaliteit zeer veel te winnen in grootte van een afbeelding. Dit cijfer (een “C” ingeval van Pure IM) geeft aan of dat goed gebeurd.
5. Progressive JPEGs – Vroeger, met trage internetverbindingen, was dit zeer relevant. Progressive JPEGs kunnen verschillende kwaliteitstadia weergeven. In de praktijk houdt het in dat een afbeelding niet stukje bij beetje vertoond wordt, maar eerst een lage kwaliteit afbeelding die steeds scherper wordt. Indien je doelgroep een voldoende snelle internetverbinding heeft is dit punt minder relevant. Zeker wanneer afbeeldingen wel goed gecomprimeerd worden.
6. Cache static content – Dit cijfer geeft aan of data die statisch is, dus niet regelmatig veranderd, gecached (opgeslagen) wordt. Alles wat opgeslagen wordt hoeft niet opnieuw gedownload te worden. Goede caching kan een enorme boost aan performance geven.
7. Effective use of CDN – Een CDN, Content Delivery Network, is met name handig als je een geografisch groot gebied moet bedienen of wanneer de server op een andere plek staat dan waar bezoekers vandaan komen. CDN’s zorgen ervoor dat jouw bestanden vanaf een andere locatie verzonden kunnen worden naar een gebruiker. Ter illustratie; indien pure-im.nl in de VS gehost zou worden dan is er onnodige vertraging, omdat het signaal een groot deel van de wereld over moet. Zouden we een CDN in Amsterdam gebruiken dan communiceert die regelmatig met de server in de VS. Een Nederlandse gebruiker gaat dan naar pure-im.nl en krijgt de data van het CDN in Amsterdam en niet uit de VS. Dat zorgt voor winst in snelheid. Handig? Jazeker! Maar wanneer je server in Nederland staat en je bezoekers daar ook vandaan komen minder relevant. In de VS is het al een stuk belangrijker, omdat tussen New York en San Francisco een flinke afstand zit (een automobilist zou er 42 uur over doen) zodat een CDN wel rendeert.

Klik voor de grote afbeelding

Waterfall

Erg handig, en ook wel cool, is de waterfall weergave van Webpagetest.org. Deze toont per bestand wanneer het gedownload wordt. Daarmee kan je goed zien welke download voor een vertraging zorgt. Pijnlijk duidelijk wordt hier dat de Time To First Byte van Pure IM te wensen overlaat. Dit is niet geheel zonder reden, want in het volgende blog over optimaliseren van de snelheid zal ik tonen hoe dat opgelost wordt. Een andere conclusie die getrokken kan worden is dat de laadtijd van de gehele homepage 1,8 seconde bedraagt, maar dat de pagina in minder dan 1,3 seconde vertoond wordt aan de bezoeker. Wat daarna volgt is Analytics en de Google Fonts (het lettertype). Dat stemt niet direct tot ontevredenheid. Ook laat dit overzicht zien of er 3xx of 4xx problemen zijn. 3xx meldingen gaan over redirects (het is beter naar een uiteindelijke URL te linken dan naar iets wat daarna naar het uiteindelijke pad verwijst), terwijl 4xx eigenlijk foutmeldingen zijn. Bijvoorbeeld een 404. Iets is dan onbereikbaar.

Monitoring

Er zijn diverse tools die op interval basis een website controleren. Deze tools kijken dan of je website nog bereikbaar is en hoe snel de reactie is. Een analyse zoals Webpagetest.org dat doet mag niet verwacht worden, maar het is wel bijzonder handig. Zo kan je uit de tool halen op welke momenten een pagina traag is of zelf onbereikbaar. Wederom adviseer ik hier om de drukst bezochte pagina in te stellen. Een aantal (gratis) aanbieders van deze tools zijn:

• https://www.pingdom.com
• http://uptimerobot.com
• https://www.statuscake.com

Alledrie heb ik getest en Pingdom bevalt mij het beste. Het voornaamste voordeel van Uptimerobot is meerdere sites kan controleren en dat gratis doet, maar de interval is vanaf 5 minuten en de interface niet zo fijn als Pingdom. Statuscake kon naar mijn mening Pingdom ook niet evenaren. Het grootste voordeel van Pingom vind ik de interval van 1 minuut en fijne interface. Dat houdt overigens in dat de service elke minuut test of de webpagina beschikbaar is en hoe snel dat gebeurd. Een gratis Pingdom account kan hier aangemaakt worden, maar laat slechts één pagina/site toe. Handig is bijvoorbeeld een overzicht van het laatste jaar mbt de response time, die voor Pure IM toont dat de snelheid wat toeneemt.

Klik voor de grote afbeelding

Daarnaast kan bekeken worden of het tijdstip invloed heeft op de snelheid van de website. Bij Pure IM is duidelijk dat de snelheid vrij constant is, behalve tussen 3:00 en 4:00. Niet geheel toevallig is dat het moment dat de dagelijkse back-up wordt gemaakt. Daar zit dus het probleem en daar moeten we een oplossing vinden. Het mag eigenlijk niet zo zijn dat het maken van een back-up gebruikers zo nadelig beïnvloed. Uiteraard is die mogelijkheid wel de reden dat de back-up op het, voor Pure IM, minst drukke tijdstip plaatsvindt. Een ander groot voordeel van dergelijke tools is dat je meldingen kan ontvangen (per e-mail of SMS) wanneer er iets gebeurd. Bijvoorbeeld wanneer je website onbereikbaar is wegens een storing. Dit kan je binnen enkele minuten weten als je Pingdom zo instelt.

Database queries

Zeer veel websites gebruiken tegenwoordig een database voor het opslaan van informatie en gegevens. Dit houdt in dat de voorkant van de site steeds een vraag verstuurt naar de database om data op te halen om vervolgens te kunnen tonen. Elk verzoek (query) neemt tijd in beslag. Winst zit dus in het verlagen van overbodige queries. Hoe je dat doet is niet zo lastig. Voeg een stukje PHP toe aan je code (indien PHP gebruikt/ondersteund wordt!) en je krijgt te zien hoeveel queries er binnen een bepaalde tijd gedaan zijn vanaf de desbetreffende pagina. De code is:

<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?>  seconds.

Zelf heb ik de code even toegevoegd aan de footer van Pure IM. Het toont in geval van Pure IM:

40 queries in 0,434 seconds.

Nu je dit weet kan je de code weer weghalen. Het biedt voor bezoekers geen enkele meerwaarde en dient dan ook niet lang online te staan. Het kan teruggeplaatst worden als wijzigingen worden aangebracht, dan kan je precies zien hoeveel invloed het heeft.

Analyseren, oké. Monitoren, oké. Maar dan?

Ik kan zeker adviseren om je sites te analyseren en monitoren. Neem niet enkel je homepage, maar bijvoorbeeld ook belangrijke overzicht of productpagina’s. Zijn die allen snel of valt er te verbeteren? Hoe je dat daadwerkelijk kunt doen zal ik in mijn volgende blog tonen. Daarin ga ik op de gesuggereerde verbeterpunten pure-im.nl optimaliseren en de tijdwinst inzichtelijk maken.