Performance
Hier leer je waar prestaties gewonnen of verloren worden. De kaartjes behandelen bottlenecks, renderingkosten, querybelasting, cachingstrategieën en schaalbaarheid onder load. Handig voor iedereen die applicaties sneller wil maken zonder stabiliteit of leesbaarheid op te offeren.
Gzip
A
Performance
Gzip
Gzip is een veelgebruikt compressie-algoritme voor webbestanden en wordt door alle browsers ondersteund. De server comprimeert en stuurt een Content-Encoding:gzip-header mee, de browser decomprimeert automatisch.
A
Performance
Compression
A
Performance
Compression
Compressie verkleint bestanden voor snellere overdracht tussen server en client. Dit gebeurt server-side voor tekstbestanden zoals HTML, CSS, JS en JSON. De browser decomprimeert automatisch. Veelgebruikte algoritmes zijn Gzip en Brotli.
A
Performance
TTI
AAA
Performance
Time to Interactive
TTI is het moment waarop de pagina helemaal werkt en snel reageert. Je verbetert dit door minder JavaScript te gebruiken, door code splitting, door web workers in te zetten en belangrijke onderdelen eerst te laden.
AAA
Performance
Code Splitting
AA
Performance
Code Splitting
Code splitting splitst je JavaScript-bundle op in kleinere stukken die geladne worden op het moment dat ze nodig zijn. Dat verkleint de initiële bundlegrootte aanzienlijk. Implementaties zijn route-gebaseerd (per pagina) of component-gebaseerd. Tools als Webpack, Rollup en Vite ondersteunen dit automatisch.
AA
Performance
FOIT
AA
Performance
Flash of Invisible Text
FOIT is de periode waarin tekst onzichtbaar blijft tijdens het laden van webfonts. Sommige browsers doen dit standaard om layoutverschuivingen te voorkomen, maar trage fonts schaden de UX. Oplossingen zijn font-display: swap of optional, font-preloading en subsetting om fontbestanden te verkleinen.
AA
Performance
TTFB
AAA
Performance
Time To First Byte
TTFB is de tijd tussen een HTTP-request en de ontvangst van de eerste byte van de response. Het meet serverresponsiviteit en wordt beïnvloed door verwerkingstijd, databasequeries, netwerkvertraging en CDN-gebruik. Optimaliseer met caching, snellere queries en een CDN.
AAA
Performance
Service Worker
A
Performance
Service Worker
Een service worker is een programmeerbare netwerk-proxy tussen de browser en het netwerk. Deze onderschept requests en kan responses cachen. Zo maak je offline functionaliteit, background sync en pushnotificaties mogelijk – essentieel voor PWA's.
A
Performance
Critical CSS
AA
Performance
Critical CSS
Critical CSS plaatst essentiële stijlen voor above-the-fold content inline in de <head>. De rest laad je asynchroon. Zo verminder je render-blocking CSS en versnel je de eerste weergave. Let op de balans: te veel inline CSS vergroot de HTML, te weinig veroorzaakt FOUC.
AA
Performance
Lazy Loading
A
Performance
Lazy Loading
Lazy loading zorgt dat resources zoals afbeeldingen, scripts of componenten pas laden wanneer ze nodig zijn of in beeld komen. Dit verkleint de initiële laadtijd en het dataverbruik, en verbetert de ervaren performance. Voorbeelden zijn loading='lazy' en de Intersection Observer-API."
A
Performance
CLS
AAA
Performance
Cumulative Layout Shift
CLS meet visuele stabiliteit en kijkt naar onverwachte layout-verschuivingen tijdens het laden. Oorzaken zijn bijvoorbeeld afbeeldingen zonder afmetingen, dynamische wijzingen van de inhoud en webfonts. Los dit op met vaste afmetingen, gereserveerde ruimte en een passende font-display.
AAA
Performance
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
Brotli
AA
Performance
Brotli
Brotli is een moderner compressie-algoritme met betere compressie dan Gzip en brede browserondersteuning. Compressie is wat langzamer, maar decompressie is snel. Advies: gebruik Brotli met Gzip als fallback voor oudere clients.
AA
Performance
Minification
A
Performance
Minification
Minificatie verkleint code door whitespace, comments en andere niet-essentiële tekens te verwijderen en soms namen te verkorten. Dit reduceert bestandsgrootte vaak met 30-60% zonder functionaliteit te wijzigen. Tools zijn Terser (JS) en cssnano (CSS).
A
Performance
Prefetching
AA
Performance
Prefetching
Met prefetching laad je resources alvast in waarvan je verwacht dat de gebruiker ze nodig heeft. De browser doet dit als hij even niets te doen heeft. Voorbeelden zijn DNS-prefetch, preconnect, prefetch (laag-prioriteit) en preload (hoog-prioriteit).
AA
Performance
Image Optimization
A
Performance
Image Optimization
Beeldoptimalisatie comprimeert en optimaliseert afbeeldingen voor snellere laadtijden, zonder zichtbaar kwaliteitsverlies. Kies het juiste formaat (bijv. WebP/AVIF), pas (lossless/lossy) compressie toe, gebruik responsive images (srcset), lazy loading en een CDN.
A
Performance
Debouncing
AAA
Performance
Debouncing
Debouncing zorgt dat een functie pas wordt uitgevoerd nadat er even geen events meer zijn. Komt er een nieuw event binnen de wachttijd, dan reset de timer. Dit is handig voor search-as-you-type of window-resize en voorkomt onnodig veel aanroepen.
AAA
Performance
Render-blocking
AA
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.
AA
Performance
Script Loading
A
Performance
Script Loading
Met slimme script-loading voorkom je render-blokkades. Gebruik bijvoorbeeld defer (uitvoeren na parsen, volgorde behouden), async (uitvoeren zodra geladen, volgorde niet gegarandeerd) of type='module' (defer-achtig met scope en import/export). Het doel is een snellere first paint en interactiviteit.
A
Performance
INP
AAA
Performance
Interaction to Next Paint
INP meet de algehele interactiviteitsrespons van een pagina gedurende de volledige levensduur van een bezoek. Het registreert de vertraging bij elke interactie (klik, toets, tap) en rapporteert de slechtste. INP heeft FID vervangen als Core Web Vital voor interactiviteit. Verbeter INP door lange JavaScript-taken op te splitsen, web workers in te zetten en zware event handlers te optimaliseren.
AAA
Performance
Polyfill
AA
Performance
Polyfill
Een polyfill is JavaScript-code die moderne browserfeatures nabootst in oudere browsers. Denk aan een Promise- of fetch-polyfill. Polyfills detecteren of een feature ontbreekt en vullen alleen dan aan. Dit verbetert compatibiliteit, met wat extra overhead.
AA
Performance
Memoization
AAA
Performance
Memoization
Memoization is een caching-techniek waarbij de resultaten van dure functies worden opgeslagen op basis van hun invoer. Bij dezelfde invoer wordt het gecachede resultaat direct teruggegeven, zonder de berekening opnieuw uit te voeren. Nuttig bij recursieve algoritmen en dure renderfuncties. In React: useMemo en useCallback.
AAA
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
FCP
AA
Performance
First Contentful Paint
FCP is het moment waarop de eerste tekst of afbeelding in beeld komt. Het laat zien wanneer een gebruiker 'iets' ziet. Verbeter dit met critical CSS, een snelle serverrespons, minder render-blocking JS/CSS en geoptimaliseerde fonts.
AA
Performance
Core Web Vitals
A
Performance
Core Web Vitals
Core Web Vitals zijn metrics die de gebruikerservaring meten en ook SEO kunnen beïnvloeden. Het gaat om LCP (laadperformance), INP/FID (interactiviteit) en CLS (visuele stabiliteit). Je meet ze met PageSpeed Insights, Lighthouse, DevTools of Google Search Console.
A
Performance
LCP
AA
Performance
Largest Contentful Paint
LCP meet de tijd tot het grootste zichtbare element (afbeelding, video of tekstblok) is geladen. Optimaliseer bijvoorbeeld afbeeldingen, serverresponstijd en render-blocking resources, en maak gebruik van een CDN. Dit is een kernindicator voor laadsnelheid.
AA
Performance
Throttling
AAA
Performance
Throttling
Throttling beperkt hoe vaak een functie mag draaien tot maximaal één keer per vast interval, ongeacht het aantal events. In tegenstelling tot debouncing zorgt dit voor regelmatige uitvoering. Handig voor scroll- en mousemove-handlers, met balans tussen snelheid en performance.
AAA
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