Render-blocking
Performance
Render-blocking resources
Render-blocking resources zijn CSS- en JavaScript-bestanden die de browser dwingen het renderen van de pagina te pauzeren totdat ze geladen en verwerkt zijn. CSS in de <head> blokkeert altijd — scripts zonder async of defer ook. Dit vertraagt de First Contentful Paint. Oplossingen: inline critical CSS, defer/async voor scripts en preload voor kritieke resources.
Andere termen met deze tag:
Rendering
A
Performance
Webpagina-rendering
Rendering is het proces waarbij de browser HTML, CSS en JavaScript omzet naar pixels op het scherm. De browser bouwt de DOM- en CSSOM-boom, combineert ze tot de render-tree, berekent de layout en schildert de pixels. Rendering kan server-side (SSR), client-side (CSR) of via static generation (SSG) plaatsvinden. Render-blocking resources vertragen dit proces.
A
Performance
FOUC
AA
Performance
Flash of Unstyled Content
FOUC is een korte flits waarbij ongestylede HTML zichtbaar is voordat CSS en webfonts zijn toegepast. Oorzaken zijn late CSS-load, async CSS, trage fonts of client-side rendering. Voorkom dit met critical CSS inline in de <head>, preload overige CSS non-blocking, minimaliseer render-blocking resources en gebruik font-display: swap/optional.
AA
Performance
400 kaartjes
Een uitgebreide collectie begrippen voor elk niveau
12 categorieen
Van HTML & CSS tot databases en security
3 niveaus
Geschikt voor beginners en gevorderden
Voor teams & klassen
Ideaal als lesmateriaal of teambuilding tool
Offline oefenen
Fysiek aan de slag, zonder scherm