De snelheid van je site verbeteren met YSlow (2)

In het vorige deel hebben we YSlow voor het eerst gebruikt en al wat snelheidswinst weten te boeken. We hebben gekeken naar het omlaag brengen van het aantal HTTP verzoeken (advies 1) en het cachen van met name afbeeldingen (advies 3). We gaan in dit deel door met de volgende stappen.

4) Gzip components – Door een bestand op de server eerst te zippen en dan over de 'lijn' sturen kan je de hoeveelheid data met 70% omlaag brengen. De browser van je bezoeker moet dan wel die gegevens weer kunnen unzippen. Volgens Yahoo geldt dit voor 90% van de browsers. Aangezien ik mijn grootste 'klandizie' in Nederland heb, ga ik ervan uit dat dit percentage nog wel hoger zal liggen. De moeite waard dus om te proberen.

Voeg hiervoor de volgende code toe aan je .htaccess bestand.

Wat we hier testen is of de module mod_deflate wel geactiveerd is op de server. Zo ja, dan gebruiken we die bij javascript, CSS en php bestanden. Het effect is dat de homepage nu (na caching) onder de 2 seconden komt! Maar ook bij een eerste aanroep zal dit heel wat tijd schelen. Gzip via PHP speedy heb ik nog aanvullend getest, maar dit bleek niet te werken in Internet Explorer…

5) Put CSS at the top – Zet je stylesheets bovenin je pagina. Dit staat standaard al goed bij Whelp. Niet alleen horen CSS stylesheets in de HEAD van je pagina, maar hierdoor ervaart je bezoeker dat de pagina sneller inlaadt. Zeker als je ook volgens XHTML standaarden werkt.

6) Put JS at the bottom – Javascript bestanden moet je juist onderin de pagina zetten. Het inladen van een Javascript bestand belemmert namelijk het inladen van andere bestanden. Door ze onderin de pagina in te laden, ziet je bezoeker de pagina namelijk eerder, waarna de Javascript bestanden één voor één inladen. Je moet hier wel voorzichtig mee zijn. Niet alle Javascript frameworks kunnen hiermee werken (gebruik je jQuery, doe dit dan niet). Aangezien PHP Speedy van nature javascript bestanden niet onderin zet en je – om dit wel te doen – deze plugin zou moeten hacken, kies ik ervoor om het zo te laten.
Wil je dit wel? Lees dan dit artikel over PHP Speedy en WP Super Cache.

7) Avoid CSS expressions – Vermijd CSS expressies. Het is mogelijk om binnen CSS afhankelijk van bepaalde voorwaarden verschillende stijlen toe te passen. Hier wordt dit gedaan voor even en oneven uren.

Ik vermoed dat dit niet veel gebruikt wordt; zelf gebruik ik dit niet. Het nadeel van CSS expressies is, dat ze vrij vaak uitgerekend moeten worden (wat je site vertraagt).

8) Make JS and CSS external – Roep Javascript en CSS bestanden aan in je pagina als externe bestanden, zodat ze goed te cachen zijn. Het tegenovergestelde is dat je ze 'inline' gebruikt (dat wil zeggen in de broncode van je pagina). Wat het beste werkt zal afhangen van je pagina. Heb je veel CSS en veel Javascript, gebruik dan externe bestanden.

9) Reduce DNS lookups – Verlaag DNS zoekacties. Elke domeinnaam wordt herleid tot een IP-adres. Zo is www.whelp.nl te herleiden tot 82.94.181.250. De vertaling van je domeinnaam naar het adres gebeurt op een Domain Name Server (DNS); deze vertaling kost tijd. Hoe meer je van dit soort 'lookups' hebt op je pagina (omdat je bijvoorbeeld gegevens van meerdere domeinen als content inlaadt), des te meer tijd je verliest; dit gaat overigens om milliseconden.
Het voordeel van meerdere domeinnamen (bijvoorbeeld subdomeinen) is dat je hiermee gegevens parallel kunt inladen; zo is het een goed idee om – als je veel afbeeldingen gebruikt – deze op een apart subdomein te plaatsen.

Hoe nu verder?
Ik heb het grootste deel van de mogelijkheden langsgelopen. Inmiddels heeft dat tot een aardig effect geleid: we zijn opgeklommen naar score 60. Belangrijker is dat de pagina's echt sneller inladen. Niet alle suggesties heb ik kunnen overnemen en een aantal zaken is nog te doen. Meer hierover in het volgende deel over YSlow.

Stem / Bookmark [?]