Snelheid
WordPress CSS optimaliseren: critical CSS en minification
18 februari 2025 · 6 min leestijd
CSS is essentieel voor de vormgeving van uw website, maar kan ook een prestatiekiller zijn. Grote CSS-bestanden, render-blocking stylesheets en ongebruikte regels vertragen het laden van pagina's aanzienlijk. Gelukkig zijn er bewezen technieken om CSS te optimaliseren.
Bij WP Installeren wij CSS-optimalisatie standaard bij al onze onderhoudspakketten. In dit artikel delen wij onze aanpak.
Het probleem: render-blocking CSS
Browsers laden CSS in de <head> van de pagina. Dit is nodig om te voorkomen dat de pagina zonder stijlen wordt weergegeven (FOUC — Flash of Unstyled Content). Maar het betekent ook dat de browser moet wachten tot alle CSS is gedownload voordat rendering begint.
Oplossing 1: Critical CSS
Critical CSS is de minimale hoeveelheid CSS die nodig is om de bovenste helft van de pagina correct weer te geven. Deze CSS wordt inline in de <head> geplaatst. De volledige CSS wordt asynchroon geladen. Voordelen: - De pagina rendert direct met correcte stijlen - Geen FOUC - Volledige CSS laadt op de achtergrond
Oplossing 2: CSS minification
Minification verwijdert overbodige tekens uit CSS: - Witruimte, enters en tabs - Comments - Overbodige puntkomma's Dit bespaart 15-30% bestandsgrootte. Alle caching-plugins (WP Rocket, LiteSpeed Cache) bieden automatische minification.
Oplossing 3: CSS combineren
Elk CSS-bestand vereist een apart HTTP-verzoek. Door CSS-bestanden te combineren reduceert u het aantal verzoeken. Let op: Met HTTP/2 is dit minder belangrijk dan voorheen. HTTP/2 kan meerdere bestanden parallel versturen.
Oplossing 4: Ongebruikte CSS verwijderen
Grote CSS-frameworks zoals Bootstrap bevatten veel code die u niet gebruikt. Tools zoals PurgeCSS analyseren welke classes daadwerkelijk op uw website worden gebruikt en verwijderen de rest. Dit kan de CSS-bestandsgrootte met 70-90% reduceren.
Oplossing 5: Media queries gebruiken
Laad stylesheets alleen voor de betreffende media: <link rel="stylesheet" href="print.css" media="print"> De browser laadt deze stylesheet pas in wanneer van toepassing, wat de initiele rendering versnelt.
Implementatie in WordPress
De eenvoudigste manier is een caching-plugin: **WP Rocket:** Critical CSS generatie, CSS minify, CSS combine, remove unused CSS **LiteSpeed Cache:** CSS minify, Critical CSS, Load CSS asynchronously **Autoptimize:** CSS optimize, Critical CSS, Inline CSS
Testen en troubleshooten
Na optimalisatie altijd testen: 1. Controleer of de layout correct is 2. Test op verschillende schermformaten 3. Controleer of alle elementen correct gestijld zijn 4. Meet met PageSpeed Insights voor en na
WP Maintainer CSS-optimalisatie
Wij implementeren critical CSS, minification en ongebruikte-CSS-verwijdering als standaardonderdeel van ons onderhoudspakket. Wij testen grondig en monitoren de prestaties continu. Zo blijft uw website snel én mooi.
Wilt u meer informatie?
Neem contact op via WhatsApp of bekijk onze pakketten.