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.

Felix Arntz

Rick Viscomi

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.

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.

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 grafico seguente utilizza un grafico a scatola e baffi per visualizzare le distribuzioni del 75° percentile di LCP di ciascuna 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 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.

Sfortunatamente, emerge lo stesso pattern quando si esamina in dettaglio 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.

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.

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.

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 dell'attuale implementazione del caricamento lento di WordPress per questo esperimento è che esegue 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.

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.

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 un'euristica sulla posizione relativa delle immagini nel markup per indovinare se viene caricata 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 (:#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.

Questo 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 è 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