Performance speculations

De conferentie leverde veel inspiratie op. Niet alleen op het gebied van tooling, maar ook rondom bredere vraagstukken zoals: wanneer is iets eigenlijk snel genoeg, toegankelijkheid en zelfs de impact van performance op het milieu. Teveel om allemaal te benoemen, maar een aantal onderwerpen licht ik graag uit.

Tooling: bekend én nieuw

In vrijwel elke sessie kwamen één of meerdere tools aan bod. De meest genoemde tools waren WebPageTest en Google Lighthouse.Bekende namen voor iedereen die de performancetesttraining heeft gevolgd. Daarnaast kwamen ook CrUX (Chrome User Experience Report) en Treo regelmatig voorbij. Deze laatste twee tools waren voor mij nieuw en trokken direct mijn interesse.

Wat is CrUX?

Het Chrome User Experience Report (CrUX) is een dataset die laat zien hoe echte Chrome-gebruikers populaire websites ervaren. Deze gegevens worden verzameld door de Chrome-browser en zijn openbaar beschikbaar via verschillende Google-tools en tools van derden. Google gebruikt deze data onder andere om de page experience mee te nemen als rankingfactor binnen Google Search.

Een tool die gebruikmaakt van deze CrUX-data is Treo. Uit nieuwsgierigheid heb ik direct de website van Polteq geanalyseerd. Hieruit bleek dat de Time to First Byte (TTFB) aan de hoge kant is. Treo kan helpen bij het achterhalen van de oorzaak hiervan, al vereist dat wel een betaald abonnement.

TTFB is de tijd die verstrijkt voordat de browser de eerste byte van de server ontvangt. Deze tijd bestaat uit:
• het bereiken van de server,
• het verwerken van de aanvraag door de server,
• en het terugsturen van de data naar de browser.

De TTFB is dus deels afhankelijk van de internetsnelheid en deels van de serververwerking. Een lage TTFB-waarde duidt op een snellere en beter presterende server.

Speculation rules: performance vooruitdenken

Een andere interessante sessie, verzorgd door Google, ging over zogenaamde performance hints. Dit zijn relatief nieuwe browserfunctionaliteiten die helpen om de performance aan de client-side te verbeteren.
De oudste en bekendste hint is loading=lazy. Deze kan bijvoorbeeld worden toegevoegd aan een <img>-tag, waardoor afbeeldingen pas worden geladen wanneer de gebruiker ernaartoe scrolt. Waar hier vroeger JavaScript-libraries voor nodig waren, wordt dit tegenwoordig door de meeste browsers native ondersteund.

Een nieuwere ontwikkeling zijn de JavaScript speculation rules. Hiermee kan aan de browser hints worden gegeven over welke pagina’s mogelijk als volgende worden bezocht. De browser kan deze pagina’s alvast op de achtergrond downloaden of zelfs renderen. Hierdoor wordt de cache gevuld voordat de gebruiker daadwerkelijk naar de pagina navigeert, wat de ervaring aanzienlijk sneller laat aanvoelen.

Webdevelopers hebben hierbij verschillende opties. Er kan gekozen worden uit:
• prefetch
• prerender until script (verwacht begin 2026)
• prerender

Daarnaast kan worden aangegeven wanneer deze acties plaatsvinden:
• immediate
• eager
• moderate
• conservative

Aan deze keuzes zijn duidelijke afwegingen verbonden op het gebied van risico, performancewinst en kosten. Het prerenderen van bijvoorbeeld een winkelmandje of een uitlogpagina is niet wenselijk. Bovendien zorgt prerendering voor extra belasting van de server, wat kosten en risico’s met zich meebrengt.

Kort samengevat:
• Prefetch: laag risico, beperkte performancewinst, lage kosten
• Prerender: hoog risico, maximale performancewinst, hogere kosten

Wanneer deze techniek slim wordt ingezet, kan dit de gebruikerservaring aanzienlijk verbeteren. Helaas wordt de Speculation Rules API momenteel nog niet ondersteund door Safari en Firefox. De verwachting is wel dat deze browsers zullen volgen. Voorlopig profiteren gebruikers van Chrome, Edge en Opera dus het meest van deze verbeteringen.