Je laat bezoekers wachten: render-blocking scripts en CSS oplossen

Een browser leest je HTML van boven naar beneden. Komt hij in de head een script of stylesheet tegen, dan wacht hij tot dat bestand binnen is voordat hij iets op het scherm zet. Dat heet render-blocking: blokkerend voor het tekenen van je pagina.

In het kud-rapport Je laat bezoekers wachten op bestanden

Waarom het uitmaakt

Elke seconde dat je bezoeker naar een wit scherm kijkt, is een seconde waarin hij kan afhaken. Vooral op mobiel met een wisselende verbinding stapelt die wachttijd zich snel op.

Het vertraagt ook je LCP, een van de Core Web Vitals waar Google naar kijkt.

Zo los je het op

Zet defer op scripts in de head. Ze laden dan op de achtergrond en draaien pas als de HTML gelezen is.
Gebruik async voor losse scripts die niet van andere scripts afhankelijk zijn, zoals statistieken.
Verplaats scripts die alleen onderaan nodig zijn naar het eind van de body.
Voor CSS: zet de stijlen die nodig zijn voor het eerste scherm direct in de head en laad de rest later. Dit heet kritieke CSS.
Combineer of verwijder kleine CSS-bestanden die maar een paar regels bevatten.

<!-- blokkeert -->
<script src="/js/slider.js"></script>

<!-- blokkeert niet -->
<script src="/js/slider.js" defer></script>

Op jouw platform

WordPress: WP Rocket, LiteSpeed Cache en Autoptimize hebben een optie om JavaScript uit te stellen en kritieke CSS te maken. Test je site daarna goed, want sommige plugins verwachten hun scripts eerder.

Veelgestelde vragen

Wat is het verschil tussen defer en async?

Met defer draaien scripts pas als de HTML klaar is, in de volgorde waarin ze staan. Met async draait een script zodra het binnen is, in willekeurige volgorde. Twijfel je, kies dan defer.

Kan alles op defer?

Bijna alles. Alleen scripts die iets moeten doen voordat de pagina getekend wordt, zoals sommige cookie- of A/B-testtools, moeten eerder.