CSS en Javascript optimaliseren

CSS en Javascript optimaliseren

Een WordPress website sneller maken is een interessante uitdaging. Niet alleen omdat Google het prettig vindt, maar vooral voor de gebruikerservaring is het belangrijk dat je website voldoende snel laadt. In dit artikel zijn de eerste stappen voor het sneller maken al ter sprake gekomen.

Begin van het proces

Web-ID heeft een testsite. Deze staat gewoon online en is ongeveer hetzelfde opgebouwd als deze website. Deze website moet nog geoptimaliseerd worden. Dat geeft dus een mooie gelegenheid om het optimalisatieproces hier te beschrijven! Dit proces heeft de website van Web-ID al doorlopen.

Uiteraard heb ik er al voor gezorgd dat de afbeeldingen die ik gebruik al heb geoptimaliseerd. Daarnaast ondersteunt mijn hostingpakket standaard GZIP.

Als eerste winstpuntje heb ik de emoji’s uitgeschakeld. Omdat deze weinig tot niet gebruikt zullen gaan worden. Dit scheelt enkele scripts en css die geladen moet worden. Hoe je die kunt uitschakelen door middel van een stukje code, lees je hier.

Beperken HTTP-requests

Vervolgens wil ik graag dat zo veel mogelijk css en javascript gecombineerd wordt. Dat scheelt veel zogenaamde HTTP-requests. Dat heeft een erg negatief effect in YSlow, zoals je in de afbeelding kan zien, maar ook in de paginalaadtijd.

WPAntwoord 1

Zoals je ziet, worden er 20 externe Javascript scripts en 12 externe stylesheets geladen. In totaal 37 requests. Deze zijn allemaal afkomstig van het gebruikte thema en de diverse plugins.

Oplossing met plugin

De bovenstaande minpunten ga ik beperken door de plugin Autoptimize te installeren. Deze plugin combineert de verschillende scripts en stylesheets en optimaliseert deze, plus de html, als je dat wilt. Tevens wordt ervoor gezorgd dat alle scripts in de footer worden geladen. Hoe je Autoptimize kan instellen, wordt hier uitgelegd.

LET OP: standaard worden door Autoptimize alle stylesheets en alle scripts gecombineerd in één stylesheet en één script. Wanneer alles is ingesteld moet je alle functionaliteit van de website testen, om er zeker van te zijn dat alles nog goed functioneert en op de juiste manier wordt weergegeven. Wanneer bepaalde onderdelen niet meer goed functioneren of tonen, zal je scripts of stylesheets moeten uitsluiten van combineren. Hierin voorziet deze plugin gelukkig en dat is ook een belangrijke reden waarom ik juist voor deze plugin heb gekozen. De beste manier om dan uit te proberen welke scripts en stylesheets je niet kan combineren, is door Autoptimize uit te schakelen, de website opnieuw te laden en in de paginabron alle scripts en stylesheets op te zoeken die worden geladen. Noteer deze en schakel de plugin opnieuw in. Vervolgens kun je door één voor één scripts en stylesheets uit te sluiten van combineren, uitvinden welke je niet moet combineren. Tip: begin met het uitsluiten van jquery.js. Deze wil nog wel eens tot problemen leiden wanneer deze niet goed geladen kan worden.

Het resultaat

WPAntwoord 2

Je ziet dat de paginalaadtijd van 2,7 seconden is teruggegaan naar 1,5 seconden, de paginagrootte van 200kb naar 163kb en het aantal requests van 37 naar 7! Deze getallen kunnen nog ietsje hoger uitvallen als blijkt dat een script of stylesheet toch niet gecombineerd kan worden. Maar de winst is erg groot en dus zeker de moeite waard!

Met deze verbetering wordt ook een goede basis gelegd voor verdere optimalisatie. Zoals je in de afbeeldingen hebt kunnen zien, zijn er nog een paar onderdelen waarop nog niet hoog wordt gescoord. Die worden binnenkort aangepakt.

Ronald Heijnes

Sinds 2008 hou ik mezelf bezig met functionaliteit, het beheer en onderhoud van WordPress en probeer WordPress websites zo snel mogelijk te maken. En deze kennis wil ik graag delen!
Sluit Menu