Breng snelheid in je site voor gebruikers en zoekmachines

Het is een hot onderwerp: de snelheid van je site wordt steeds belangrijker. Bezoekers hebben snelle sites altijd al prettig gevonden en Google gaat het daarom nu ook meenemen in het bepalen van je ranking. Mede hierom ben ik eens flink bezig gegaan met het optimaliseren van mijn site. De genomen stappen en de resultaten wil ik graag met jullie delen.

Welk stappen heb ik genomen

Om de snelheid van het laden van mijn site te versnellen heb ik de software (Wordpress), de server, de broncode (HTML, CSS en Javascript), de plaatjes aangepakt. Elke verbetering heb ik vervolgens gemeten met de tools Google Page Speed en Yahoo! YSlow, beide weer aanvullingen op de populaire developers tool Firebug. Een hoop kleinere wijzigingen zal ik hier niet behandelen, maar de echte impact-makers zal ik zeker noemen.

Caching aangezet
De eerste stap was het implementeren van de W3 Total Cache plugin voor Wordpress. Deze zorgt er voor dat alle pagina's in mijn site van te voren alvast in elkaar gedraaid worden tot kant en klare HTML. Wanneer een bezoeker dan een pagina opvraagt kan direct de HTML geserveerd worden en hoeven er dus geen PHP of enkele database verzoeken aan te pas te komen. Extra voordeel is dat de broncodes van alle javascript, CSS (zie voorbeeld van mijn site) en HTML ontdaan worden van onnodige elementen als spaties en commentaren.
De 2de stap in het caching verhaal is het aanzetten van zogenaamde caching headers. Hiermee vertel je aan een browser dat bijvoorbeeld een bepaald plaatje niet elk bezoek opnieuw opgehaald hoeft te worden omdat hij toch niet veranderd. Zo blijven de plaatjes in de cache van de bezoeker staan en dat scheelt laadtijd. Op mijn type server (Apache) kon dat simpel door de volgende regels op te nemen in het .htaccess bestand:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A300
ExpiresByType image/x-icon A4838400
ExpiresByType application/x-javascript A4838400
ExpiresByType text/css A4838400
ExpiresByType image/gif A4838400
ExpiresByType image/png A4838400
ExpiresByType image/x-icon A4838400
ExpiresByType image/ico A4838400
ExpiresByType image/jpeg A4838400
ExpiresByType text/plain A4838400
ExpiresByType application/x-shockwave-flash A4838400
ExpiresByType video/x-flv A4838400
ExpiresByType application/pdf A4838400
ExpiresByType text/html A300
</IfModule>
Per type bestand wordt een houdbaarheidsdatum meegegeven. A4838400 staat gelijk aan 56 dagen (4838400 secondes) vanaf het moment dat het bestand opgevraagd wordt (A).

GZip
Wat veel tijd kan schelen is het inpakken van alles wat je over de kabel verstuurd. Bijna elke server beschikt wel over een module die dit kan regelen. De GZip module is wellicht de meest bekende. Zodra een HTML pagina geserveerd wordt zal hij eerst ingepakt worden, en na ontvangst wordt hij weer uitgepakt. Het werkt zo'n beetje hetzelfde als het zippen van een bestand op je eigen pc. Het is een beetje afhankelijk van je hosting pakket of deze module wel of niet geïnstalleerd is.

CSS Sprites

Een mooie truc die ook vaak bij games gebruikt wordt zijn de zogenaamde CSS Sprites. Dat zijn plaatjes die bestaan uit een aantal (tientallen tot honderden) andere plaatjes. Om even duidelijk te maken wat ik bedoel kun je het beste kijken naar de sprite die ik voor deze site gemaakt heb. Je ziet in dat plaatje precies 10 plaatjes die daarin samengevoegd zijn. Met behulp van handige CSS positionering plaats ik deze sprite zo dat alleen het gewenste deel zichtbaar is op de juiste plek.
Wat is dan het voordeel? In plaats van 10 HTTP connecties hoeft er nu maar 1 gemaakt te worden die het plaatje binnenhaalt. Dat scheelt tijd en resources die door andere elementen gebruikt kunnen worden. Het plaatje staat vervolgens in het geheugen van de PC en kan zo vaak gebruikt worden als dat nodig is. Het 2de voordeel is simpelweg het aantal kb's. Deze 10 plaatjes afzonderlijk waren in totaal 29.882 bytes groot. De sprite is maar 15.812 bytes. Dat betekent een besparing van 48%.

Verkleinen van diverse afbeeldingen
Ik heb niet simpelweg alle plaatjes in mijn site geopend en als .JPG opgeslagen met een kwaliteit van 5%, dat zou te simpel zijn. Met behoud van kwaliteit is het mogelijk om bijna alle bestanden te verkleinen. Dat kan omdat een heleboel grafische formaten allerlei extra zaken in een bestand opslaan die eenvoudig verwijderd kunnen worden. Check deze pagina voor een aantal handige tools.

Opruimen
De meeste simpele manier van allemaal: opruimen. Is alles wat je op je site toont echt nodig? Kan er niet het een en ander weg? Of zou je het externe logo niet zelf kunnen hosten? Een extern iets op je site kan het laden enorm vertragen. Elk ander domein dat nodig is bij het laden van je site betekent ook een extra DNS aanroep. Gebruik deze externe zaken dus met mate.
Op deze site stond een grapje: als je over mijn neus heen ging kreeg je een tekstballon met een mededeling. Geinig, maar totaal overbodig. Er moest extra HTML, CSS, Javascript en een plaatje ingeladen worden. Dit 'grapje' is nu dus ook verleden tijd.

Asynchrone Google Analytics code
Google lanceerde onlangs een nieuwe asynchronous meetcode die een aantal mooie voordelen bevat. Hij kan bovenin de broncode geplaatst worden omdat het script dusdanig geladen wordt dat het laden van de site hier niet op hoeft te wachten. En zodra het script binnen is vindt direct de meting plaats. Door de bank genomen zal de meting nu eerder plaatsvinden dan wanneer de meetcode helemaal onderaan je pagina had gestaan, en daardoor zul je meer pageviews en bezoekers gaan meten.

En wat zijn de resultaten

In de kerstvakantie ben ik hier mee begonnen en heb in de loop van januari nog enkele stappen genomen in het optimaliseren van de site. Ik kan op dit moment nog niet zeggen of de wijzigingen effect hebben op mijn SEO rankings, maar het bezoek vanuit die hoek is wel harder gestegen dan de rest.

Wat zeggen de WebMaster Tools
De Google Webmaster Tools heeft 2 mooie grafieken in de rapportage zitten. De eerste laat zien hoe lang de Google Spider doet over het downloaden van de pagina's in je site:

Je kunt goed zien dat begin januari de downloadsnelheid van gemiddeld 1,5 naar 1 seconde is gegaan. Dat heeft deels te maken met de instellingen die ik gemaakt heb. Maar daarnaast is ook de snelheid van de hosting partij een belangrijke factor waar je wat moeilijker invloed (verhuizen) op kunt uitoefenen.

En de 2de grafiek laat zien hoe lang vervolgens het renderen (het samenbrengen van de JS, CSS, HTML en plaatjes om daar een werkende pagina van te maken) van die pagina duurt:

Een mooie daling in de loop van de tijd. De berg zo rond half december werd veroorzaakt door een externe toolbar (Wibiya) die ik even getest heb. Helaas wogen de voordelen niet op tegen de nadelen. Buiten die berg om loopt de daling mooi door tot een 2,9 secondes per pagina gemeten op 22 januari.

Google Analytics
Er zijn een aantal wijzigingen te zien in Google Analytics. Maar of de veranderingen te wijten zijn aan de nieuwe plaats van de asynchrone code (bovenaan de broncode) of de laadsnelheid van de site is moeilijk te zeggen. Beide factoren tezamen leveren dit als resultaat:

Het organische verkeer laat de normale kerstdip zien en stijgt vervolgens flink zonder aanwijsbare reden. Ik had al een tijdje niet meer geblogd en ook niet aan linkbuilding oid gedaan. Toch heb ik vaker dit soort stijgingen in januari gezien en durf er dus niet keihard conclusies aan te verbinden.

Een andere duidelijk stijging is te zien in het weigeringspercentage. Dat was voorheen altijd onder de 70% en is nu opeens rond de 73% constant. Dat betekent dat bezoekers die voorheen al wegklikten zonder dat de Google Analytics code geladen was nu wel gemeten worden. De site en de nieuwe GA code laden zo snel dat vrijwel iedereen gemeten wordt.

Rankings
Op dit moment zie ik nog niet echt een positieve invloed op mijn rankings, maar ik verwacht dit ook pas over een langere termijn te kunnen zien. En dat maakt het ook weer moeilijk om te isoleren, er gaan in een langere periode andere zaken meespelen die de data vertekenen.

Conclusie

Het was leuk om te doen. Nerd als ik ben wilde ik met de Google Page Speed module toch minimaal een score van 85 neerzetten. Alle kleine details moesten aangepakt worden. Resultaat is nu wel dat de site aanmerkelijk sneller ingeladen wordt. En daar draait het uiteindelijk toch om, een trage site is één van de grootste ergernissen tegenwoordig.

Iemand anders nog tips of ervaringen die gedeeld moeten worden?