Webprestatieoptimalisatie en Lighthouse · Les

Renderblokkerende resources

Identificeer en beperk de invloed van renderblokkerende CSS en JavaScript op de initiële laadtijd van pagina's.

Les 2 van 412 stappen

Renderblokkerende resources is een gratis Webprestatieoptimalisatie en Lighthouse-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Webprestatieoptimalisatie en Lighthouse. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Webprestatieoptimalisatie en Lighthouse bevat in totaal 4 lessen.

Wat blokkeert je pagina?

Wanneer een browser een webpagina laadt, moet deze verschillende bronnen verwerken, zoals HTML, CSS en JavaScript. Soms moeten bepaalde bronnen volledig zijn verwerkt voordat de browser inhoud aan de gebruiker kan laten zien.

Deze worden renderblokkerende bronnen genoemd. Ze voorkomen dat de browser de pagina rendert totdat ze zijn verwerkt, waardoor de 'First Contentful Paint' wordt vertraagd.

Snel bekeken: renderen door de browser

Om een pagina weer te geven, doorloopt de browser een reeks stappen die het kritieke renderingspad wordt genoemd. Belangrijke stappen zijn:

HTML parseren: hiermee wordt het Document Object Model (DOM) opgebouwd.
CSS parseren: hiermee wordt het CSS Object Model (CSSOM) opgebouwd.
Combineren: hiermee wordt de renderv structuur (DOM + CSSOM) gemaakt.
Indeling: hiermee worden de posities en afmetingen van elementen berekend.
Tekenen: hiermee worden pixels op het scherm getekend.

Zowel het DOM als het CSSOM zijn nodig voordat de renderstructuur kan worden opgebouwd. Daarom is CSS een essentieel onderdeel van het renderen.

CSS: de renderblokkering

Externe CSS-bestanden blokkeren standaard het renderen. Dit betekent dat de browser het renderen pauzeert totdat alle externe stijlbladen die in de <head> van je HTML zijn gekoppeld, zijn gedownload, geparseerd en toegepast.

Dit is belangrijk omdat de browser moet weten hoe elementen eruitzien voordat hij ze correct kan tekenen. Als CSS lang nodig heeft om te laden, zien je gebruikers langer een leeg scherm.

Voorbeeld: standaardblokkering door CSS

Bekijk deze eenvoudige HTML. De browser stopt met het parseren van de HTML en wacht totdat style.css is gedownload en verwerkt voordat hij iets kan renderen.

<!DOCTYPE html>
<html>
<head>
  <title>Blocking CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome!</h1>
  <p>This content is waiting.</p>
</body>
</html>

Voorwaardelijke CSS met `media`

Je kunt sommige CSS het renderen niet laten blokkeren door het attribuut media in je tag <link> te gebruiken. Hiermee geef je de browser aan dat een stijlblad alleen onder bepaalde voorwaarden van toepassing is, bijvoorbeeld voor afdrukken of specifieke schermformaten.

Als de voorwaarde van media niet overeenkomt met de huidige weergaveomgeving, downloadt de browser de CSS nog steeds, maar blokkeert deze niet de eerste render.

<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="(max-width: 600px)">

Essentiële stijlen inline plaatsen

Een andere strategie om CSS die het renderen blokkeert te beperken, is het inline plaatsen van essentiële stijlen. Dit zijn de minimale CSS-regels die nodig zijn om de inhoud boven de vouw weer te geven, oftewel wat gebruikers als eerste zien.

Door deze stijlen rechtstreeks in een tag <style> binnen de HTML-<head> te plaatsen, hoeft de browser geen extra netwerkaanvraag te doen. Daardoor verloopt de eerste render sneller. Overige, niet-essentiële CSS kan asynchroon worden geladen.

JavaScript stopt alles

Net als CSS kan ook JavaScript het renderen blokkeren. Wanneer de browser een traditionele tag <script> tegenkomt zonder de attributen async of defer, pauzeert hij het parseren van de HTML.

Vervolgens downloadt, parseert en voert hij het JavaScript-bestand uit. Pas nadat het script klaar is met uitvoeren, gaat het parseren van de HTML verder. Dit kan het renderen aanzienlijk vertragen.

Voorbeeld: standaardblokkering door JavaScript

Hier pauzeert de browser het parseren van het HTML-document wanneer hij script.js tegenkomt. Als script.js groot is of langzaam laadt, worden de elementen <h1> en <p> pas geparseerd of gerenderd nadat het script klaar is.

<!DOCTYPE html>
<html>
<head>
  <title>Blocking JS</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Content Below Script</h1>
  <p>This waits for the script.</p>
</body>
</html>

`async` en `defer` voor scripts

HTML biedt twee attributen voor tags <script> om te voorkomen dat JavaScript het renderen blokkeert:

async: downloadt het script parallel aan het parseren van de HTML. Het script wordt uitgevoerd zodra het is gedownload, mogelijk voordat het parseren van de HTML is voltooid. Geschikt voor onafhankelijke scripts.
defer: downloadt het script parallel aan het parseren van de HTML. Het script wordt pas uitgevoerd nadat het parseren van de HTML volledig is voltooid, maar vóór de gebeurtenis DOMContentLoaded. De uitvoeringsvolgorde blijft behouden.

Codevoorbeeld: niet-blokkerend JavaScript

Door async of defer toe te voegen, kan de browser doorgaan met het parseren van HTML terwijl de scripts worden gedownload. Dit verbetert de ervaren prestaties.

<!DOCTYPE html>
<html>
<head>
  <title>Non-Blocking JS</title>
  <script async src="analytics.js"></script>
  <script defer src="main-app.js"></script>
</head>
<body>
  <h1>Page Content</h1>
  <p>This renders without waiting for scripts.</p>
</body>
</html>

Vind de blokkering!

Welke van de volgende bronnen worden standaard meestal beschouwd als bronnen die het renderen blokkeren?

Beantwoord dit in de interactieve les

Belangrijkste punten

Bronnen die het renderen blokkeren, vertragen de weergave van je webpagina. Zowel externe CSS als traditionele JavaScript kunnen het renderproces van de browser blokkeren.

Voor CSS: gebruik het attribuut media voor voorwaardelijk laden en overweeg essentiële stijlen inline te plaatsen.
Voor JavaScript: gebruik async voor onafhankelijke scripts of defer voor scripts die afhankelijk zijn van het DOM, zodat downloaden parallel kan plaatsvinden en de uitvoering niet wordt geblokkeerd.

Het optimaliseren van deze bronnen is een belangrijke stap naar betere webprestaties!

Gratis beginnen

Leer Webprestatieoptimalisatie en Lighthouse met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 12
Lessen: 48

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Renderblokkerende resources” gratis?

Ja — de volledige tekst van “Renderblokkerende resources” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Webprestatieoptimalisatie en Lighthouse wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Webprestatieoptimalisatie en Lighthouse bevat in totaal 4 lessen.

Wat leer ik in “Renderblokkerende resources”?

Identificeer en beperk de invloed van renderblokkerende CSS en JavaScript op de initiële laadtijd van pagina's. Je oefent met Webprestatieoptimalisatie en Lighthouse door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Webprestatieoptimalisatie en Lighthouse te beginnen?

Ervaring vooraf is niet nodig. Webprestatieoptimalisatie en Lighthouse op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Renderblokkerende resources”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Webprestatieoptimalisatie en Lighthouse?

Ja. Elke les over Webprestatieoptimalisatie en Lighthouse bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Webprestatieoptimalisatie en Lighthouse