I Love Web

Performance.now() — Samenvatting

Ik was 30 en 31 oktober met Krijn en een hoop andere studenten bij de twee-daagse conferentie performance.now()

Bron

De Pacman-regel

Tijdens groepsgesprekken geldt de Pacman-regel: laat altijd ruimte open in de kring zodat anderen zich makkelijk kunnen aansluiten bij het gesprek.

Dag 1

Tammy Everts – How Fast is Fast Enough

“Fast is magical.” – Catherine Jue, co-founder bij Kernal “Fast is pragmatic – snel genoeg om bedrijfsresultaten te verbeteren.”

Pragmagical

De ruimte tussen pragmatic en magical moet zo klein mogelijk zijn: je wilt een site die zowel praktisch snel is (voor je business) als magisch snel aanvoelt (voor je gebruikers).

Wie probeer je tevreden te stellen?

Je kunt snelheid optimaliseren voor verschillende partijen:

  • Je baas: denkt vaak dat mensen traagheid accepteren als het merk sterk genoeg is. → Fout: een trage site betekent minder conversies. → Een snelheidsverbetering heeft blijvende invloed op gebruikersgedrag. → De prestatieplateau ligt rond 2,8s LCP – dat is de drempel.

  • Google:

    • Core Web Vitals (CWV) zijn een startpunt, geen einddoel.
    • Google’s drempels zijn niet jouw bedrijfsdrempels.
    • 200ms INP is goed voor Google, maar richt je op je eigen gebruikers.

  • Gebruikers:

    • Cijfers zijn niet hetzelfde als gevoel.
    • Mensen die lang op een site blijven, kunnen óf betrokken óf verdwaald zijn.
    • Combineer usability tests met analytics om dit te begrijpen.

Engagement vs Productiviteit

  • Engagement-taken: open, verkennend, hoge tolerantie voor wachten (bijv. vakantie boeken).
  • Productiviteitstaken: doelgericht, lage tolerantie voor vertraging. Zelfde gebruiker, zelfde aantal klikken, totaal andere beleving.

“Eén trage stap kan de hele reis traag laten voelen.” – Sander van Surkum

Samenvatting

  • Weet wie je probeert te plezieren.
  • Weet waarom gebruikers op je site zijn (engagement of productiviteit).
  • Pragmatisch is wat je site nodig heeft, magisch is de ultieme ervaring (100ms).

Harry Roberts – How to Think Like a Performance Engineer

Slides: csswz.it/think

Tools van de trade

  • CrUX (Chrome User Experience Report): Meet echte gebruikersdata via Chrome-telemetrie.
  • Treo: Grafische weergave van CrUX-data.
  • WebPageTest: De gouden standaard voor prestatiemetingen – een wrapper rond DevTools.

De belangrijkste metrics

  • Core Web Vitals:

    • LCP: belangrijkste voor e-commerce.
    • INP: meet hoe soepel interacties aanvoelen.
    • CLS: niet op tijd gebaseerd, meet visuele stabiliteit.

  • Enabler Metrics:

    • Time to First Byte (TTFB): Slechte TTFB = altijd trage ervaring. Goede TTFB = geen garantie op snelheid.
    • DOMContentLoaded: Moment waarop uitgestelde JS klaar is. Als LCP sneller is dan DOMContentLoaded, kan de site visueel klaar lijken maar functioneel nog niet werken (frustrerend).

Teststrategie

Bepaal vooraf:

  • URLs
  • Apparaten (ken je gebruikers!)
  • Verbinding (standaardtools testen vaak te traag of onrealistisch)
  • Locatie (alleen belangrijk bij wereldwijde spreiding)

Cold Start Scenario’s

Meet ook realistische gebruikersroutes, niet alleen directe toegang tot een pagina. Redirects kunnen TTFB verbeteren. Gebruik scripts in WebPageTest voor realistische simulaties.

Marcy Sutton Todd – A11y and Performance

@Khan Academy

Toegankelijkheid + performance

Marcy begon bij een reclamebureau in Seattle en leerde de waarde van echte toegankelijkheid door te werken met QA-testers met een beperking.

Ze werkt nu aan frontend tooling en het WonderBlocks Design System bij Khan Academy.

Skeleton Loading

  • Grijswaarden-placeholderblokken tonen tijdens het laden.
  • Gebruik semantiek: geef aan of iets nog aan het laden is via aria-roledescription.

Apparaten en toegankelijkheid

  • In februari kwam 62% van het wereldwijde verkeer van mobiel.
  • Ontwerp ook voor ingezoomde weergaven en alternatieve invoermethoden.

Keystroke-level Performance

Meet prestaties aan de hand van het aantal toetsenbordacties dat nodig is om een taak te voltooien:

  • Kunnen keyboardgebruikers herhaalde content overslaan?
  • Worden ze niet gedwongen tot inactieve elementen?
  • Zijn sneltoetsen vindbaar?
  • Kan een screenreader hetzelfde?

Gebruik o.a. een “Skip to content”-knop.

Belangrijke metrics

  • Aantal seconden tot een screenreader content kan lezen (aria-busy).
  • Ondersteuning voor “reduce motion”.
  • Minimaliseer JS, gebruik standaard HTML en CSS.
  • Tijd besteed aan gebruikerstests met mensen met een beperking.

Waarom dit belangrijk is

  • Toegankelijkheid voorkomt toegankelijkheidsschuld.
  • Mobiel en desktop verdienen gelijke aandacht.

Michael Hladky – Big Data, Zero JS: Virtual Scrolling

Geen inhoudelijke notities beschikbaar.

Ines Akrap – Fast, Green, Responsible

Solutions Engineer bij Storyblok (vertrekkend). Gebruikte als metafoor een LEGO-poppetje “Bandit” als gebruiker.

“Constraint = creativity.” “Als mijn project een brug was, zou jij erover durven lopen?”

Ethan Gardner – Making Performance Allies

Soft skills in engineering

Belangrijkste vaardigheidstekorten:

  1. Communicatie
  2. Teamwork
  3. Creativiteit & probleemoplossing
  4. Projectmanagement & organisatie
  5. Documentatie

Communicatie

  • Hoe je iets zegt, is cruciaal.
  • Zeg niet “nee”, maar “niet nu”.
  • Marketing opent deuren, performance houdt ze open.
  • Zoek gemeenschappelijke grond met andere teams.

“Get to know you”-vragen

Bijvoorbeeld: “Was er eerder frictie met engineering?” → Zo ja, bouw dan actief aan een betere relatie.

Huidige uitdagingen

  • Trage advertenties zorgen vaak voor veel verzoeken en blokkeren de rest van de pagina.
  • Frustreert gebruikers en verlaagt prestaties.

Info voor sceptici

Gebruik citaten van gebruikers op sociale media over trage sites om bewustwording te creëren. Laat zien dat prestaties invloed hebben op perceptie.

Groei door samenwerking

  • Verbeter relaties met productteams via check-ins en gedeelde doelen.
  • Bekijk eerst pijnpunten vóór je code schrijft.
  • Deel kennis via goed gedocumenteerde voorbeelden.

Dag 2

Andy Davies – Making Sense of Low Animation Frames

We gebruiken steeds meer JavaScript. Downloadgrootte ≠ impact.

LoAF (Long Animation Frames)

Meet hoe lang het duurt om een frame te presenteren aan de gebruiker.

  • LoAF = start van frame tot start van paint.
  • Scripts kunnen style en layout forceren, wat frames vertraagt.
  • Browser kan tussentijds layoutberekeningen uitvoeren.
  • INP meet tijd tussen gebruikersinteractie en het tonen van het volgende frame.

Michal Mocny – Interactions and Navigation

Werkt aan Chrome en de Web Performance Timeline API.

  • Tijdens paginalading zijn er meerdere LCP-kandidaten, waarvan er één als eindresultaat wordt gekozen.
  • Transitional apps (zoals Astro) gebruiken cross-document navigatie: moderne frameworks werken zonder JS en voegen JS toe als verbetering (progressive enhancement).

Barry Pollard – Speculations on Web Performance

Chrome DevRel / DevTools

Optimalisaties

  • loading="lazy" werkt goed, ook bij iframes.
  • fetchpriority="high" is een “cheat code” voor LCP — gebruikbaar in <link> of <preload>.
  • scheduler.yield() geeft de browser ademruimte en kan INP verbeteren.
  • Core Web Vitals meten via web-vitals.js.
  • link rel="prefetch" helpt toekomstige navigaties versnellen.

“Eenvoudige, progressieve API’s met ingebouwde verbetering zijn de beste!”

Slides