Render-blocking
Bronnen (vooral CSS en synchrone scripts) die geladen en verwerkt moeten zijn voordat de browser iets op het scherm kan tekenen. Ze "blokkeren het renderen" en vertragen de eerste pixel, een belangrijke oorzaak van trage gevoelde laadtijd.
Waarom: CSS is render-blocking omdat de browser geen ongestileerde inhoud wil tonen (FOUC); hij wacht tot alle CSS in de head is opgehaald en geparsed. Synchrone <script>-elementen (zonder defer of async) blokkeren de parser: ze stoppen het parsen van de HTML tot ze zijn opgehaald en uitgevoerd. Grote of traag geleverde CSS/JS in de <head> vertraagt daardoor First Contentful Paint en LCP.
Optimalisatie: kritieke CSS inline (het kleine stuk voor het eerst zichtbare deel) en de rest asynchroon laden, defer of async op scripts gebruiken, CSS en JS verkleinen en splitsen, en belangrijke bronnen preloaden. Prestatietools markeren ze als "render-blocking resources". Ze beperken is een van de effectiefste prestatiemaatregelen.