De snelheid van je website is niet te verwaarlozen (Deel 2)

In deel 1 van dit tweeluik kon je lezen dat er een direct verband is tussen de snelheid van je website en het succes ervan. In het volgende artikel vernoemen we een behoorlijk aantal online tools die ook onderaan in een overzicht zijn terug te vinden.

Het is een oud en voor de hand liggend onderwerp, maar opvallend veel e-commerce websites doen bij lange na niet alles om maximale winst te boeken op dit onderdeel.

Meten is weten

Om te meten hoe snel je website laadt zijn er verschillende tools beschikbaar. Yahoo was al vroeg bezig om dit onderdeel de aandacht te geven die het verdient en stelde onder de noemer ‘Yslow’, 13 criteria op om je website aan te toetsen. Later zijn deze uitgebreid tot 23 best practices. Leg daar de best practices van Google PageSpeed bij en je hebt een vrij compleet beeld van de mogelijkheden om je website achteraf te versnellen. Ze zijn net als de meeste meetinstrumenten beschikbaar via de browser, maar het is aan te raden om ze als plug-in voor je browser te installeren.

Andere voorbeelden van vergelijkbare diensten zijn Pingdom, GTMetrix en Webpagetest.org. Google PageSpeed vind je ook terug in Analytics.

Een snelle goede website is handwerk

Ik wees er eerder op dat het probleem zich vaak voordoet doordat websites niet gebouwd zijn om te doen wat ze moeten doen, maar in plaats daarvan general-purpose software gebruiken dat in werkelijkheid veel te veel doet. De peetvader van de populaire webprogrammeertaal PHP, Rasmus Lerdorf, weet het mooi te verwoorden (“All PHP frameworks suck”). Hetzelfde geldt natuurlijk voor andere programmeertalen en andere general-purpose modules of plugins.


[Rasmus Lerdorf @ PHP Frameworks Day 2013]

Om écht geen milliseconde trager te zijn dan nodig is dien je dus je ontwikkelproces in te richten op efficiëntie. Test-driven design is een werkwijze waarmee programmeurs al tijdens het programmeren zien hoe snel ieder stukje programmatuur wordt uitgevoerd en aan de hand daarvan hun code kunnen optimaliseren op snelheid.

Als je, vast met goede reden, toch een pre-made pakket gebruikt dat meer rekenkracht of bestandsgrootte met zich mee brengt dan nodig is, pluk dan in ieder geval het laaghangend fruit.

Aan de slag

Als je een idee hebt hoe je website er nu voor staat kun je beginnen met het optimaliseren van verschillende facetten die er toe doen. Het is niet altijd zo dat het opvolgen van het advies van het betreft pagespeed ook daadwerkelijk de gebruiksvriendelijkheid van je site verbetert, dus maak hier zelf keuzes in.

Kies altijd voor een snelle server met een gunstige geografische locatie voor je doelgroep. Een Content Delivery Network of Load Balancer kan uitkomst bieden voor internationale websites door de bezoeker altijd pagina’s en componenten te serveren vanaf een server die dichtbij is.

Minimaliseer het aantal verzoeken dat de browser maakt, dus vermijd redirects. Zou je redirecten dan moet de browser twee keer de weg naar een website afleggen.

Een browser kan een beperkt aantal resources tegelijk ophalen van één domein. Hoe meer afbeeldingen, CSS bestanden of externe scripts je op je pagina hebt, hoe langer het duurt om alles binnen te halen. Gelukkig kan je ze samenvoegen, zodat de website een minimaal aantal verzoeken hoeft te doen en zo zo veel mogelijk tegelijkertijd binnen kan halen.

Beperk de bestandsgrootte van je resources. Afbeeldingen kan je comprimeren of op een lagere kwaliteit opslaan. Er zijn tools om de bestandsgrootte van je CSS en Javascript te minimaliseren. Statische content kan je in zijn geheel comprimeren met gzip en zo serveren. Je kan zelf ook bijdragen aan de kunst van het weglaten door dubbele en ongebruikte stukken code te verwijderen. Wanneer je toch CSS frameworks gebruikt is UnusedCSS (meer info hier) daar handig voor en bij populaire pakketten als jQuery en Twitter bootstrap is er de mogelijkheid afgeslankte custom builds te gebruiken, waarin je zelf aangeeft welke onderdelen van de software je echt gebruikt.
page speed

Sites laden vanzelfsprekend de code van begin tot eind, oftewel van boven naar beneden. Plaats CSS en andere code die voor het visuele deel van je pagina verantwoordelijk zijn bovenin, zodat de gebruiker meteen wat op het scherm te zien krijgt. Plaats zware resources, zoals scripts, achteraan in de code, zodat de browser niet hoeft te wachten tot deze geladen zijn. Google raadt aan om je scripts asynchroon op te halen, dat wil zeggen dat je het ophalen uitstelt tot wanneer de rest van de pagina volledig geladen is. Elementen die direct (boven de fold) in beeld zijn en trackers zijn een uitzondering, omdat je wil dat deze snel in werking treden.

Al is je website inmiddels nog zó snel, als deze informatie uit een grote database moet ophalen kan daar een enorm snelheidsverlies optreden. Een snelle en eenvoudige ingreep is het instellen van indexes. Indexes dienen als een virtuele inhoudsopgave, waardoor de data in je database sneller toegankelijk is, zoals je ook sneller iets in een boek terugvindt door de inhoudsopgave te gebruiken.

Een cache is een virtuele opslagplaats waarin gegevens die vaker opgevraagd worden tijdelijk bewaard worden, zodat het systeem niet steeds hetzelfde tijdrovende proces hoeft te doorlopen om bij die gegevens te komen. Dit is op vele niveaus toe te passen in je systeem. YSlow en PageSpeed Insights raden aan dat je gebruik maakt van de browser cache. Door op een tactische manier Expires Headers in te stellen op je resources bereik je dat de browser van de bezoeker deze resources lokaal bewaart en dus bij latere paginabezoeken niet steeds alles hoeft op te vragen.

Een drastischere inzet van deze caching methodiek is door je server alle mogelijke pagina’s van je site te laten bezoeken met bijvoorbeeld Varnish Het rekenwerk is dan voor de bezoeker al gedaan en deze krijgt lekker snel de pagina geserveerd, uit de cache. Let wel dat hier ook nadelen aan verbonden zijn, bijvoorbeeld dat veranderingen aan je website niet live doorgevoerd worden.

Doelstelling

Waarop mikken we? Een lagere laadtijd die bijdraagt aan een betere gebruikerservaring met een stijging in conversie als gevolg. De rapportcijfers die je uit bijvoorbeeld YSlow of PageSpeed Insights krijgt zijn geen reflectie van de conversie op je website. Het klakkeloos afwerken van het lijstje zou zomaar tot een slechtere gebruikerservaring kunnen leiden. Deze tools dienen dan ook als hulpmiddelen zodat jij zelf je site kunt optimaliseren.

Met YSlow kan je ook criteria die voor jou niet interessant zijn buiten beschouwing laten met custom rulesets. En nieuwere tools als PerfBar maken het mogelijk eigen metrics in te stellen om je site te optimaliseren op wat jij belangrijk vindt.

Daarnaast zijn er ook onbewandelde paden naar een snellere website. Door er mee bezig te zijn kom je vaak tot creatieve oplossingen. Zo laden de afbeeldingen op productpaginas van Zalando pas wanneer ze in de viewport scrollen, om de initiele laadtijd in ieder geval laag te houden.

Aan de slag dus! Er is winst te boeken. Laat ons weten hoeveel seconden winst jij geboekt hebt en hoe.

Overzicht PageSpeed Tools:

Best Practices Google PageSpeed – [http://gtmetrix.com/recommendations.html]
Comprimeren afbeeldingen / opslaan lagere kwaliteit – [http://smush.it]
HTML compressor – [http://www.htmlcompressor.com/]
CSS minimaliseren – [http://yui.github.io/yuicompressor/].
Javascript minimaliseren – [http://closure-compiler.appspot.com/]
Gzip = Statische content comprimeren – [http://gtmetrix.com/enable-gzip-compression.html
CSS afslanken – [http://addyosmani.com/blog/removing-unused-css/]
Asynchroon ophalen scripts – [https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/]
Instellen indexes – [http://dev.mysql.com/doc/refman/5.5/en/optimization-indexes.html].
Varnish Cache – [http://varnish-cache.org].
Expires headers–[https://developer.yahoo.com/performance/rules.html#expires]
PerfBar – [http://lafikl.github.io/perfBar/]

Geef een reactie

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>