L'Impatto delle CSS View Transitions sulle Prestazioni Web

L'Impatto della View Transition API sulle Prestazioni

La View Transition API consente agli sviluppatori di abilitare transizioni visive fluide tra le visualizzazioni sullo stesso sito, anche per le applicazioni multi-pagina (MPA). Queste view transitions sono gestite da transizioni CSS tra 2 visualizzazioni di pagina. Storicamente, le transizioni CSS durante il caricamento della pagina causano un ritardo nelle metriche LCP. Abbiamo ipotizzato che questi tipi di view transitions tra pagine abbiano implicazioni sulle prestazioni, in particolare sui dispositivi mobili e CPU più lente. La nostra ricerca e i dati di monitoraggio degli utenti reali (RUM) hanno confermato questi sospetti insieme ad altre interessanti osservazioni sul suo effetto sui Core Web Vitals, in particolare il Largest Contentful Paint (LCP).

>

Risultati dei Dati RUM

Per validare la nostra idea che le view-transition influiscano negativamente sul Largest Contentful Paint, abbiamo impostato una serie di test A/B su 5 siti diversi e li abbiamo eseguiti per 7 giorni. Sul 50% delle visualizzazioni di pagina abbiamo aggiunto @view-transition { navigation: auto;} ai fogli di stile della pagina, mentre l'altro 50% delle visualizzazioni è stato servito senza questi stili.

Abbiamo raccolto oltre 500.000 visualizzazioni di pagina di cui alla fine 120.000 visualizzazioni da mobile sono state analizzate perché originate da navigazioni mobili all'interno dello stesso sito.

I dati di monitoraggio degli utenti reali hanno rivelato che l'implementazione della View Transition API aggiunge circa 70ms al Largest Contentful Paint per le visualizzazioni di pagina ripetute da mobile. Questo aumento del tempo LCP è degno di nota, considerando che Google raccomanda che l'LCP dovrebbe avvenire entro 2,5 secondi dall'inizio del caricamento della pagina per una buona user experience.

Correlazione con le Prestazioni della CPU

Dopo aver confermato l'impatto negativo delle view transitions sull'LCP, abbiamo investigato ulteriormente. Abbiamo proceduto a impostare una serie di esperimenti per testare automaticamente le stesse 2 pagine con e senza view-transitions. I risultati mostrano una chiara correlazione tra la velocità della CPU e l'impatto delle view transitions sull'LCP. I risultati indicano che più lenta è la CPU, più pronunciato è l'effetto negativo sull'LCP quando si utilizzano le view transitions.

Se desideri testarlo tu stesso visita la nostra homepage dell'esperimento sulle view transition su github

Questi risultati evidenziano tre osservazioni chiave:

• Le view transitions rallentano l'LCP: Le visualizzazioni di pagina con view transitions sono più lente delle visualizzazioni senza effetti di view transition.
• La velocità della CPU è un fattore importante: La velocità della CPU ha un'alta correlazione con la differenza di LCP nelle visualizzazioni con e senza effetti di transizione di pagina.
• Esiste un 'sweet spot' di velocità della pagina: Con un rallentamento 6x, l'LCP ha prestazioni migliori senza cache di rete. La ragione semplice è che a questa velocità della CPU l'elemento LCP non è ancora stato decodificato senza cache di rete e la transizione viene applicata a una pagina vuota. Immediatamente dopo la transizione più semplice a una pagina vuota, l'elemento LCP viene dipinto. Apparentemente questo è il sweet spot dove è più efficiente effettuare la transizione verso una pagina vuota piuttosto che tra immagini. Dal punto di vista UX è ovviamente meglio effettuare la transizione tra immagini.

Comprendere view-transition: navigation: auto;

Tradizionalmente, implementare le view transitions richiedeva un uso estensivo di CSS e JavaScript. La View Transition API semplifica questo processo permettendo agli sviluppatori di definire le transizioni in modo dichiarativo. La View Transition API funziona catturando istantanee dei vecchi e nuovi stati di un documento, aggiornando il DOM sopprimendo il rendering, e utilizzando animazioni CSS per eseguire la transizione.

Esempio di Implementazione

Ecco un esempio base di come utilizzare view-transition-name: auto nel tuo CSS:

@view-transition {
  navigation: auto;
}

Oppure in combinazione con una media query per i dispositivi tablet o desktop:

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

Questa semplice aggiunta permette al browser di gestire automaticamente la transizione di questo elemento quando avviene una view transition.

Bilanciare Estetica e Prestazioni

La View Transition API offre transizioni fluide e potenzialmente piacevoli dal punto di vista visivo tra le navigazioni. Questo potrebbe portare a piccoli benefici nelle metriche di business come tassi di rimbalzo più bassi e potenzialmente vendite più alte. Tuttavia, specialmente su browser di fascia bassa come i dispositivi mobili, gli sviluppatori devono considerare attentamente le implicazioni sulle prestazioni. Ecco le mie raccomandazioni:

• Test delle Prestazioni: Conduci test approfonditi su diversi dispositivi e condizioni di rete per assicurarti che i benefici delle view transitions superino i potenziali costi in termini di prestazioni.
• Implementazione Selettiva: Sii prudente nell'applicare le view-transitions. Testa il loro effetto sulle prestazioni e sulle metriche di business. Poi considera attentamente su quali tipi di dispositivi implementare le view transitions.