Effetti sulle prestazioni di un caricamento troppo lento

Consigli basati sui dati per il caricamento lento delle immagini tenendo a mente le metriche Core Web Vitals.

Il caricamento lento è una tecnica che rimanda il download di una risorsa finché non è necessario, per conservare i dati e ridurre il conflitto di rete per le risorse critiche. È diventato uno standard web nel 2019 e oggi loading="lazy" per le immagini è supportato dalla maggior parte dei principali browser.

Questa guida riassume il modo in cui sono stati analizzati i dati sulla trasparenza web e i test A/B ad hoc disponibili pubblicamente per comprendere le caratteristiche di adozione e prestazioni del caricamento lento delle immagini a livello di browser. È emerso che il caricamento lento può essere uno strumento straordinariamente efficace per ridurre i byte di immagine non necessari, ma un uso eccessivo può influire negativamente sulle prestazioni. Concretamente, questa analisi mostra che il caricamento di immagini più impegnate all'interno dell'area visibile iniziale, mentre avviene un caricamento piuttosto lento del resto, può offrire il meglio delle due modalità: meno byte caricati e Segnali web essenziali migliorati.

Adozione

Secondo i dati più recenti disponibili in HTTP Archive, il caricamento lento integrato delle immagini è utilizzato dal 29% dei siti web e l'adozione è in rapida crescita.

Grafico a torta che mostra WordPress che rappresenta l'84,1% dell'adozione del caricamento lento, altri CMS il 2,3% e non CMS il 13,5%.
. Suddivisione dei tipi di siti web che utilizzano il caricamento lento delle immagini a livello di browser. (Fonte).

L'esecuzione di query sui dati non elaborati nel progetto HTTP Archive ci permette di comprendere meglio quali tipi di siti web ne stanno promuovendo 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 chiariscono come WordPress sia in testa alla classifica in termini di adozione.

Grafico con serie temporale dell'adozione del caricamento lento, in cui WordPress è il player predominante rispetto ad altri CMS e sistemi non CMS, con proporzioni simili al grafico precedente. È dimostrato che l’adozione totale è aumentata rapidamente dall’1% al 17% da luglio 2020 a giugno 2021.
. Suddivisione dei tipi di siti web che utilizzano il caricamento lento delle immagini a livello di browser. (Fonte).

Vale anche la pena notare il tasso di adozione. Un anno fa, a luglio 2020, i siti WordPress che utilizzano il caricamento lento comprendevano decine di migliaia di siti web in un corpus di circa 6 milioni (1% del totale). Da allora, l'adozione del caricamento lento solo in WordPress è cresciuta fino a raggiungere oltre 1 milione di siti web (il 14% del totale).

Prestazioni correlazionali

Approfondendo lo strumento HTTP Archive, è possibile confrontare le prestazioni 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 provenienti dal Chrome User Experience Report (CrUX), anziché dai test sintetici nel lab. Il seguente grafico utilizza un diagramma a scatola e baffi per visualizzare le distribuzioni di ogni pagina LCP al 75° percentile: le linee rappresentano il 10° e il 90° percentile e le caselle rappresentano il 25° e il 75° percentile.

Grafico a scatola e baffi che mostra il 10, 25, 75 e 90° percentile per le pagine che utilizzano e non utilizzano il caricamento lento delle immagini a livello di browser. In confronto, la distribuzione LCP delle pagine che non lo utilizzano è più rapida di quelle che non lo utilizzano.
. La distribuzione di tutte le pagine Esperienza LCP al 75° percentile, suddivisa in base all'utilizzo o meno del caricamento lento delle immagini a livello di browser. (Fonte).

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 correlazionali che non indicano necessariamente il caricamento lento come la causa del rallentamento delle prestazioni. Ipoteticamente, se i siti WordPress tendono a essere un po' più lenti e da quanto costituiscono la coorte di caricamento lento, ciò potrebbe spiegare la differenza. Per eliminare tale variabilità, è possibile restringere in modo specifico i siti WordPress.

Grafico a scatola e baffi che mostra il 10, 25, 75 e 90° percentile per le pagine WordPress che utilizzano e non utilizzano il caricamento lento delle immagini a livello di browser. In confronto, la distribuzione LCP delle pagine che non lo utilizzano è più rapida di quelle che lo usano, come nel grafico precedente.
. Distribuzione delle pagine WordPress Esperienza LCP al 75° percentile, suddivisa in base all'utilizzo o meno del caricamento lento delle immagini a livello di browser. (Fonte).

Purtroppo, quando visualizzi in dettaglio le pagine WordPress emerge lo stesso pattern. quelli 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.

Ciò non dimostra comunque che il caricamento lento causi un rallentamento delle pagine, ma il suo utilizzo coincide con le prestazioni più lente. Per cercare di rispondere alla domanda sul nesso di causalità, è stato predisposto un test A/B in laboratorio.

Rendimento causale

L'obiettivo del test A/B era dimostrare o confutare l'ipotesi che il caricamento lento delle immagini integrato, come implementato nel core di WordPress, portasse a prestazioni LCP più lente e meno byte immagine. La metodologia utilizzata era testare un sito web demo di WordPress con il tema twentytwentyone. Sono stati testati entrambi i tipi di archivio e di pagina singola, ad esempio la home page e le pagine degli articoli, su computer e dispositivi mobili emulati utilizzando WebPageTest. È stata testata ogni combinazione di pagine con e senza il caricamento lento attivato e ogni test è stato eseguito nove volte per ottenere il valore LCP mediano e il numero di byte immagine.

di Gemini Advanced. .
Serie predefinita disattivato Differenza rispetto al valore predefinito
twentytwentyone-archive-desktop 2.029 1.759 13%
twentytwentyone-archivio-dispositivi mobili 1.657 1.403 -15%
twentytwentyone-computer-singolo 1.655 1.726 4%
twentytwentyone-singolo-dispositivo mobile 1.352 1.384 2%
Modifica del valore LCP (ms) disattivando il caricamento lento delle immagini a livello di browser sulle pagine WordPress di esempio.

Questi risultati mettono a confronto l'LCP mediano in millisecondi per i test su pagine di archivio e singole pagine per computer e dispositivi mobili. Quando il caricamento lento è stato disattivato sulle pagine di archivio, il miglioramento della metrica LCP è migliorato di un margine significativo. Sulle singole pagine, tuttavia, ha fatto meno differenza.

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

di Gemini Advanced. .
Serie predefinita disattivato Differenza rispetto al valore predefinito
twentytwentyone-archive-desktop 577 1173 103%
twentytwentyone-archivio-dispositivi mobili 172 378 120%
twentytwentyone-computer-singolo 301 850 Il 183%
twentytwentyone-singolo-dispositivo mobile 114 378 Il 233%
Modifica il numero di byte immagine (kB) disattivando il caricamento lento delle immagini a livello di browser nelle pagine WordPress di esempio.

Questi risultati confrontano il numero medio di byte immagine (in kB) per ogni test. Come previsto, il caricamento lento ha un chiaro effetto positivo sulla riduzione del numero di byte immagine. Se un utente reale scorresse l'intera pagina, tutte le immagini verrebbero comunque caricate mentre si spostano 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 molto chiaramente a ridurre i byte di immagine a scapito di un LCP ritardato.

Test di una correzione

L'aspetto più importante di WordPress l'attuale implementazione del caricamento lento per questo esperimento prevede il caricamento lento delle immagini all'interno dell'area visibile (above the fold). Il post del blog di CMS riconosce questo approccio come un modello da evitare, ma i dati sperimentali all'epoca indicavano che l'effetto sull'LCP era minimo e vale la pena semplificare l'implementazione nella versione base di WordPress.

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

di Gemini Advanced. .
Serie predefinita disattivato correggi Differenza rispetto al valore predefinito Differenza da disattivato
twentytwentyone-archive-desktop 2.029 1.759 1.749 14% -1%
twentytwentyone-archivio-dispositivi mobili 1.657 1.403 1.352 18% 4%
twentytwentyone-computer-singolo 1.655 1.726 1.676 1% -3%
twentytwentyone-singolo-dispositivo mobile 1.352 1.384 1.342 -1% -3%
Modifica del valore LCP (ms) dalla correzione proposta per il caricamento lento delle immagini a livello di browser sulle pagine WordPress di esempio.

Questi risultati sono molto più promettenti. Il caricamento lento solo delle immagini below the fold determina l'annullamento completo della regressione LCP e probabilmente anche un leggero miglioramento rispetto alla disattivazione del tutto. Come potrebbe essere più veloce se non utilizzare il caricamento lento? Una spiegazione è che, se le immagini below the fold non vengono caricate, l'immagine LCP presenta meno conflitti di rete, il che ne consente un caricamento più rapido.

di Gemini Advanced. .
Serie predefinita disattivato correggi Differenza rispetto al valore predefinito Differenza da disattivato
twentytwentyone-archive-desktop 577 1173 577 0% 51%
twentytwentyone-archivio-dispositivi mobili 172 378 172 0% 54%
twentytwentyone-computer-singolo 301 850 301 0% 65%
twentytwentyone-singolo-dispositivo mobile 114 378 114 0% 70%
Modifica del numero di byte immagine (kB) della correzione proposta per il caricamento lento delle immagini a livello di browser nelle pagine WordPress di esempio.

Per quanto riguarda i byte immagine, la correzione non ha assolutamente modificato il comportamento predefinito. È un aspetto ottimo, perché è stato uno dei punti di forza dell'approccio attuale.

Questa correzione prevede alcune avvertenze. WordPress determina quali immagini sottoporre a caricamento lento sul lato server, il che significa che non sa nulla in merito alle dimensioni dell'area visibile dell'utente o se le immagini vengono caricate inizialmente al suo interno. La correzione utilizza quindi l'euristica sulle immagini. posizione relativa nel markup per indovinare se viene caricato nell'area visibile. Nello specifico, se l'immagine è la prima immagine in primo piano della pagina o la prima immagine nei contenuti principali, si presume che sia above the fold o sia vicina, quindi non verrà eseguita 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 sulla precisione dell'euristica, in particolare le dimensioni dell'area visibile e l'uso 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 in casi generici e potrebbe essere necessaria un'ottimizzazione per rendere questi risultati applicabili a tutti gli scenari del mondo reale.

Implementazione

Ora che è stato identificato un modo migliore per il caricamento lento delle immagini, tutto il risparmio di immagini e prestazioni LCP più rapide, in che modo i siti possono iniziare a utilizzarlo? La modifica con la massima priorità consiste nell'inviare una patch al core WordPress per implementare la correzione sperimentale. Verranno aggiornate anche le indicazioni nel post del blog sul caricamento lento a livello di browser per CMS per chiarire gli effetti negativi del caricamento lento above the fold e in che modo i CMS possono usare l'euristica per evitarlo.

Poiché queste best practice sono applicabili a tutti gli sviluppatori web, potrebbe valere la pena anche segnalare gli antipattern di caricamento lento in strumenti come Lighthouse. Fai riferimento alla richiesta di funzionalità su GitHub se ti interessa seguire i progressi del controllo. Fino ad allora, una cosa che gli sviluppatori potrebbero fare per trovare istanze di elementi LCP sottoposti a 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 registra un avviso in caso di caricamento lento.

Ciò evidenzia anche un vantaggio netto della tecnica di caricamento lento e del potenziale di miglioramento dell'API a livello di piattaforma. Ad esempio, in Chromium c'è un problema aperto di sperimentare con il caricamento nativo delle prime immagini con entusiasmo, come per la correzione, nonostante l'attributo loading.

Conclusione

Se il tuo sito utilizza il caricamento lento delle immagini a livello di browser, controlla come è stato implementato ed esegui test A/B per comprenderne meglio i costi di prestazioni. Può essere utile caricare le immagini above the fold con maggiore entusiasmo. Se hai un sito WordPress, si spera che presto sarà disponibile una patch in WordPress core. Se utilizzi un altro CMS, assicurati che sia a conoscenza dei potenziali problemi di rendimento descritti qui.

Provare API relativamente nuove della piattaforma web può portare sia rischi sia benefici: per un motivo vengono chiamate funzionalità all'avanguardia. Anche se stiamo iniziando a farci un'idea della complessità del caricamento lento delle immagini a livello di browser, stiamo anche vedendo gli svantaggi di come utilizzarlo per ottenere prestazioni migliori.

Foto di Frankie Lopez su Unsplash