Hoe ik mijn site een enorm stuk sneller heb gemaakt…

• Tweet

• Tweet

Voordat ik aan dit artikel begin wil ik allereerst al mijn dank uitspreken aan @driesbultynck.

Dries heeft de moeite genomen om veel zaken te gaan testen op zijn blog en dit weer te gaan delen (waar velen profijt van zullen hebben verwacht ik).

Dankzij veel van zijn tips over het verbeteren van de snelheid van je website ben ik gekomen tot dit resultaat.

Mijn website laadde eerst in 8 seconden (wat gewoon heel slecht is) en door veel testen laad mijn website nu in 0,8 seconden!

Eerdere blogpost

Bij het schrijven van dit artikel besef ik me dat ik al eerder een artikel heb geschreven over het verbeteren van je website snelheid (met de Google tool; “Page speed”). Dit heeft me zeker resultaat opgeleverd maar niet de snelheid die mijn website vandaag de dag heeft.

De zaken die ik heb doorgevoerd zijn niet even een plugin installeren of zaken over nemen die Google je voorschoteld. Het is niet heel moeilijk om de snelheid van je website aan te pakken maar je zal er wel moeite voor moeten doen.

Hoe heb ik dit gedaan? (part 2)

Waarom het belangrijk is om je website sneller te maken is waarschijnlijk wel duidelijk (conversie verhogend en wat SEO voordelen).

In het begin stadium van mijn website heb ik mijn eerste stappen gezet in het proces van snelheid optimalisatie met de Google tool (waar je nu geen tool meer voor nodig heb maar het online kan doen).

De 2 zaken waar ik toen op heb geconcentreerd zijn het verkleinen van de afbeeldingen (niet in formaat maar in bestandsgrootte) en verkleinen van CSS en Javascript bestanden.

CSS en Javascript bestanden nog kleiner maken

Het is van groot belang om CSS en Javascript bestanden zo klein mogelijk te maken of samen te voegen als dat kan (worden er nog minder bestanden geladen). De internet browser hoeft dan nog maar minder lap code door te nemen om het uiteindelijke resultaat te tonen.

Een online tool waarmee je deze beide type bestanden echt minimaal maakt is “YUI Compressor“.

Neem deze stappen door:

• Ga naar de website/pagina waarvan je de CSS bestanden/Javascript bestanden wilt verkleinen
• Vraag de broncode op. Rechtermuisknop; Paginabron weergeven (Google Chrome)
• Control F (zoeken) en zoek op .css. Alle CSS bestanden die voor deze website moeten worden geladen worden nu getoond
• Klik op de link van een CSS bestand en kopieer deze link
• Ga nu naar de YUI Compressor tool en plak deze link bij URL(s) en klik op compress! (selecteer ook nog even het goede bestandstype)
• Klik dan op download gzipped compressed file
• Pak dit bestand uit en overschrijf dit bestand met het originele bestand
• Herhaal dit proces voor de Javascript bestanden

P.S. Voordat je gaat herschrijven maak even een backup van het originele css/js bestand. Je weet maar nooit

Zet Gzip aan

Gzip zorgt ervoor dat je bestanden worden gecomprimeerd, vaak in GZ formaat. Heeft verder geen uitleg nodig, gewoon doen!

Volgens mij kan je dit instellen in de plugin W3 Total Cache maar ik heb dit gedaan in het Cpanel (onder “website optimization”)

Bezoeker eenmalig alle files laten laden

Een bezoeker op je website hoeft eigenlijk maar een keer alle files te laden. Door een Future Expire Headers in te stellen vertel je de terugkerende bezoeker dat eerder ingeladen bestanden uit de cache mogen komen.

Dit stel je in door onderstaande code in je .htaccess te plaatsen;

<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|js|css|gif|png|jpg|jpeg|swf|txt|html|htm)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
</IfModule>

Gebruik Google Libraries

Google host zelf veel bekende Javascript bestanden op hun eigen super snelle server. Deze worden gebruikt voor hun eigen toepassingen en geven jou de mogelijkheid deze libraries op te roepen.

De technische mensen onder ons kunnen hiervoor hier terecht en de (iets) minder technische mensen kunnen hiervoor de WordPress plugin downloaden.

WordPress tips

Voor diegene die WordPress gebruiken nog wat tips;

• Heb je echt alle plugins nodig die je momenteel hebt geïnstalleerd? Ze zijn niet allemaal even netjes geschreven namelijk en hoe minder plugins hoe beter. Zo heb ik onder andere de Google Analytics plugin verwijderd en de code handmatig in mijn WordPress template geplaatst.
• Installeer W3 Total Cache. Acitveren en bij Minify kan je CSS en JS bestanden samenvoegen en HTML op een lijn zetten (minder code regels).
• Je WordPress template optimaliseren. Dit kan met “Theme Minify plugin“.
• Als laatste heb ik getest dat je met de plugin “DB Cache” de caching van je site nog sneller kan zetten.

Dus wil je de snelheid van je site optimaliseren dan is er werk aan de winkel!

Succes!

Danny Verhoeven

Wat kunnen wij voor je doen?

Starting Business biedt een totaalpakket aan diensten voor het starten van een eigen bedrijf. Het pakket bestaat onder andere uit; een ondernemingsplan, administratie & belastingzaken, een kantoorruimte huren en nog veel meer!