Home › Kennisbank › WordPress
Hoe minimaliseer ik CSS, JavaScript en HTML voor snellere laadtijden?
Direct antwoord
Installeer in WordPress de gratis plugin Autoptimize en zet onder Instellingen > Autoptimize het optimaliseren van JavaScript, CSS en HTML aan. De plugin haalt overbodige spaties, regeleinden en opmerkingen uit de code, zodat de bestanden kleiner zijn en sneller laden. Test je website na elke instelling en meet het verschil met GTmetrix.
Wat heb je nodig?
- Een inlog voor het WordPress-dashboard met de rol Beheerder
- Een recente back-up van je website. Lees hoe je een back-up van je WordPress-website maakt
- Een eerste snelheidsmeting van je website met GTmetrix of Google PageSpeed Insights, zodat je het verschil kunt zien
- Een half uur tijd om na elke instelling je website te testen
Stappenplan12 stappen
- 1Maak een back-up
- 2Meet welke bestanden de meeste laadtijd kosten
- 3Installeer Autoptimize
- 4Open de instellingen van Autoptimize
- 5Zet het optimaliseren van JavaScript aan
- 6Zet het optimaliseren van CSS aan
- 7Zet het optimaliseren van HTML aan
- 8Sla op en leeg de cache
- 9Test je website
- 10Verwijder ongebruikte CSS en JavaScript
- 11Probeer het bundelen van bestanden
- 12Meet opnieuw
Wat zijn CSS, JavaScript en HTML en wat betekent minimaliseren?
Elke pagina van je website bestaat uit drie soorten code. HTML is de structuur: de tekst, de koppen en de afbeeldingen. CSS is de opmaak: kleuren, lettertypen en de indeling. JavaScript zorgt voor beweging en interactie, zoals een uitklapmenu, een slider of een formulier dat controleert wat je invult.
Ontwikkelaars schrijven die code met spaties, regeleinden en opmerkingen, zodat hij leesbaar blijft. De browser van je bezoeker heeft dat niet nodig. Minimaliseren (minify) haalt al die overbodige tekens weg. De bestanden worden kleiner en downloaden sneller. Je website ziet er daarna precies zo uit als daarvoor.
Stappenplan 12 stappen
Stap 1: Maak een back-up
Maak eerst een back-up van je website. Lees hoe je een back-up van je WordPress-website maakt.
Let op: het verkleinen en samenvoegen van code kan een menu, slider of formulier laten haperen. Met een back-up zet je je website altijd terug.
Stap 2: Meet welke bestanden de meeste laadtijd kosten
Ga naar GTmetrix, vul het adres van je website in en start de test. Open in het rapport het tabblad met het watervaloverzicht (Waterfall). Daar zie je per bestand hoe groot het is en hoe lang het laden duurt. Noteer de grootste CSS- en JavaScript-bestanden.
Stap 3: Installeer Autoptimize
Ga in het WordPress-dashboard naar Plugins > Plugin toevoegen. Typ Autoptimize in het zoekveld rechtsboven, klik op Nu installeren en daarna op Activeren.
Gebruik je al WP Rocket, dan heb je Autoptimize niet nodig. WP Rocket heeft dezelfde opties in het onderdeel voor bestandsoptimalisatie. Zet een functie nooit in twee plugins tegelijk aan.
Stap 4: Open de instellingen van Autoptimize
Ga naar Instellingen > Autoptimize. Je komt op het tabblad met de opties voor JavaScript, CSS en HTML. Staan er weinig opties, klik dan rechtsboven op de knop om de geavanceerde instellingen te tonen.
Stap 5: Zet het optimaliseren van JavaScript aan
Zet in het blok met de JavaScript-opties het vinkje aan bij de optie om JavaScript-code te optimaliseren. Laat het bundelen van JavaScript-bestanden voorlopig uit. Zonder bundelen biedt Autoptimize de optie om scripts niet samen te voegen maar uitgesteld te laden; zet die aan.
Stap 6: Zet het optimaliseren van CSS aan
Zet in het blok met de CSS-opties het vinkje aan bij de optie om CSS-code te optimaliseren. Laat ook hier het bundelen van CSS-bestanden voorlopig uit. Je kunt het later aanzetten en testen of het verschil maakt.
Stap 7: Zet het optimaliseren van HTML aan
Zet in het blok met de HTML-opties het vinkje aan bij de optie om HTML-code te optimaliseren. Autoptimize haalt dan de overbodige spaties en regeleinden uit de pagina’s zelf.
Stap 8: Sla op en leeg de cache
Klik onderaan de pagina op de knop om de wijzigingen op te slaan en de cache te legen. Gebruik je daarnaast een cachingplugin, leeg dan ook daar de cache. Anders zien bezoekers nog de oude versie van je pagina’s.
Stap 9: Test je website
Open je website in een venster waarin je niet bent ingelogd. Controleer het menu op mobiel en desktop, sliders, formulieren, pop-ups en bij een webshop de winkelwagen en het afrekenen. Werkt iets niet meer, lees dan het onderdeel over problemen hieronder.
Stap 10: Verwijder ongebruikte CSS en JavaScript
Dit is een optionele stap voor wie meer snelheid wil. Met WP Rocket zet je in het onderdeel voor bestandsoptimalisatie de optie aan om ongebruikte CSS te verwijderen. Met de gratis plugin Asset CleanUp zet je per pagina de CSS- en JavaScript-bestanden uit van plugins die op die pagina niet nodig zijn, bijvoorbeeld het script van een formulierplugin op pagina’s zonder formulier.
Let op: zet nooit een bestand uit waarvan je niet weet waar het voor dient. Test elke pagina na het uitzetten.
Stap 11: Probeer het bundelen van bestanden
Ook deze stap is optioneel. Zet in Instellingen > Autoptimize het bundelen van CSS-bestanden aan, sla op, leeg de cache en meet opnieuw met GTmetrix. Is je website sneller en werkt alles nog, laat het dan aan. Is er geen verschil of werkt iets niet meer, zet het dan weer uit. Herhaal dit voor JavaScript.
Stap 12: Meet opnieuw
Voer de test in GTmetrix en in Google PageSpeed Insights opnieuw uit. Vergelijk de grootte van de CSS- en JavaScript-bestanden en de totale laadtijd met je eerste meting. Lees hoe je je WordPress-website verder sneller maakt.
Controleer of het gelukt is
In het watervaloverzicht van GTmetrix zijn de CSS- en JavaScript-bestanden kleiner dan bij je eerste meting en is de totale laadtijd korter. In Google PageSpeed Insights zijn de aanbevelingen over het verkleinen van CSS en JavaScript en over blokkerende bronnen verdwenen of kleiner geworden.
Je website ziet er precies zo uit als daarvoor en alle onderdelen werken nog.
Welke andere technieken horen hierbij?
| Techniek | Wat het doet | Wanneer nuttig |
|---|---|---|
| Bundelen (aggregate) | Voegt losse CSS- of JavaScript-bestanden samen tot één bestand, zodat de browser minder verzoeken naar de server stuurt | Bij oudere servers zonder HTTP/2. Moderne servers verwerken veel losse bestanden tegelijk, waardoor bundelen weinig oplevert en soms vertraagt. Test het verschil |
| Uitgesteld laden (defer) of asynchroon laden (async) | Laat de browser eerst de pagina tonen en de scripts daarna uitvoeren, in plaats van te wachten tot elk script is geladen | Bijna altijd. Dit lost de melding over blokkerende scripts in PageSpeed Insights op |
| Ongebruikte CSS en JavaScript verwijderen | Laadt per pagina alleen de code die op die pagina echt wordt gebruikt | Bij websites met veel plugins of een paginabouwer. Hiervoor heb je WP Rocket of Asset CleanUp nodig |
Werkt het niet?
De opmaak van je website is verstoord na het optimaliseren van CSS
Zet in Instellingen > Autoptimize het bundelen van CSS uit, sla op en leeg de cache. Helpt dat niet, zet dan ook het optimaliseren van CSS uit. Gevorderden kunnen in het veld met uitgesloten CSS-bestanden het bestand toevoegen dat problemen geeft.
Een menu, slider of formulier werkt niet meer
Dat komt meestal door het uitgesteld laden of het bundelen van JavaScript. Zet die opties uit, sla op en leeg de cache. Werkt alles weer, zet de opties dan één voor één aan en test na elke stap. Zo vind je welk script het probleem geeft en kun je dat script uitsluiten.
Je ziet geen verschil op je website
Je bekijkt een bewaarde versie uit de cache. Leeg de cache van Autoptimize, van je cachingplugin en van je browser. Open de website daarna in een venster waarin je niet bent ingelogd.
PageSpeed Insights blijft adviseren om ongebruikte JavaScript te verminderen
Vaak gaat het om scripts van buiten je website, zoals een chatvenster, YouTube-video’s, Google Maps of meetcodes. Die kan Autoptimize niet verkleinen. Overweeg of je elk van die diensten nodig hebt, of laad ze pas als de bezoeker erop klikt. Lees hoe je lazy loading instelt.
Je gebruikt Autoptimize en WP Rocket tegelijk
Beide plugins verkleinen code. Kies er één voor deze taak en zet de bijbehorende opties in de andere plugin uit. Anders wordt dezelfde code twee keer bewerkt en krijg je fouten.
Veelgestelde vragen
Vervangt Autoptimize een cachingplugin?
Nee. Autoptimize verkleint code, maar bewaart geen kant-en-klare pagina’s. Gebruik het samen met een cachingplugin, of kies WP Rocket, dat beide doet. Lees welke cachingplugin het beste bij je website past.
Verandert mijn website van uiterlijk door het minimaliseren?
Nee. Minimaliseren haalt alleen tekens weg die de browser niet nodig heeft. Ziet je website er toch anders uit, dan is een bestand niet goed samengevoegd en zet je het bundelen uit.
Wat is het verschil tussen minimaliseren en comprimeren?
Minimaliseren haalt overbodige tekens uit de code zelf. Comprimeren (gzip of Brotli) pakt het bestand in voordat de server het verstuurt, zoals een zipbestand. De meeste servers comprimeren automatisch. Beide technieken samen geven het beste resultaat.
Kom ik hoger in Google met kleinere code?
Niet direct. Kleinere code maakt je pagina’s sneller, en snelheid telt mee voor je positie. Het effect is het grootst op mobiel, waar de verbinding vaak trager is.
Moet ik CSS en JavaScript nog bundelen?
Meestal niet. Moderne servers met HTTP/2 verwerken veel losse bestanden tegelijk. Bundelen levert dan weinig op en kan zelfs vertragen. Test het en kijk in GTmetrix of je website sneller wordt.
Hulp nodig?
Schakel de helpdesk van ViVortis in als:
- je website er na het optimaliseren anders uitziet en je niet weet welke instelling de oorzaak is
- een menu, formulier of het afrekenen van je webshop niet meer werkt na het verkleinen van code
- je website traag blijft terwijl de code al is geminimaliseerd
- je wilt dat ViVortis de snelheidsinstellingen van je website naloopt
Dien een ticket in via de helpdesk van ViVortis en voeg waar mogelijk een screenshot toe.
Lukt het niet?
Dien een ticket in met een screenshot van wat je ziet. De helpdesk reageert meestal binnen één werkdag.
Verder lezen
- Hoe maak ik mijn WordPress-website sneller?
- Welke cachingplugin is het beste voor WordPress?
- Hoe optimaliseer ik lettertypen (fonts) om mijn WordPress-website sneller te maken?
- Wat is Google PageSpeed Insights en hoe gebruik ik het?
Meer van ViVortis