De impact van CSS View Transitions op web performance

De impact van de View Transition API op performance

De View Transition API stelt ontwikkelaars in staat om vloeiende visuele transities tussen paginaweergaven op dezelfde site mogelijk te maken, zelfs voor multi-page applications (MPA's). Deze view transitions worden afgehandeld door CSS transitions tussen twee page views. In het verleden veroorzaakten CSS transitions tijdens het laden van een pagina een vertraging in de LCP-metrics. We vermoedden dat dit soort view transitions tussen pagina's ook performance-implicaties hebben, vooral op mobiele apparaten en tragere CPU's. Ons onderzoek en onze real-user monitoring (RUM) data hebben dit vermoeden bevestigd, samen met andere interessante inzichten in het effect ervan op Core Web Vitals, met name de Largest Contentful Paint (LCP).

Bevindingen uit RUM-data

Om ons idee te valideren dat view-transition een negatieve impact heeft op de Largest Contentful Paint, hebben we een reeks A/B-tests opgezet op 5 verschillende sites en deze 7 dagen laten draaien. Bij 50% van de pageviews voegden we @view-transition { navigation: auto;} toe aan de stylesheets van de pagina, terwijl de andere 50% van de pageviews zonder deze styles werd geserveerd.

We hebben meer dan 500.000 pageviews verzameld, waarvan uiteindelijk 120.000 mobiele pageviews zijn geanalyseerd omdat deze afkomstig waren van mobiele navigaties binnen dezelfde site.

Data uit real-user monitoring heeft aangetoond dat de implementatie van de View Transition API ongeveer 70ms toevoegt aan de Largest Contentful Paint voor herhaalde mobiele pageviews. Deze toename in LCP-tijd is opmerkelijk, gezien de aanbeveling van Google dat de LCP binnen 2,5 seconden moet plaatsvinden vanaf het moment dat de pagina begint te laden, voor een goede user experience.

Correlatie met CPU-performance

Nadat we de negatieve impact van view transitions op de LCP hadden bevestigd, zijn we verder op onderzoek uitgegaan. We hebben een reeks experimenten opgezet om dezelfde twee pagina's automatisch te testen met en zonder view-transitions. De resultaten tonen een duidelijke correlatie tussen CPU-snelheid en de impact van view transitions op de LCP. De bevindingen wijzen erop dat hoe trager de CPU, hoe groter het negatieve effect op de LCP is bij het gebruik van view transitions.

Configuratie	Met View Transition	Zonder View Transition	Verschil (ms)
Geen throttling + network Caching	287 ms	282 ms	5 ms
Geen throttling + geen network Caching	338 ms	311 ms	37 ms
6x CPU slowdown + network Caching	527 ms	523 ms	4 ms
6x CPU slowdown + geen network Caching	442 ms	413 ms	29 ms
20x CPU slowdown + network Caching	756 ms	716 ms	40 ms
20x CPU slowdown + geen network Caching	1281 ms	1204 ms	77 ms

Als je dit zelf wilt testen, bezoek dan onze view transition experiment homepage op GitHub.

Deze resultaten benadrukken drie belangrijke observaties:

• View transitions vertragen de LCP: Pageviews met view transitions zijn trager dan pageviews zonder view transition-effecten.
• CPU-snelheid is een belangrijke factor: CPU-snelheid heeft een hoge correlatie met het LCP-verschil in weergaven met en zonder page transition-effecten.
• Er is een pagespeed 'sweet spot': Bij een 6x slowdown presteert de LCP beter zonder network cache. De simpele reden hiervoor is dat bij deze CPU-snelheid het LCP-element nog niet gedecodeerd is zonder network caching en de transitie wordt toegepast op een lege pagina. Direct na de eenvoudigere transitie naar een lege pagina wordt het LCP-element gerenderd. Blijkbaar is dit de sweet spot waar het efficiënter is om naar een lege pagina over te gaan dan een transitie tussen afbeeldingen te maken. Vanuit een UX-perspectief is een transitie tussen afbeeldingen natuurlijk beter.

Uitleg van view-transition: navigation: auto;

Traditioneel vereiste het implementeren van view transitions uitgebreid gebruik van CSS en JavaScript. De View Transition API vereenvoudigt dit proces door ontwikkelaars in staat te stellen transities declaratief te definiëren. De View Transition API werkt door snapshots te maken van de oude en nieuwe staat van een document, de DOM bij te werken terwijl het renderen wordt onderdrukt, en CSS animations te gebruiken om de transitie uit te voeren.

Implementatievoorbeeld

Hier is een basisvoorbeeld van hoe je dit in je CSS gebruikt:

@view-transition {
  navigation: auto;
}

Of in combinatie met een media query om tablets of desktops te targeten:

@media (min-width: 768px){
  @view-transition{
    navigation:auto
  }
}

Deze simpele toevoeging zorgt ervoor dat de browser de transitie automatisch afhandelt wanneer een view transition plaatsvindt.

De balans tussen esthetiek en performance

De View Transition API biedt vloeiende en mogelijk visueel aantrekkelijke transities tussen navigaties. Dit kan leiden tot kleine voordelen in business metrics, zoals lagere bounce rates en mogelijk hogere verkoopcijfers. Echter, ontwikkelaars moeten de performance-implicaties zorgvuldig overwegen, vooral op low-end browsers zoals die op mobiele apparaten. Hier zijn mijn aanbevelingen:

• Performance-testen: Voer grondige tests uit op verschillende apparaten en netwerkomstandigheden om te verzekeren dat de voordelen van view transitions opwegen tegen de mogelijke performance-kosten.
• Selectieve implementatie: Wees voorzichtig bij het toepassen van view-transitions. Test het effect ervan op performance en business metrics. Overweeg daarna zorgvuldig op welke apparaattypes je view transitions implementeert.