Creare un web migliore: un YouTube più veloce

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.

Sriram Krishnan
Sriram Krishnan

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.

PageSpeed Insights che mostra i dati del Report sull'esperienza utente di Chrome.
La pagina di visualizzazione di YouTube per il web mobile deve superare le soglie dei Core Web Vitals.

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.

Grafici di FCP e LCP che mostrano i tassi di passaggio della pagina di visualizzazione di YouTube e l'origine di YouTube.

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.

Report Lighthouse per YouTube Mobile.
Chrome imposta un target di 1,8 secondi per il FPC e 2,5 secondi per il LCP come standard di riferimento. I valori FCP e LCP erano chiaramente in giallo e rosso rispettivamente a 3,5 e 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.

  1. 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.

  2. 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.

Guarda l&#39;esperimento LCP per la pagina del web mobile che mostra il gruppo di controllo, l&#39;esperimento A (miniatura dell&#39;immagine) e l&#39;esperimento B (miniatura nera)
In laboratorio, abbiamo osservato un miglioramento del FCP e del LCP da 4,4 secondi a 1,1 secondi dopo l'applicazione di questa modifica. Esperimento A: l'utilizzo della miniatura effettiva del video funziona bene nelle pagine in cui il video inizia in pausa, ma per le pagine dei video con riproduzione automatica, come la pagina di visualizzazione, ha registrato un rendimento scadente negli studi sugli utenti. Ha anche comportato un calo degli utenti attivi. Esperimento B: l'utilizzo di un'immagine poster nera ha mostrato i risultati migliori negli studi sugli utenti. La transizione dal nero al primo frame del video è stata percepita dagli utenti come un'esperienza meno spiacevole per i video con riproduzione automatica.
La miniatura nera è stata implementata in produzione per tutti gli utenti del web mobile a luglio 2021 e ha mostrato un netto miglioramento di FCP e LCP, come mostrato nell&#39;analisi RUM sopra riportata.
La miniatura nera è stata implementata in produzione per tutti gli utenti del web mobile a luglio 2021 e ha mostrato un netto miglioramento di FCP e LCP, come mostrato nell'analisi RUM sopra riportata.

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.

Player di YouTube e controlli visualizzati
Il player video di YouTube consente agli utenti di controllare la velocità di riproduzione, seguire l'avanzamento, saltare le sezioni e altro ancora. Quando un utente tocca un determinato controllo, la modifica dello stato deve essere comunicata ad altri controlli, ad esempio un tocco dell'utente sulla barra di avanzamento deve essere condiviso con controlli come il cursore di riproduzione, i sottotitoli ecc.

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.

Evento di 21,17 ms visualizzato nella sequenza temporale Rendimento.
DevTools di Chrome con un test delle prestazioni con rallentamento della CPU quattro volte.

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.

Tempo ridotto negli eventi mostrati nella cronologia del rendimento.

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.