Web Performance Cursus

Les 1 • Hoe Browsers Webpagina's Verwerken

Behandelt de volledige browserpipeline van DNS-zoekopdracht tot weergave. Legt alle latere optimalisatiewerkzaamheden uit in een concreet begrip van wat de browser doet.

Les 2 • Het Prestatiebudgetconcept

Introduceert budgetten als beperkingen op pagina-omvang, timing en verzoeken. Verbindt budgetbepaling aan bedrijfsdoelen en gebruikerservaringsdoelen.

Les 3 • Het Kritieke Weergavepad Begrijpen

Legt uit welke bronnen de weergave blokkeren en waarom. Bouwt de basis voor in latere hoofdstukken behandelde technieken voor het prioriteren van bronnen.

Les 1 • Lab- versus veldgegevens

Onderscheidt synthetisch testen van real-user monitoring (RUM). Stelt verwachtingen voor wanneer elk gegevenstype geschikt is voor besluitvorming.

Les 2 • Geautomatiseerde Audittools

Behandelt Lighthouse, WebPageTest en vergelijkbare auditplatforms. Maakt herhaalbare, geautomatiseerde prestatiebeoordeling en regressiedetectie mogelijk.

Les 3 • Opzetten van Real-User Monitoring

Begeleidt implementatie van RUM met de Performance Observer API. Verbindt veldgegevensverzameling met de in hoofdstuk 1 gedefinieerde meetwaarden.

Les 4 • Profielen en Traces Interpreteren

Leert systematische analyse van opgenomen traces om lange taken en lay-out thrash te vinden. Overbrugt ruwe gegevens naar bruikbare optimalisatiebeslissingen.

Les 1 • Resourcehints en Voorladen

Leert dns-prefetch, preconnect, preload en prefetch-directieven. Vermindert waargenomen latentie door ophaalacties te initiëren voordat de browser ze ontdekt.

Les 2 • HTTP/2- en HTTP/3-protocollen

Legt multiplexing, headercompressie en QUIC-transport uit. Helpt studenten servers te configureren om moderne protocolvoordelen te benutten.

Les 3 • Compressie- en Coderingsstrategieën

Behandelt Gzip, Brotli en content encoding-onderhandeling. Vermindert direct overgedragen bytes voor tekstgebaseerde assets.

Les 4 • Content Delivery Networks

Behandelt CDN-architectuur, edge caching en origin offload. Vermindert geografische latentie voor een wereldwijd publiek.

Les 1 • Video- en Animatie-optimalisatie

Behandelt videocodering, autoplay-beleid en het vervangen van GIFs door video. Vermindert mediapayload voor bewegende inhoud.

Les 2 • Lazy Loading en Decodering

Behandelt native lazy loading, Intersection Observer en async decoding. Stelt de kosten van off-screen beeld uit om de initiële paginalading te verbeteren.

Les 3 • Compressie en Kwaliteitsafstemming

Behandelt lossy en lossless compressietools en kwaliteitsinstellingen. Balanceert bestandsgroottevermindering tegen acceptabele visuele degradatie.

Les 4 • Moderne Beeldformaten

Vergelijkt WebP, AVIF en legacy-formaten op kwaliteit en bestandsgrootte. Rust studenten uit om het juiste formaat voor elk gebruik te kiezen.

Les 1 • Bundling, Minification en Tree Shaking

Legt uit hoe bundelaars codegrootte verminderen door minificatie en dode-code-eliminatie. Vermindert direct parse- en overdrachtskosten.

Les 2 • Web Workers voor Off-Thread-Verwerking

Introduceert Web Workers en het structured clone-algoritme. Verplaatst CPU-intensief werk van de main-thread om INP te verbeteren.

Les 3 • Laadstrategieën voor JavaScript

Behandelt async-, defer- en module-laadattributen. Voorkomt dat scripts HTML-parsing blokkeren en de eerste weergave vertragen.

Les 4 • Beheer van Third-Party-Scripts

Audits van de impact van derden op main-thread-kosten en netwerkverzoeken. Biedt strategieën om externe scripts veilig te laden of uit te stellen.

Les 1 • GPU-Compositie en Laagbeheer

Legt uit hoe de browser elementen promoot naar compositor-lagen. Leert wanneer lagen te promoveren en hoe laagexplosie te vermijden.

Les 2 • CSS-Animaties en Transities

Vergelijkt CSS-animaties, transities en JS-gestuurde animatie op prestaties. Begeleidt de selectie van de meest efficiënte animatie-aanpak.

Les 3 • Selector-Efficiëntie en Specificiteit

Legt uit hoe selectorcomplexiteit de kosten van stijlherberekening beïnvloedt. Leidt studenten naar het schrijven van selectors die de browser snel kan verwerken.

Les 4 • CSS-Levering en Kritieke CSS

Behandelt het inline zetten van kritieke stijlen en het uitstellen van niet-kritieke CSS. Elimineert render-blokkerende stylesheets om de eerste weergave te versnellen.

Les 1 • Lettertype Subsetting en Unicode-bereiken

Behandelt subsetting-tools en de unicode-range-descriptor. Vermindert de bestandsgrootte van lettertypen door alleen de tekens op te nemen die een pagina daadwerkelijk gebruikt.

Les 2 • Grondbeginselen van het Laden van Weblettertypen

Legt FOIT, FOUT en font-display-strategieën uit. Adresseert direct CLS- en LCP-regressies veroorzaakt door laat ladende lettertypen.

Les 3 • Variabele Lettertypen voor Prestaties

Legt variabele lettertype-assen uit en hoe één bestand meerdere gewichten vervangt. Vermindert HTTP-verzoeken en totale lettertype-payload voor rijke typografie.

Les 1 • Core Web Vitals en Zoekresultaat

Legt uit hoe Core Web Vitals bijdragen aan ranking-signalen in zoekresultaten. Verbindt prestatie-investering met meetbare organische verkeersresultaten.

Les 2 • Preventie van Prestatieregressie

Stelt CI/CD-gates, budgethandhaving en waarschuwingen voor prestatieregressie in. Zorgt ervoor dat optimalisaties behouden blijven tijdens doorlopende ontwikkeling.

Les 3 • Edge Computing en Personalisatie

Behandelt edge-functies, A/B-testen op de edge en gepersonaliseerd cachen. Vermindert heen-en-weer reizen naar de oorsprong voor dynamische, gebruikerspecifieke inhoud.

Les 4 • Prestaties voor Single-Page Applications

Behandelt route-gebaseerde codesplitsing, prefetching en navigatie-overgangen in SPA's. Breidt kerntechnieken uit naar client-side routeringsarchitecturen.