Un caso di studio sulle modifiche apportate dal team web di YouTube per migliorare il rendimento, aumentare i tassi di superamento di Core Web Vitals e migliorare le metriche aziendali chiave.
Il team di Chrome parla spesso di "creare un web migliore", ma cosa significa? Le esperienze web devono essere veloci, accessibili e utilizzare le funzionalità del dispositivo nel momento in cui gli utenti ne hanno più bisogno. Il dogfooding fa parte della cultura di Google, pertanto il team di Chrome ha collaborato con YouTube per condividere le lezioni apprese nel corso del tempo in una nuova serie chiamata "Creare un web migliore". La prima parte della serie illustrerà come YouTube ha creato un'esperienza web più rapida.
Su YouTube, il rendimento si riferisce alla velocità di caricamento di video e altri contenuti, come consigli e commenti, sulle pagine web. Il rendimento viene misurato anche in base alla velocità con cui YouTube risponde alle interazioni degli utenti, come ricerche, controllo del player, Mi piace e condivisioni.
I mercati in via di sviluppo in crescita, come Brasile, India e Indonesia, sono importanti per il web mobile di YouTube. Poiché molti utenti in queste regioni hanno dispositivi più lenti e una larghezza di banda di rete limitata, garantire un'esperienza rapida e senza interruzioni è un obiettivo fondamentale.
Per offrire un'esperienza inclusiva a tutti gli utenti, YouTube si è prefissato di migliorare le metriche relative alle prestazioni, come i Core Web Vitals, tramite il caricamento lento e la modernizzazione del codice.
Migliorare Core Web Vitals
Per identificare le aree di miglioramento, il team di YouTube ha utilizzato il Report sull'esperienza utente di Chrome (CrUX) per capire in che modo gli utenti reali utilizzavano le pagine di visualizzazione dei video e dei risultati di ricerca su dispositivi mobili sul campo. Hanno capito che le loro metriche Core Web Vitals avevano molto spazio di miglioramento, con la metrica Largest Contentful Paint (LCP) che in alcuni casi registrava 4-6 secondi. Questo valore era notevolmente superiore al target di 2,5 secondi.
Per identificare le aree di miglioramento, il team ha utilizzato Lighthouse per eseguire un audit delle pagine di visualizzazione di YouTube, rilevando un punteggio Lighthouse (in laboratorio) basso con un first contentful paint (FCP) di 3,5 secondi e un LCP di 8,5 secondi.
Per ottimizzare il FCP e l'LCP, il team di YouTube ha condotto diversi esperimenti, che hanno portato a due importanti scoperte.
La prima scoperta è stata che potevano migliorare il rendimento spostando il codice HTML del video player sopra lo script che lo rende interattivo. I test di laboratorio hanno indicato che questo potrebbe migliorare sia il tempo FCP che il tempo LCP da 4,4 secondi a 1,1 secondi.
La seconda scoperta è che la metrica LCP considera solo le immagini di poster degli
<video>
elementi e non i frame dello stream video stesso. Tradizionalmente, YouTube ha sempre cercato di ottimizzare il tempo necessario per avviare la riproduzione del video, quindi per migliorare il LCP il team ha iniziato a ottimizzare anche la velocità di caricamento dell'immagine del poster. Hanno sperimentato alcune varianti delle immagini dei poster e scelto quella con il punteggio migliore nei test utente. In seguito a questo lavoro, sia FCP che LCP hanno mostrato un netto miglioramento, con un miglioramento del valore LCP sul campo da 4,6 secondi a 2,0 secondi.
Sebbene queste ottimizzazioni abbiano migliorato l'LCP, il team ha ritenuto che la definizione attuale della metrica LCP non rilevasse completamente, dal punto di vista dell'utente, il momento in cui erano stati caricati i "contenuti principali" della pagina, che è l'obiettivo dell'LCP.
Per risolvere questi problemi, i membri del team di YouTube hanno collaborato con quelli di Chrome per trovare il modo di migliorare la metrica LCP in base al loro caso d'uso. Dopo aver valutato la fattibilità e l'impatto di alcune opzioni, i team hanno deciso di avanzare una proposta per considerare il tempo di aggiornamento del primo fotogramma di un elemento video come candidato LCP.
Una volta implementata questa modifica in Chrome, il team di YouTube continuerà a lavorare all'ottimizzazione per l'LCP. Inoltre, la versione aggiornata della metrica consentirà a queste ottimizzazioni di avere un impatto più diretto sulle esperienze degli utenti reali.
Modularizzazione con il caricamento lento
Le pagine di YouTube contenevano molti moduli caricati anticipatamente. Per ottimizzare il rendering di più di 50 componenti, il team ha creato una mappa dei componenti ai moduli JS che indica al client quali moduli caricare. Se contrassegni i componenti come lazy, i moduli JS verranno caricati in un secondo momento, riducendo il tempo di caricamento iniziale della pagina e la quantità di JavaScript inutilizzato inviata al client.
Tuttavia, dopo l'implementazione del caricamento differito, il team ha notato un effetto a cascata in cui i componenti con caricamento differito e le relative dipendenze venivano caricati in tempi suboptimali.
Per risolvere il problema, il team ha determinato l'insieme minimo di componenti necessari in una visualizzazione e li ha raggruppati in un'unica richiesta di rete. I risultati sono stati una maggiore velocità della pagina, una riduzione del tempo di analisi di JavaScript e, in definitiva, tempi di rendering iniziale migliori.
Gestione dello stato nei vari componenti
YouTube stava riscontrando problemi di prestazioni a causa dei controlli del player, soprattutto sui dispositivi meno recenti. L'analisi del codice ha mostrato che il player, che consente agli utenti di controllare funzionalità come la velocità di riproduzione e l'avanzamento, nel tempo è diventato eccessivamente suddiviso in componenti.
Ogni evento di movimento tocco della barra di avanzamento ha attivato due rielaborazioni dello stile extra e ha richiesto 21,17 ms durante le esecuzioni del test di prestazioni in laboratorio. Man mano che venivano aggiunti nuovi controlli, il modello di controllo decentralizzato causava spesso dipendenze circolari e perdite di memoria, con un impatto negativo sul rendimento della pagina di visualizzazione.
Per risolvere i problemi dovuti al controllo decentralizzato, il team ha aggiornato l'interfaccia utente del player per sincronizzare tutti gli aggiornamenti, ristrutturando in sostanza il player in un componente di primo livello che trasmette i dati ai componenti secondari. In questo modo è stato garantito un solo ciclo di aggiornamento (rendering) dell'interfaccia utente per qualsiasi modifica dello stato, eliminando gli aggiornamenti in catena. Il nuovo evento di movimento tocco della barra di avanzamento del player non prevede alcun ricalcolo dello stile durante la sua esecuzione in JavaScript e ora richiede solo il 25% del tempo del vecchio player.
Questa modernizzazione del codice ha comportato anche ulteriori miglioramenti delle prestazioni, come tempi di caricamento migliorati sui vecchi dispositivi, meno abbandoni della riproduzione e un numero ridotto di errori non fatali.
Risultati e ottimizzazioni
Grazie all'investimento di YouTube nel rendimento, le pagine di visualizzazione ora si caricano molto più velocemente e il 76% degli URL del sito web mobile di YouTube ora supera le soglie delle metriche Core Web Vitals sul campo. Su computer, il valore LCP in laboratorio per la pagina dello smartwatch è stato ridotto da circa 4,6 secondi a 1,6 secondi. Il tempo di esecuzione di JavaScript è diminuito fino al 75% rispetto al passato, migliorando così le prestazioni di interazione e rendering del sito, in particolare del video player di YouTube.
I miglioramenti alle prestazioni della versione web di YouTube nell'ultimo anno hanno migliorato anche le metriche aziendali, tra cui il tempo di visualizzazione e gli utenti attivi giornalieri. In base al successo di questi sforzi, prevediamo di continuare a esplorare ancora più modi per ottimizzare in futuro.
Un ringraziamento speciale a Gilberto Cocchi, Lauren Usui, Benji Bear, Bo Aye, Bogdan Balas, Kenny Tran, Matthew Smith, Phil Harnish, Leena Sahoni, Jeremy Wagner, Philip Walton, Harleen Batra e ai team di YouTube e Chrome per il loro contributo a questo progetto.