Effekten av CSS View Transitions på webbprestanda

Effekten av View Transition API på prestanda

View Transition API gör det möjligt för utvecklare att aktivera smidiga visuella övergångar mellan vyer på samma webbplats, även för multi page applications (MPA:s). Dessa view transitions hanteras av CSS-övergångar mellan 2 sidvisningar. Historiskt sett har CSS-övergångar under sidladdning orsakat en fördröjning av LCP-mätvärdena. Vi misstänkte att dessa typer av view transitions mellan sidor också har prestandaimplikationer, särskilt på mobila enheter och långsammare processorer. Vår forskning och real-user monitoring (RUM)-data har bekräftat dessa misstankar tillsammans med andra intressanta insikter om dess effekt på Core Web Vitals, särskilt Largest Contentful Paint (LCP).

>

RUM-dataresultat

För att validera vår idé att view-transition negativt påverkar Largest Contentful Paint satte vi upp en serie A/B-tester på 5 olika webbplatser och lät dessa köra i 7 dagar. På 50% av sidvisningarna lade vi till @view-transition { navigation: auto;} i sidans stilmallar medan de andra 50% av sidvisningarna serverades utan dessa stilar.

Vi samlade in över 500 000 sidvisningar där slutligen 120 000 mobila sidvisningar analyserades eftersom de härstammade från mobila navigeringar inom samma webbplats.

Real-user monitoring-data har avslöjat att implementering av View Transition API lägger till cirka 70ms till Largest Contentful Paint för upprepade mobila sidvisningar. Denna ökning av LCP-tiden är anmärkningsvärd, med tanke på Googles rekommendation att LCP bör ske inom 2,5 sekunder från det att sidan börjar laddas för en god user experience.

CPU-prestandakorrelation

Efter att ha bekräftat den negativa effekten av view transitions på LCP undersökte vi vidare. Vi fortsatte med att sätta upp en serie experiment för att automatiskt testa samma 2 sidor med och utan view transitions. Resultaten visar en tydlig korrelation mellan CPU-hastighet och effekten av view transitions på LCP. Resultaten indikerar att ju långsammare CPU:n är, desto mer uttalad är den negativa effekten på LCP vid användning av view transitions

Konfiguration	Med View Transition	Utan View Transition	Skillnad (ms)
Ingen throttling + nätverkscache	287 ms	282 ms	5 ms
Ingen throttling + ingen nätverkscache	338 ms	311 ms	37 ms
6x CPU-nedstrypning + nätverkscache	527 ms	523 ms	4 ms
6x CPU-nedstrypning + ingen nätverkscache	442 ms	413 ms	29 ms
20x CPU-nedstrypning + nätverkscache	756 ms	716 ms	40 ms
20x CPU-nedstrypning + ingen nätverkscache	1281 ms	1204 ms	77 ms

Om du vill testa detta själv, besök vår view transition experiment-hemsida på GitHub

Dessa resultat belyser tre viktiga observationer:

• View transitions saktar ner LCP: Sidvisningar med view transitions är långsammare än sidvisningar utan view transition-effekter.
• CPU-hastighet är en viktig faktor: CPU-hastighet har en hög korrelation med LCP-skillnaden i vyer med och utan sidövergångseffekter
• Det finns en 'sweet spot' för sidladdningshastighet: Vid 6x nedstrypning har LCP bättre prestanda utan nätverkscache. Den enkla anledningen är att vid denna CPU-hastighet har LCP-elementet ännu inte avkodats utan nätverkscache och övergången appliceras på en blank sida. Omedelbart efter den enklare övergången till en blank sida målas LCP-elementet. Uppenbarligen är detta den sweet spot där det är mer effektivt att göra en övergång till en blank sida än att göra en övergång mellan bilder. Från ett UX-perspektiv är det naturligtvis bättre att göra övergångar mellan bilder.

Förstå view-transition: navigation: auto;

Traditionellt krävde implementering av view transitions omfattande användning av CSS och JavaScript.. View Transition API förenklar denna process genom att låta utvecklare definiera övergångar deklarativt. View Transition API fungerar genom att ta ögonblicksbilder av de gamla och nya tillstånden i ett dokument, uppdatera DOM:en medan rendering undertrycks, och använda CSS-animationer för att utföra övergången.

Implementeringsexempel

Här är ett grundläggande exempel på hur du använder view-transition-name: auto i din CSS:

@view-transition {
  navigation: auto;
}

Eller i kombination med en media query för att rikta in sig på surfplattor eller stationära enheter:

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

Detta enkla tillägg gör att webbläsaren kan hantera övergången av detta element automatiskt när en view transition inträffar.

Balansera estetik och prestanda

View Transition API erbjuder smidiga och möjligen visuellt tilltalande övergångar mellan navigeringar. Detta kan leda till små fördelar i affärsmätvärden som lägre avvisningsfrekvens och möjligen högre försäljning. Dock, särskilt på enheter med låg prestanda som mobila enheter, måste utvecklare noggrant överväga dess prestandaimplikationer. Här är mina rekommendationer:

• Prestandatestning: Genomför grundlig testning över olika enheter och nätverksförhållanden för att säkerställa att fördelarna med view transitions överväger eventuella prestandakostnader.
• Selektiv implementering: Var försiktig när du tillämpar view transitions. Testa dess effekt på prestanda och affärsmätvärden. Överväg sedan noggrant på vilka enhetstyper du ska implementera view transitions.