Un case study sulle modifiche apportate dal team web di YouTube per migliorare il rendimento, aumentare le percentuali di superamento delle metriche 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, quindi il team di Chrome ha collaborato con YouTube per condividere le lezioni apprese lungo il percorso in una nuova serie chiamata "Creare un web migliore". La prima parte della serie analizzerà in che modo YouTube ha creato un'esperienza web più veloce.
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 dispongono di dispositivi più lenti e di una larghezza di banda di rete limitata, garantire un'esperienza veloce e senza interruzioni è un obiettivo fondamentale.
Per offrire un'esperienza inclusiva a tutti gli utenti, YouTube si è impegnata a 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, rivelando 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 è stata che LCP considera solo le immagini poster degli elementi
<video>e non i fotogrammi del video stream stesso. Tradizionalmente YouTube ottimizza i video in modo da ottenere il tempo più rapido fino all'inizio della riproduzione, quindi per migliorare l'LCP il team ha iniziato a ottimizzare la velocità di pubblicazione dell'immagine poster. Hanno sperimentato alcune varianti delle immagini dei poster e scelto quella con il punteggio migliore nei test utente. A seguito di questo lavoro, sia il valore FCP che l'LCP hanno mostrato un netto miglioramento, con un miglioramento della metrica LCP sul campo da 4,6 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 modo da soddisfare il 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 che questa modifica sarà implementata 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 lento, il team ha notato un effetto a cascata in base al quale i componenti con caricamento lento e le relative dipendenze si caricherebbero in tempi non ottimali.
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 migliore velocità delle pagine, una riduzione del tempo di analisi JavaScript e, in definitiva, migliori tempi di rendering iniziali.
Gestione dello stato tra i 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. Con l'aggiunta di nuovi controlli nel tempo, il pattern di controllo decentralizzato spesso causava dipendenze circolari e perdite di memoria, con un impatto negativo sulle prestazioni 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 relativi elementi 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 riproduzioni abbandonate 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 di YouTube sul web 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 i team di YouTube e Chrome per il loro contributo a questo lavoro.