Trovare opportunità per migliorare l'esperienza utente con gli strumenti web di Chrome.
Pubblicato: 11 maggio 2021
Oggi parleremo delle nuove funzionalità degli strumenti in Lighthouse, PageSpeed e DevTools per aiutarti a identificare come il tuo sito può migliorare in termini di metriche Web Vitals.
Per ripassare gli strumenti, Lighthouse è uno strumento automatico open source per migliorare la qualità delle pagine web. Puoi trovarlo nella suite di strumenti di debug Chrome DevTools ed eseguirlo su qualsiasi pagina web, pubblica o che richiede l'autenticazione. Puoi trovare Lighthouse anche in PageSpeed Insights, CI e WebPageTest.
Lighthouse 7.x include nuove funzionalità come gli screenshot degli elementi, per facilitare l'ispezione visiva di alcune parti dell'interfaccia utente che influiscono sulle metriche dell'esperienza utente (ad es. i nodi che contribuiscono al cambiamento del layout).
Abbiamo anche implementato il supporto degli screenshot degli elementi in PageSpeed Insights, offrendo un modo per individuare più facilmente i problemi relativi a singole prove di rendimento delle pagine.
Misurare i Core Web Vitals
Lighthouse può misurare in modo sintetico le metriche Core Web Vitals, tra cui Largest Contentful Paint, Cumulative Layout Shift e Total Blocking Time (un proxy di laboratorio per First Input Delay). Queste metriche riflettono il caricamento, la stabilità del layout e l'idoneità all'interazione. Sono presenti anche altre metriche, come First Contentful Paint, evidenziate nel futuro di Core Web Vitals.
La sezione "Metriche" del report Lighthouse include le versioni di laboratorio di queste metriche. Puoi utilizzarla come visualizzazione di riepilogo degli aspetti dell'esperienza utente che richiedono la tua attenzione.
Le metriche sul campo, come quelle presenti nel Report sull'esperienza utente di Chrome o nel RUM, non presentano questo limite e sono un complemento prezioso per i dati di laboratorio in quanto riflettono l'esperienza degli utenti reali. I dati sul campo non possono offrire i tipi di informazioni diagnostiche che ottieni in laboratorio, quindi i due vanno insieme.
Identificare i punti di miglioramento in base ai Web Vitals
Identificare l'elemento Largest Contentful Paint
LCP è una misura dell'esperienza di caricamento percepita. Indica il punto durante il caricamento della pagina in cui i contenuti principali o "più grandi" sono stati caricati e sono visibili all'utente.
Lighthouse dispone di un controllo "Elemento Largest Contentful Paint" che identifica l'elemento con il tempo di visualizzazione più elevato. Se passi il mouse sopra l'elemento, questo verrà evidenziato nella finestra principale del browser.
Se questo elemento è un'immagine, queste informazioni sono un suggerimento utile per ottimizzare il caricamento di questa immagine. Lighthouse include una serie di controlli di ottimizzazione delle immagini per aiutarti a capire se le tue immagini potrebbero essere compresse, ridimensionate o pubblicate in un formato più moderno e ottimale.
Potresti anche trovare utile il bookmarklet LCP di Annie Sullivan per identificare rapidamente l'elemento LCP con un rettangolo rosso con un solo clic.
Precarica le immagini scoperte in un secondo momento per migliorare il valore LCP
Per migliorare il Largest Contentful Paint, precarica le immagini hero critiche se vengono rilevate in ritardo dal browser. La scoperta tardiva può verificarsi se è necessario caricare un bundle JavaScript prima che l'immagine sia rilevabile.
Ci vengono poste alcune domande comuni sul precaricamento delle immagini LCP che vale la pena esaminare brevemente.
Puoi precaricare le immagini responsive? Sì.
Supponiamo di avere un'immagine hero adattabile come specificato utilizzando srcset e sizes di seguito:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
Grazie agli attributi imagesrcset e imagesizes aggiunti all'attributo link, possiamo precaricare un'immagine adattabile utilizzando la stessa logica di selezione delle immagini utilizzata da srcset e sizes:
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
Il controllo evidenzierà anche le opportunità di precaricamento se l'immagine LCP è definita tramite un background CSS? Sì.
Qualsiasi immagine segnalata come immagine LCP, tramite sfondo CSS o <img>, è una candidata se viene rilevata con una profondità a cascata di almeno tre.
Caricamento lento delle immagini fuori schermo ed evitamento di questa tecnica per l'LCP
Le immagini fuori schermo non fondamentali per l'esperienza utente iniziale possono essere caricate in modo lazy. Si tratta di una tecnica che rimanda il download di un'immagine finché un utente non la scorre nelle vicinanze, il che può ridurre la contesa sulla rete per gli asset critici e, in alcuni casi, migliorare il LCP. L'audit "Rimandare le immagini fuori schermo" può essere utile in questo caso:
Le immagini above the fold importanti, come l'immagine Largest Contentful Paint, non devono essere caricate tramite caricamento lento. In questo modo, il caricamento dell'immagine LCP potrebbe subire un ritardo. Lighthouse evidenzierà se un'immagine LCP viene caricata tramite caricamento lento in modo errato tramite l'audit "L'immagine Largest Contentful Paint è stata caricata tramite caricamento lento":
Identificare i contributi a CLS
Cumulative Layout Shift è una misura della stabilità visiva. Misura la quantità di spostamento visivo dei contenuti di una pagina. Lighthouse dispone di un controllo per il debug del CLS denominato "Evita grandi cambiamenti di layout".
Questo controllo mette in evidenza gli elementi DOM che contribuiscono maggiormente alle variazioni della pagina. Nella colonna Elementi a sinistra viene visualizzato l'elenco di questi elementi DOM e a destra il loro contributo complessivo al CLS.
Grazie alla nuova funzionalità di Lighthouse Element Screenshots, possiamo visualizzare un'anteprima visiva degli elementi chiave rilevati nell'audit, nonché fare clic per aumentare lo zoom per una visualizzazione più chiara:
Per il CLS post-caricamento, può essere utile visualizzare in modo persistente con i rettangoli gli elementi che hanno contribuito maggiormente al CLS. Questa è una funzionalità che troverai in strumenti di terze parti come la dashboard Core Web Vitals di SpeedCurve e che adoro utilizzare con il Generatore di GIF di variazione del layout di Defaced per:
Per una visualizzazione a livello di sito dei problemi di variazione del layout, il report Segnali web essenziali di Search Console è molto utile. In questo modo posso vedere i tipi di pagine del mio sito con un CLS elevato (in questo caso, mi aiuta a identificare autonomamente i componenti parziali del modello su cui devo dedicare il mio tempo):
Identificazione del CLS dalle immagini senza dimensioni
Per limitare lo spostamento cumulativo del layout causato da immagini senza dimensioni, includi gli attributi delle dimensioni larghezza e altezza nelle immagini e negli elementi video. Questo approccio garantisce che il browser possa allocare la quantità corretta di spazio nel documento durante il caricamento dell'immagine.
Consulta l'articolo Ancora una volta, è importante impostare l'altezza e la larghezza delle immagini per un'ottima spiegazione dell'importanza di considerare le dimensioni e le proporzioni delle immagini.
Identificazione del CLS dagli annunci
Annunci per i publisher per Lighthouse ti consente di trovare opportunità per migliorare l'esperienza di caricamento degli annunci sulla tua pagina, inclusi i contributi al cambiamento di layout e le attività lunghe che potrebbero ritardare il momento in cui la tua pagina sarà utilizzabile dagli utenti. In Lighthouse, puoi attivare questa funzionalità tramite i plug-in della community.
Ricorda che gli annunci sono uno dei fattori più importanti che contribuiscono ai cambiamenti di layout sul web. È importante:
- Fai attenzione quando posizioni annunci non in primo piano nella parte superiore dell'area visibile
- Elimina i cambiamenti riservando la dimensione più grande possibile per l'area annuncio
Evitare animazioni non composite
Le animazioni non composite possono risultare poco fluide sui dispositivi di fascia bassa se le attività JavaScript pesanti mantengono occupato il thread principale. Queste animazioni possono comportare cambiamenti di layout.
Se Chrome rileva che non è stato possibile comporre un'animazione, la segnala a una traccia di DevTools che Lighthouse legge, in modo da elencare gli elementi con animazioni che non sono stati composti e il motivo. Puoi trovarli nel controllo Evita animazioni non composite.
Debug di First Input Delay / Tempo di blocco totale / Attività lunghe
First Input misura il tempo che intercorre tra la prima interazione di un utente con una pagina (ad es. quando fa clic su un link, tocca un pulsante o utilizza un controllo JavaScript personalizzato) e il momento in cui il browser è effettivamente in grado di iniziare a elaborare i gestori eventi in risposta a quell'interazione. Le attività JavaScript lunghe possono influire su questa metrica e sul proxy per questa metrica, Tempo di blocco totale.
Lighthouse include un controllo Evita attività lunghe nel thread principale che elenca le attività più lunghe nel thread principale. Questo può essere utile per identificare gli elementi che contribuiscono maggiormente al ritardo dell'input. Nella colonna di sinistra possiamo vedere l'URL degli script responsabili di attività nel thread principale lunghe.
A destra possiamo vedere la durata di queste attività. Ti ricordiamo che le attività lunghe sono quelle che si eseguono per più di 50 millisecondi. Questo viene considerato un blocco del thread principale sufficientemente lungo da influire sulla frequenza frame o sulla latenza di input.
Se stai valutando servizi di terze parti per il monitoraggio, mi piace molto anche la visualizzazione della sequenza temporale dell'esecuzione del thread principale di Calibre per visualizzare questi costi, che mette in evidenza le attività principali e secondarie che contribuiscono a quelle lunghe che influiscono sull'interattività.
Bloccare le richieste di rete per vedere l'impatto prima/dopo in Lighthouse
Chrome DevTools supporta il blocco delle richieste di rete per vedere l'impatto della rimozione o della mancata disponibilità delle singole risorse. Questo può essere utile per comprendere l'impatto dei singoli script (ad es.tracker o embed di terze parti) su metriche come il tempo di blocco totale (TBT) e il tempo di risposta.
Il blocco delle richieste di rete funziona anche con Lighthouse. Diamo un'occhiata al report Lighthouse per un sito. Il punteggio Perf è 63/100 con un TBT di 400 ms. Esaminando il codice, abbiamo rilevato che questo sito carica in Chrome un polyfill Intersection Observer non necessario. Proviamo a bloccarlo.
Possiamo fare clic con il tasto destro del mouse su uno script nel riquadro Rete di DevTools e fare clic su Block Request URL per bloccarlo. Qui lo faremo per il polyfill Intersection Observer.
Ora possiamo eseguire di nuovo Lighthouse. Questa volta possiamo vedere che il nostro punteggio di rendimento è migliorato (70/100) così come il tempo di blocco totale (400 ms> 300 ms).
Sostituire gli embed di terze parti costosi con un facade
È comune utilizzare risorse di terze parti per incorporare video, post di social media o widget nelle pagine. Per impostazione predefinita, la maggior parte degli elementi incorporati viene caricata immediatamente e può includere payload costosi che influiscono negativamente sull'esperienza utente. Questo è uno spreco se la terza parte non è fondamentale (ad es. se l'utente deve scorrere prima di visualizzarla).
Un pattern per migliorare il rendimento di questi widget è caricarli in modo lazy al caricamento dell'utente. Per farlo, puoi eseguire il rendering di un'anteprima leggera del widget (una facciata) e caricare la versione completa solo se un utente interagisce con il widget. Lighthouse dispone di un controllo che consiglia risorse di terze parti che possono essere caricate tramite caricamento lento con un facade, ad esempio gli embed dei video di YouTube.
Ti ricordiamo che Lighthouse evidenzia il codice di terze parti che blocca il thread principale per più di 250 ms. In questo modo, è possibile esporre tutti i tipi di script di terze parti (inclusi quelli creati da Google) che potrebbero essere defferiti o caricati in modo lazy se il loro rendering richiede lo scorrimento per visualizzarli.
Oltre i Core Web Vitals
Oltre a mettere in evidenza i Core Web Vitals, le versioni recenti di Lighthouse e PageSpeed Insights cercano anche di fornire indicazioni concrete che puoi seguire per migliorare la velocità di caricamento delle applicazioni web con un elevato utilizzo di JavaScript se hai attivato le mappe sorgente.
Sono incluse una raccolta in crescita di controlli per ridurre il costo di JavaScript nella pagina, ad esempio la riduzione dell'utilizzo di polyfill e duplicati che potrebbero non essere necessari per l'esperienza utente.
Per ulteriori informazioni sugli strumenti di Core Web Vitals, tieni d'occhio l'account Twitter del team Lighthouse e la pagina Novità di DevTools.