Stappenplan om de snelheid van je site te verhogen

13 April, 2010

in Analyse, Vindbaarheid (SEO)

snelheid website 150x150 Stappenplan om de snelheid van je site te verhogenAl een tijdje kwamen de hints dat laadsnelheid van je website meer invloed ging uitoefenen op de positie in de zoekmachines. Afgelopen week bevestigde Google nog eens dat de laadsnelheid nu echt wordt meegenomen als signaal bij het bepalen van de positie in de zoekmachines.

Een eerste vraag is natuurlijk hoe belangrijk dit signaal is. Dat is nu nog lastig te bepalen. Wel is de kans groot dat veel sites gaan werken aan hun snelheid waardoor jouw website relatief steeds langzamer wordt. Daarbij is de laadsnelheid ook voor je gebruikers van belang. Niet elke bezoeker heeft geduld om op langzame sites te wachten.

Het leek mij de hoogste tijd om eens wat meer werk te maken van de snelheid van mijn websites. Hieronder noem ik een aantal stappen die ik genomen heb.

1) Meten is weten

Het allereerste dat ik gedaan heb is bepalen hoe de huidige situatie is. Hiervoor gebruik ik meerdere methodes.

Google Webmaster Tools

Ga naar het dashboard van jouw website in Google Webmaster Tools. Onder het kopje "labs"->"Siteprestaties" vind je waardevolle informatie waaronder een mooie grafiek met de laadsnelheid van jouw website over de tijd.

Op deze pagina staat de laadtijd van enkele pagina's. Daarbij staat er een rijtje snelheid suggesties. Een uitgebreidere lijst met suggesties kun je vinden door het installeren van de Firefox toepassing Page Speed. Hier komen we later op terug, eerst gaan we op zoek naar nog meer informatie over de snelheid van de website.

Ik ben nu bezig met de site bedrijfopzetten.nl welke een gemiddelde laadsnelheid heeft van 3,3 seconden. Dit is langzamer dan 56% van de websites, een bedroevende score. Over enkele werken hoop ik beter cijfers te zien en een mooie verbetering in de grafiek.

Laadsnelheid meten met Google Analytics

Andre Scholten heeft een mooi artikel geschreven over hoe je laadsnelheid kan meten met Google Analytics. Je krijgt zo een overzicht van de gemiddelde laadsnelheid per pagina.

Zo kun je op zoek gaan naar de pagina's die het minst snel laden en daarmee specifiek op zoek naar oplossingen. Ik gebruik deze optie zelf niet maar wilde het toch  noemen aangezien ik me heel goed kan voorstellen dat er sites zijn waar iemand specifiek op zoek wil naar langzame pagina's.

Lees in het artikel van Andre Scholten hoe je laadsnelheid kan meten in Google Analytics.

2) Waar zit de flessenhals

Ik werk met een bestaande website die ik niet direct helemaal opnieuw wil bouwen. Ik wil dus op zoek gaan naar de grote boosdoeners voor mijn laadsnelheid. Er zijn meer dan genoeg tools die op een "per pagina" basis laten zien wat de laadsnelheid is en hoe die opgebouwd word.

Je kan dan per onderdeel gaan onderzoeken of het mogelijk is om dat onderdeel te versnellen en daarmee de laadtijd te verhogen. Ik begin hierbij met mijn homepage en hele populaire pagina's. Daarna ga ik wellicht de Google Analytics rapportage die ik hierboven noem installeren om zo verder te gaan met het optimaliseren van de langzaamste pagina's.

Ik gebruik de volgende methoden:

Page speed add-on van Google

Google heeft een eigen Firefox add-on gemaakt waarmee je de snelheid van je pagina's kan onderzoeken. De tool geeft vervolgens tips en best practices om de snelheid te verbeteren. Ik heb Page Speed 1.6 geinstalleerd.

Per pagina kan ik nu de snelheid meten en inzien waar optimalisatie nodig is.

Pingdom tools

Leuke online tool waarmee je de laadsnelheid kan meten. Ga naar de website van pingdom tools,  vul de URL in en druk op "test now". Mijn website bedrijfopzetten.nl komt uit op 3 seconden. Vergelijkbaar met de meting van Google webmaster tools en toch zeker voor verbetering vatbaar.

Deze tool laat heel mooi zien welke elementen geladen worden en hoe lang dit duurt. Er worden drie fasen onderscheiden.

  • De gele kleur laat de connectie snelheid met je server zien. Deze is bij mij gelukkig klein in vergelijking met de andere fasen. Als de connectie snelheid hoog is dan zou je kunnen overwegen om eens contact op te nemen met je host.
  • De groene kleur laat de tijd tussen de connectie en het starten van downloaden zien. Dit betekent dat de server bezig is met verwerken. Hier kun je mooie winsten boeken met caching zodat de server niet een hele pagina hoeft op te bouwen voordat deze naar de bezoeker wordt gestuurd.
  • De blauwe kleur laat de downloadtijd zien. Hoe groter het bestand hoe langer het downloaden duurt.

3) Enkele verbeterpunten

De eerste stappen zijn vaak het makkelijkst. Hieronder staan een aantal eerste stappen die ik heb genomen om de snelheid te verbeteren. Deze zijn over het algemeen relatief makkelijk te implementeren.

Google Analytics tracking code

Een tijdje terug is de nieuwe Asynchrone trackingcode van Google Analytics live gezet. Als je Google Analytics gebruikt kun je overwegen om deze te gebruiken. Hij laad sneller en is anders van opzet.

Bedenk wel dat het systeem nu anders werkt en dat je ook zal moeten checken of je huidige Google Analytics implementatie zoals _trackPageview, Event handlers, e.d. nog steeds goed werken. Meer informatie vind je in de gebruikershandleiding van de nieuwe code.

Opruimen

Bekijk je site eens goed en vraag je af of er overbodige dingen staan. Let hierbij vooral op externe bestanden die worden ingeladen. Bijvoorbeeld allerlei tracking en analyse codes. Via bijvoorbeeld Pingdom Tools welke ik hierboven noem kun je snel zien welke externe bestanden veel tijd kosten.

Ik had bijvoorbeeld javascript voor online betalingen op elke pagina staan terwijl ik maar op enkele pagina's betaalmogelijkheden aanbiedt. Dit Javascript zorgde echter voor een flinke laadtijd. Hetzelfde kan gelden voor scripts zoals 103bees, crazyegg, etc. Ook heb ik Woopra verwijderd aangezien ik toch alles meet via Google Analytics.

Probeer je HTML kleiner te maken door zoveel mogelijk Javascript en CSS in aparte bestanden te zetten. Soms heeft het ook zin om externe Javascript te verwijderen. Ik heb bijvoorbeeld een formulier van Aweber.com dat soms een lange laadtijd heeft. Er is echter ook een HTML variant van die formulieren waardoor geen extern bestand meer hoeft te worden opgehaald.

Voor zover je de benodigde kennis hebt kun je eens door je code gaan en hier zoveel mogelijk overbodige code uithalen. Ook CSS bestanden kunnen vaak een stuk kleiner als comments eruit worden gehaald en de code efficiënt wordt opgezet.

Probeer ook zoveel mogelijk scripts en CSS samen te voegen en zo min mogelijk externe bestanden in te laden. Hoe minder verzoeken om informatie een browser moet doen hoe sneller het gaat.

Bij het opruimen kan het zeer helpen om via de analyse tools te analyseren welke elementen van je pagina langzaam laden. Heb je ze wel nodig?

Caching

Caching zorgt dat de server niet telkens een pagina opnieuw hoeft op te bouwen. Een caching systeem maakt een kant en klare versie van een pagina die snel geserveerd kan worden. Als een pagina gewijzigd wordt dan dient ook de cache ververst te worden.

Er zijn verschillende mogelijkheden om te cachen die zeer afhankelijk zijn van het systeem dat je gebruikt.

Caching headers

Je vertelt de browser dat bepaalde bestanden niet telkens opgehaald hoeven te worden. Denk hierbij aan plaatjes , css, etc. Zelf werk ik op een apache server en kan ik via HTaccess een en ander regelen.

Ik gebruik hiervoor de volgende code:

<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>

Deze code is afkomstig van het artikel "Breng snelheid in je site voor gebruikers en zoekmachines" op Andrescholten.nl.

Plaatjes optimaliseren

Bij het optimaliseren van plaatjes komen een aantal punten direct onder de aandacht:

Allereerst kan het schelen om de plaatjes zo klein mogelijk te maken zonder dat kwaliteit verloren gaat. Je kan via programma's als photoshop de plaatjes kleiner maken. Er zijn verschillende tools om plaatjes kleiner te maken.

Let er ook op dat als je een klein plaatje op je site wil laten zien dat je deze ook in kleine resolutie opslaat. Soms gebruikt iemand een plaatje in resolutie 1000x1000 terwijl er alleen een Thumbnail van 150x150 wordt getoond door in de HTML een height en width in te stellen. Zonde van de bandbreedte.

Ten tweede zijn er de CSS sprites. Vaak wordt elk plaatje apart ingeladen. Dit kan sneller door al die plaatjes naast elkaar in 1 bestand te zetten en vervolgens via CSS te regelen welk stukje van dat grote plaatje getoond wordt. Dit heeft nog een tweede voordeel, namelijk dat bij rollovers e.d. het rollover plaatje niet meer apart hoeft te worden ingeladen.

Wil je meer lezen over Sprites, ga dan eens naar het artikel over CSS sprites op Websonic.nl.

Je kan ook nog gaan werken met parallelle downloads en het gebruik van externe servers voor je multimedia bestanden. Deze mthoden laat ik even buiten beschouwing. Ik heb me er eenvoudig weg niet in verdiept. Wie weet komt dat nog in een later stadium.

4) Meer informatiebronnen

Er zijn nog heel veel manieren om een website sneller te maken. Bovenstaande methoden ben ik momenteel zelf aan het proberen. Wil je verder lezen op het optimaliseren van je website kijk dan ook eens op:

Blijf op de hoogte

Vond je deze informatie interessant, zorg dan dat je het laatste nieuws en de beste kortingen via onze nieuwsbrief ontvangt. Schrijf je nu in >>>

Je kan je natuurlijk ook op onze RSS feed inschrijven en het nieuws volgen via je eigen RSS Reader.

{ 3 reacties }

Vermont auto insurance quotes 01.04.15 om 17:03

Nicole – Amanda is such an amazing photographer. She has an eye for a good shot and a quick finger to capture perfect images. From a mother to another mother she understands that it may take plenty if patients when working with small children. I’ve been a client to many local photographers and I have to say that I have found a photographer that’s truly a keeper. She is extremely professional, easy to get ahold of and has a great turnaround for getting your images back to you. If you are looking for an amazing family photographer I highly recommend A.R.T.Photography

Piyawat 23.04.15 om 3:33

Hey priya,I must say, you have done a great job in providing a coltmepe guide on site loading speed. However I’d like to ask if it is possible that you share a one-on-one video on how to edit htaccess file and how to load scripst in the footer and all others explained because that would make the post coltmepe and helpful. It will help many others since you know that editing htaccess file isn’t a small task. Can affect the site forever if done wrong.

amoxicillin online 30.04.15 om 14:09

Free knowledge like this doesn’t just help, it promote democracy. Thank you.

Previous post:

Next post: