Effetti sulle prestazioni di un caricamento lento eccessivo

Consigli basati sui dati per il caricamento lento delle immagini tenendo conto di Core Web Vitals.

Felix Arntz

Rick Viscomi

Il caricamento lento è una tecnica che rimanda il download di una risorsa fino a quando non è necessaria, per risparmiare dati e ridurre la contesa di rete per gli asset critici. È diventato uno standard web nel 2019 e oggi loading="lazy" per le immagini è supportato dalla maggior parte dei browser principali.

Questa guida riassume il modo in cui sono stati analizzati i dati di trasparenza web disponibili pubblicamente e i test A/B ad hoc per comprendere le caratteristiche di adozione e rendimento del caricamento lento delle immagini a livello di browser. I risultati hanno mostrato che il caricamento lento può essere uno strumento incredibilmente efficace per ridurre i byte di immagini non necessari, ma un uso eccessivo può influire negativamente sulle prestazioni. In concreto, questa analisi mostra che il caricamento più immediato delle immagini all'interno della visualizzazione iniziale, con un caricamento lento del resto, può offrirci il meglio di entrambi i mondi: meno byte caricati e Core Web Vitals migliorati.

Adozione

Secondo i dati più recenti di HTTP Archive, il caricamento lento delle immagini integrato viene utilizzato dal 29% dei siti web e l'adozione sta crescendo rapidamente.

Eseguendo query sui dati non elaborati nel progetto HTTP Archive, possiamo comprendere meglio quali tipi di siti web stanno guidando l'adozione: l'84% dei siti che utilizzano il caricamento lento delle immagini a livello di browser utilizza WordPress, il 2% utilizza un altro CMS e il restante 14% non utilizza un CMS noto. Questi risultati mostrano chiaramente come WordPress sia in prima linea nell'adozione.

Anche il tasso di adozione è degno di nota. Un anno fa, a luglio 2020, i siti WordPress che utilizzavano il caricamento lento costituivano decine di migliaia di siti web nel corpus di circa 6 milioni (1% del totale). Da allora, l'adozione del caricamento lento solo in WordPress è cresciuta fino a oltre 1 milione di siti web (14% del totale).

Prestazioni di correlazione

Analizzando più a fondo HTTP Archive, è possibile confrontare il rendimento delle pagine con e senza caricamento lento delle immagini a livello di browser con la metrica Largest Contentful Paint (LCP). I dati LCP provengono dalle esperienze degli utenti reali del Chrome User Experience Report (CrUX), anziché dai test sintetici in laboratorio. Il seguente grafico utilizza un diagramma box-and-whisker per visualizzare le distribuzioni dell'LCP del 75° percentile di ogni pagina: le linee rappresentano il 10° e il 90° percentile e le caselle rappresentano il 25° e il 75° percentile.

La pagina mediana senza caricamento lento ha un LCP al 75° percentile di 2922 millisecondi, rispetto ai 3546 millisecondi della pagina mediana con caricamento lento. In generale, i siti web che utilizzano il caricamento lento tendono ad avere prestazioni LCP peggiori.

È importante sottolineare che si tratta di risultati di correlazione e non indicano necessariamente che il caricamento lento sia la causa del rallentamento delle prestazioni. Ipoteticamente, se i siti WordPress tendono a essere un po' più lenti e dato che costituiscono una parte significativa della coorte di caricamento lento, questo potrebbe spiegare la differenza. Per eliminare questa variabilità, l'attenzione può essere limitata specificamente ai siti WordPress.

Purtroppo, lo stesso pattern emerge quando si analizzano le pagine WordPress; quelle che utilizzano il caricamento lento tendono ad avere prestazioni LCP più lente. La pagina WordPress mediana senza caricamento lento ha un LCP al 75° percentile di 3495 millisecondi, rispetto ai 3768 millisecondi della pagina mediana con caricamento lento.

Questo non dimostra ancora che il caricamento lento causa il rallentamento delle pagine, ma il suo utilizzo coincide con un peggioramento delle prestazioni. Per cercare di rispondere alla domanda sulla causalità, è stato configurato un test A/B basato su un laboratorio.

Rendimento causale

L'obiettivo del test A/B era confermare o smentire l'ipotesi che il caricamento lento delle immagini integrato, come implementato nel core di WordPress, comportasse prestazioni LCP più lente e un numero inferiore di byte di immagini. La metodologia utilizzata è stata quella di testare un sito web WordPress dimostrativo con il tema twentytwentyone. Sono stati testati entrambi i tipi di pagina, archivio e singola, che sono simili alle pagine home e articolo, su computer e dispositivi mobili emulati utilizzando WebPageTest. È stata testata ogni combinazione di pagine con e senza caricamento lento attivato e ogni test è stato eseguito nove volte per ottenere il valore LCP mediano e il numero di byte delle immagini.

Questi risultati confrontano l'LCP mediano in millisecondi per i test su pagine di archivio e singole per computer e dispositivi mobili. Quando il caricamento lento è stato disattivato nelle pagine di archivio, la metrica LCP è migliorata in modo significativo. Tuttavia, sulle singole pagine la differenza è stata minore.

La disattivazione del caricamento lento sembra rendere le singole pagine leggermente più veloci. Tuttavia, la differenza nell'LCP è inferiore a una deviazione standard per i test sia su computer che su dispositivi mobili, quindi potrebbe essere attribuita alla varianza e considerare la modifica neutra nel complesso. In confronto, la differenza per le pagine di archivio è più vicina a due o tre deviazioni standard.

Questi risultati confrontano il numero mediano di byte delle immagini (in kB) per ogni test. Come previsto, il caricamento lento ha un effetto positivo molto evidente sulla riduzione del numero di byte delle immagini. Se un utente reale dovesse scorrere l'intera pagina, tutte le immagini verrebbero comunque caricate man mano che entrano nell'area visibile, ma questi risultati mostrano il miglioramento delle prestazioni del caricamento pagina iniziale.

Per riassumere i risultati del test A/B, la tecnica di caricamento lento utilizzata da WordPress aiuta chiaramente a ridurre i byte delle immagini a scapito di un LCP ritardato.

Test di una correzione

L'aspetto più importante dell'attuale implementazione del caricamento lento di WordPress per questo esperimento è che carica lentamente le immagini nell'area visibile (above the fold). Il blog post del CMS riconosce che questo è un pattern da evitare, ma i dati sperimentali dell'epoca indicavano che l'effetto su LCP era minimo e che valeva la pena semplificare l'implementazione nel core di WordPress.

Sulla base di questi nuovi dati, è stata creata una correzione sperimentale che evita il caricamento lento delle immagini above the fold e la correzione è stata testata nelle stesse condizioni del primo test A/B.

Questi risultati sono molto più promettenti. Il caricamento lento solo delle immagini below the fold comporta un'inversione completa della regressione dell'LCP e forse anche un leggero miglioramento rispetto alla disattivazione completa del caricamento lento. Come potrebbe essere più veloce rispetto al non utilizzare affatto il caricamento lento? Una spiegazione è che, non caricando le immagini below-the-fold, si riduce la contesa di rete con l'immagine LCP, che può quindi essere caricata più rapidamente.

In termini di byte dell'immagine, la correzione non apporta alcuna modifica rispetto al comportamento predefinito. Questo è un ottimo risultato, perché era uno dei punti di forza dell'approccio attuale.

Questa correzione presenta alcune limitazioni. WordPress determina quali immagini caricare con il caricamento lento lato server, il che significa che non sa nulla delle dimensioni dell'area visibile dell'utente o se le immagini vengono caricate inizialmente al suo interno. Pertanto, la correzione utilizza l'euristica sulla posizione relativa delle immagini nel markup per indovinare se vengono caricate nell'area visibile. In particolare, se l'immagine è la prima immagine in primo piano della pagina o la prima immagine nel contenuto principale, si presume che sia above the fold o vicina a questa posizione e non verrà caricata con il caricamento lento.

Le condizioni a livello di pagina, come il numero di parole nell'intestazione o la quantità di testo del paragrafo all'inizio dei contenuti principali, possono influire sulla presenza dell'immagine nell'area visibile. Esistono anche condizioni a livello di utente che potrebbero influire sull'accuratezza delle euristiche, in particolare le dimensioni dell'area visibile e l'utilizzo di link di ancoraggio che modificano la posizione di scorrimento della pagina.

Per questi motivi, è importante riconoscere che la correzione è calibrata solo per fornire buone prestazioni nel caso generale e che potrebbe essere necessaria una messa a punto per rendere questi risultati applicabili a tutti gli scenari reali.

Implementazione

Ora che è stato identificato un modo migliore per il caricamento lento delle immagini, con tutti i risparmi sulle immagini e le prestazioni LCP più rapide, in che modo i siti possono iniziare a utilizzarlo? La modifica con la priorità più alta è l'invio di una patch al core di WordPress per implementare la correzione sperimentale. Anche le indicazioni nel blog post Browser-level lazy-loading for CMSs verranno aggiornate per chiarire gli effetti negativi del caricamento lento above the fold e come i CMS possono utilizzare l'euristica per evitarlo.

Poiché queste best practice sono applicabili a tutti gli sviluppatori web, potrebbe anche essere utile segnalare gli antipattern di caricamento lento in strumenti come Lighthouse. Se ti interessa seguire i progressi di questo controllo, consulta la richiesta di funzionalità su GitHub. Fino ad allora, una cosa che gli sviluppatori possono fare per trovare istanze di elementi LCP con caricamento lento è aggiungere un logging più dettagliato ai dati dei campi.

new PerformanceObserver((list) => {
  const latestEntry = list.getEntries().at(-1);

  if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
    console.warn('Warning: LCP element was lazy loaded', latestEntry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

Lo snippet JavaScript precedente valuterà l'elemento LCP più recente e registrerà un avviso se è stato caricato con il caricamento lento.

Questo evidenzia anche un aspetto critico della tecnica di caricamento lento e il potenziale di miglioramento delle API a livello di piattaforma. Ad esempio, in Chromium è presente un problema aperto per sperimentare il caricamento nativo delle prime immagini in modo eager, in modo simile alla correzione, nonostante l'attributo loading.

Conclusione

Se il tuo sito utilizza il caricamento lento delle immagini a livello di browser, controlla come viene implementato ed esegui test A/B per comprendere meglio i costi di rendimento. Potrebbe trarre vantaggio da un caricamento più rapido delle immagini above the fold. Se hai un sito WordPress, ci auguriamo che presto venga rilasciata una patch nel core di WordPress. Se utilizzi un altro CMS, assicurati che sia a conoscenza dei potenziali problemi di prestazioni descritti qui.

La sperimentazione di API di piattaforme web relativamente nuove può comportare sia rischi che vantaggi: non per niente vengono chiamate funzionalità all'avanguardia. Anche se iniziamo a renderci conto della complessità del caricamento lento delle immagini a livello di browser, vediamo anche i vantaggi di come utilizzarlo per ottenere un rendimento migliore.