Wat is de kritieke renderpad van webpagina's?

Dit is een reeks stappen die de browser uitvoert om de inhoud van de pagina op het scherm weer te geven, te beginnen met het ophalen van het HTML-document. Het omvat:

1. Bouwen van de DOM (Document Object Model): Het parsen van HTML-code en het maken van een boom van objecten die de structuur van het document vertegenwoordigen.
2. Bouwen van de CSSOM (CSS Object Model): Het parsen van CSS-bestanden en inline-stijlen om een boom van objecten te maken die de stijlen van de elementen vertegenwoordigen.
3. Bouwen van de Render Tree: Het combineren van de DOM en CSSOM. Er wordt een boom gemaakt van alleen de renderbare elementen met de toegepaste stijlen.
4. Lay-out (of Reflow): Het bepalen van de geometrische afmetingen en de positie van elk element op de pagina.
5. Verven (of Repaint): Het vullen van pixels op het scherm op basis van de Render Tree en de lay-outgegevens.

Het optimaliseren van het kritieke renderpad is gericht op het zo snel mogelijk weergeven van de eerste betekenisvolle inhoud (First Meaningful Paint) of interactiviteit (Time to Interactive) door de browser. Dit wordt bereikt door het minimaliseren van blokkadebronnen (JS en CSS), het optimaliseren van de grootte van bronnen en het laden ervan op het juiste moment.