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.
Meer over: Breng snelheid in je site voor gebruikers en zoekmachines »
Voorbeelden veel gebruikte .htaccess regels
Een tijdje terug heb ik al eens over de kracht van reguliere expressies in Google Analytics filters geschreven. Maar naast het gebruik van reguliere expressies in GA kun je ze ook nog ergens anders gebruiken: in de .htaccess op je server.
Het .htaccess bestand staat vaak in de root van je server (bij Apache tenminste) en is bedoeld om een aantal instellingen van een folder aan te kunnen passen. Wanneer hij gebruikt wordt in de root kun je de instellingen van alle subfolders aanpassen. Veel van deze instellingen hebben te maken met het afhandelen van binnenkomend verkeer.
Ik wil hieronder een aantal voorbeelden plaatsen van .htaccess regels die veel gebruikt worden. En waarom: omdat ik ze niet uit mijn hoofd ken en ergens een plek wil hebben waar ik ze weg kan knippen en plakken ![]()
Voordat een aantal zaken gerewrite worden moeten eerst wat algemenere zaken aangepakt worden:
Uitgaande links simpel meten met Google Analytics
Soms kan het best handig zijn om te zien welke uitgaande links mensen volgen vanaf bepaalde pagina's. Voor de mensen die er mee bekend zijn: MyBlogLog kan het ook voor je doen, je ziet direct welke links populair zijn en welke niet. Standaard zit deze functionaliteit niet in Google Analytics, maar natuurlijk kan dat wel opgelost worden.
Om een link te kunnen meten zal er bij een klik een script aangeroepen moeten worden die de meting verricht. Dit kan middels een onclick event op de link:
<a href="http://www.voorbeeld.nl" onclick="pageTracker._trackPageview()"></a>
Meer over: Uitgaande links simpel meten met Google Analytics »
Google Analytics en 2 letter domeinen in IE
In de afgelopen periode leer ik steeds meer en meer over Google Analytics en de daarbij behorende tekortkomingen, mogelijkheden, enz. Ik kan mij inmiddels een redelijk gevorderde gebruiker en beheerder noemen, en vanuit dat perspectief kan ik ook zeggen dat ik goed tevreden ben over dit pakket.
Maar wat ik vandaag heb uitgevonden slaat naar mijn mening alles. Ik heb een website die uit 2 letters bestaat, we nemen hier als voorbeeld maar het bekende nu.nl. En Google Analytics (GA) doet het daar niet door Internet Explorer. Om de geschiedenis even langs te lopen zal ik alle genomen stappen toelichten en uitwerken.
DHTML AsTree
AsTree is een javascript tree zoals in de windows explorer waarmee op een simpele manier veel items in 1 menustructuur gegoten kunnen worden. Geinspireerd op een versie die ik ergens online gezien had maar die bij 2000 items veels te traag werd. Daarom ben ik zelf bezig gegaan om een snellere versie te ontwikkelen, en dit is het resultaat geworden.
Deze tree is momenteel de snelste die er op internet te downloaden is, ik heb er uitgebreid mee getest en nog geen snellere gevonden. Na diverse kleine tweaks heb ik de opbouw van 1000 nodes van 7130ms naar 5210ms naar 4670ms naar 3790ms gekregen. Die kleine tweaks waren onder andere het veranderen van de volgorde in if-statements, het de andere kant op laten lopen van for lussen en het vervangen van innerHTML door createTextNode (DOM).
