Wat is progressieve rendering?

Progressief renderen is een techniek om de prestaties van webpagina's te verbeteren, waarbij de inhoud in fasen wordt geladen en weergegeven, in plaats van alles tegelijk. Dit verbetert de waargenomen prestaties en interactiviteit, doordat de gebruiker een deel van de pagina kan zien en ermee kan interactie hebben voordat alle bronnen volledig zijn geladen.

Belangrijkste benaderingen:

Lazy Loading: Afbeeldingen, video's of andere resource-intensieve elementen worden alleen geladen wanneer ze zichtbaar worden in de viewport van de gebruiker.
```

<img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="Beschrijving van de afbeelding">
```
Streaming rendering: HTML-code in delen verzenden, zodat de browser kan beginnen met parseren en renderen voordat de hele pagina is ontvangen.

Server-side rendering (SSR) of Hydratie: Genereren van de initiële HTML op de server voor snelle weergave van de inhoud, en vervolgens de statische structuur op de client "beleven" met JavaScript voor interactiviteit.

// Voorbeeld van hydratatieconcept
// Aan de client
const appElement = document.getElementById('app');
// Mount de Vue/React/etc. app op de bestaande DOM-structuur
Vue.createApp(App).mount(appElement);
// of React.hydrate(<App />, appElement);

Prioriteren van zichtbare inhoud (Above-the-fold rendering): Laden en renderen van de zichtbare inhoud in het eerste deel van de pagina (zonder te scrollen), met uitgestelde laden van de rest.

Het toepassen van progressief renderen verbetert de belangrijkste Web Vitals-metrics:

Largest Contentful Paint (LCP): Versnelt de weergave van het grootste element.
First Contentful Paint (FCP): Verkleint de tijd tot het verschijnen van de eerste inhoud.
Cumulative Layout Shift (CLS): Hoewel niet direct, kan correct gebruik van placeholders en lazy loading helpen om onverwachte verschuivingen van inhoud te verminderen.