De snelheid van je site verbeteren met YSlow (1)

Toen ik de overstap maakte naar WordPress 2.7 bleek mijn website een stuk trager dan voorheen. Dit is niet alleen nadelig voor je bezoekers, maar ook voor je ranking! Met de installatie van WP-Supercache heb ik dit weten te verbeteren. Deze plugin zorgt ervoor dat de eerste keer dat een pagina wordt opgeroepen deze wordt omgezet naar een HTML pagina.
Toch valt er nog meer te doen.

Ik liep in mijn zoektocht naar verbeteringen tegen een plugin van Yahoo aan waar je veel aan kunt hebben: YSlow voor Firebug.



Wat doet YSlow?
YSlow controleert je website op 13 onderdelen. Dit levert een eindcijfer op. De sub-onderdelen scoren van A tot en met F (het Amerikaanse systeem). Een A is goed, een F slecht. Zoals je kunt zien scoort Whelp niet heel erg goed: 49 van de 100… Dit gaan we proberen te verbeteren. We beginnen met het eerste advies:

1) Make fewer HTTP requests – Het aantal aanroepen dat je doet vanuit je pagina naar externe bestanden kost tijd. Als je deze aanroepen weet te combineren bespaart dit je tijd. De oplossing is bestanden van gelijke soort (javascript, CSS) zoveel mogelijk te combineren. WordPress kent hiervoor een paar plugins die we gaan inzetten. We installeren PHP Speedy WP. Deze plugin combineert JS en CSS bestanden. De installatie van PHP Speedy is ingrijpend, maar eenvoudig. Installeer de plugin en activeer deze. Ga vervolgens naar de PHP Speedy instellingen en test de installatie. Als alles werkt, activeer deze dan definitief. (Ga bij vragen naar de site van PHP Speedy).
Het effect is direct zichtbaar: van 46 punten scoort de site nu 59 punten.

2) Use a CDN – CDN staat voor Content Delivery Network. Dit houdt in dat je meerdere servers inzet voor je website die wereldwijd verspreid zijn. Afhankelijk van de nabijheid van een bezoeker wordt de dichtsbijzijnde server gekozen (en daarmee de snelste). Dit is uiteraard voor een kleine website als Whelp wat veel van het goede. Voor nu kunnen we hier dus maar weinig aan doen.

3) Add an Expires header – Je kunt pagina's (en met name afbeeldingen) voorzien van een Expires header. Als je deze op een datum uit het verleden hebt staan worden die afbeeldingen niet gecachet; dit is nadelig voor je snelheid omdat dit bestand iedere keer opnieuw ingeladen moet worden.

In dit voorbeeld zijn er heel wat bestanden die geen datum in de toekomst hebben. De Expires header datum van bestanden kan je – bij een Apache server – regelen in het .htaccess bestand. Voeg hiervoor de volgende code toe:

Hiermee zet je de standaard vervaldatum op vandaag + 1 maand. Je zult zien dat dit niet alle bestanden voorziet van het gewenste effect, maar het scheelt wel aanzienlijk; de laadtijd is (met cache) gereduceerd naar onder de 3 seconden. Externe bestanden buiten je domein worden niet meegenomen (in mijn geval zijn dit de advertenties van Google). Je ziet dat de aanroep naar de 21 van de 23 afbeeldingen is komen te vervallen.

Hoe nu verder
De volgende optimalisatie mogelijkheden zullen onder andere het zippen van bestanden zijn (voor zover mogelijk) en het verplaatsen van javascript naar de onderkant van de pagina. Meer hierover in het volgende deel van over YSlow.

Alvast meer lezen

• De YSlow User Guide

Stem / Bookmark [?]