Trovare opportunità per migliorare l'esperienza utente con gli strumenti web di Chrome.
Data di pubblicazione: 11 maggio 2021
Oggi parleremo delle nuove funzionalità degli strumenti di Lighthouse, PageSpeed e DevTools per aiutarvi a identificare come il vostro sito può migliorare i 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 di 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 un'ispezione visiva più semplice delle parti della UI che influiscono sulle metriche dell'esperienza utente (ad esempio, quali nodi contribuiscono alla variazione del layout).
Abbiamo anche aggiunto il supporto per gli screenshot degli elementi su PageSpeed Insights, consentendo di individuare più facilmente i problemi relativi alle esecuzioni delle prestazioni una tantum delle pagine.
Misura i Core Web Vitals
Lighthouse può misurare sinteticamente 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 di Lighthouse include le versioni di laboratorio di queste metriche. Puoi utilizzarlo come visualizzazione di riepilogo degli aspetti dell'esperienza utente che richiedono la tua attenzione.
Le metriche dei campi, come quelle presenti nel Chrome UX Report o nel RUM, non hanno questa limitazione e sono un prezioso complemento ai dati di laboratorio, in quanto riflettono l'esperienza degli utenti reali. I dati dei campi non possono offrire i tipi di informazioni diagnostiche che ottieni in laboratorio, quindi i due vanno di pari passo.
Identifica i punti in cui puoi migliorare i Segnali web
Identifica l'elemento Largest Contentful Paint
LCP è una misurazione 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 Largest Contentful Paint. 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 in un solo clic.
Precarica le immagini rilevate in ritardo per migliorare l'LCP
Per migliorare il Largest Contentful Paint, precarica le immagini hero critiche se vengono rilevate in ritardo dal browser. Un rilevamento tardivo può verificarsi se è necessario caricare un bundle JavaScript prima che l'immagine sia rilevabile.
Ci sono alcune domande comuni che ci vengono poste sul precaricamento delle immagini LCP che potrebbe essere utile trattare brevemente.
È possibile precaricare le immagini adattabili? 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 uno sfondo CSS? Sì.
Qualsiasi immagine contrassegnata come immagine LCP, tramite sfondo CSS o <img>, è un candidato se viene rilevata a una profondità della struttura a cascata pari o superiore a tre.
Caricamento lento delle immagini fuori schermo ed esclusione di questa operazione per l'LCP
Le immagini fuori schermo che non sono fondamentali per l'esperienza utente iniziale possono essere caricate con il caricamento lento. Questa tecnica rimanda il download di un'immagine finché un utente non scorre vicino all'immagine, il che può ridurre la congestione della rete per gli asset critici e, in alcuni casi, migliorare l'LCP. Il controllo "Rimanda le immagini fuori schermo" può essere utile in questo caso:
Le immagini above the fold critiche, come l'immagine Largest Contentful Paint, non devono essere caricate tramite caricamento lento. In questo modo, il caricamento dell'immagine LCP potrebbe essere ritardato. Lighthouse evidenzierà se un'immagine LCP viene caricata tramite caricamento lento in modo errato tramite il controllo "L'immagine Largest Contentful Paint è stata caricata tramite caricamento lento":
Identifica i contributi CLS
Cumulative Layout Shift è una misura della stabilità visiva. Quantifica la misura in cui i contenuti di una pagina cambiano visivamente. Lighthouse dispone di un controllo per il debug di CLS chiamato "Evita grandi variazioni del layout".
Questo controllo evidenzia gli elementi DOM che contribuiscono maggiormente alle variazioni della pagina. Nella colonna Elemento a sinistra vedrai l'elenco di questi elementi DOM e a destra il loro contributo complessivo alla metrica CLS.
Grazie alla nuova funzionalità Screenshot degli elementi di Lighthouse, possiamo vedere un'anteprima visiva degli elementi chiave indicati nel controllo e fare clic per ingrandire e avere una visione più chiara:
Per il CLS post-caricamento, può essere utile visualizzare in modo persistente con rettangoli quali elementi hanno contribuito maggiormente al CLS. Questa è una funzionalità che troverai in strumenti di terze parti come la dashboard Core Web Vitals di SpeedCurve e per la quale mi piace utilizzare il Layout Shift GIF Generator di Defaced:
Per una visualizzazione in tutto il sito dei problemi di variazione del layout, utilizzo molto il report Core Web Vitals di Search Console. 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 concentrarmi):
Identificare il CLS dalle immagini senza dimensioni
Per limitare il Cumulative Layout Shift causato da immagini senza dimensioni, includi gli attributi di larghezza e altezza nelle immagini e negli elementi video. Questo approccio garantisce che il browser possa allocare la quantità di spazio corretta nel documento durante il caricamento dell'immagine.
Consulta l'articolo Setting Height And Width On Images Is Important Again per un buon resoconto sull'importanza di considerare le dimensioni e le proporzioni delle immagini.
Identificare il CLS dagli annunci
Publisher Ads for Lighthouse ti consente di trovare opportunità per migliorare l'esperienza di caricamento degli annunci sulla tua pagina, inclusi i contributi alla variazione del layout e alle attività lunghe che potrebbero ritardare la disponibilità della pagina per gli utenti. In Lighthouse, puoi attivarlo tramite i plug-in della community.
Ricorda che gli annunci sono uno dei fattori che contribuiscono maggiormente alle variazioni del layout sul web. È importante:
- Fai attenzione quando posizioni annunci non persistenti vicino alla parte superiore dell'area visibile
- Elimina gli spostamenti prenotando le dimensioni più grandi possibili per l'area annuncio
Evita animazioni non composite
Le animazioni non composite possono presentarsi come scadenti sui dispositivi di fascia bassa se attività JavaScript pesanti tengono occupato il thread principale. Queste animazioni possono introdurre variazioni del layout.
Se Chrome rileva che non è stato possibile eseguire il compositing di un'animazione, lo segnala a una traccia di DevTools letta da Lighthouse, che può così elencare gli elementi con animazioni di cui non è stato eseguito il compositing e il motivo. Puoi trovarli nel controllo Evita animazioni non composite.
Esegui il debug di First Input Delay/Total Blocking Time/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 personalizzato basato su JavaScript) e il momento in cui il browser è effettivamente in grado di iniziare a elaborare i gestori di eventi in risposta a questa interazione. Le attività JavaScript lunghe possono influire su questa metrica e sul proxy per questa metrica, ovvero il Total Blocking Time.
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 a sinistra possiamo vedere l'URL degli script responsabili delle attività lunghe del thread principale.
A destra possiamo vedere la durata di queste attività. Ti ricordiamo che le attività lunghe sono attività che vengono eseguite per più di 50 millisecondi. Questo viene considerato un blocco del thread principale sufficientemente lungo da influire sulla frequenza fotogrammi o sulla latenza di input.
Se stai valutando servizi di terze parti per il monitoraggio, mi piace molto anche la visualizzazione della cronologia di esecuzione del thread principale di Calibre per visualizzare questi costi, che evidenzia sia le attività principali che quelle secondarie che contribuiscono alle attività lunghe che influiscono sull'interattività.
Blocca 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à di singole risorse. Questo può essere utile per comprendere il costo dei singoli script (ad esempio tracker o incorporamenti di terze parti) su metriche come Total Blocking Time (TBT) e Time to Interactive.
Il blocco delle richieste di rete funziona anche con Lighthouse. Diamo una rapida occhiata al report di Lighthouse per un sito. Il punteggio delle prestazioni è 63/100 con un TBT di 400 ms. Esaminando il codice, scopriamo che questo sito carica un polyfill di Intersection Observer in Chrome, il che non è necessario. Blocchiamolo!
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. In questo caso, lo faremo per il polyfill Intersection Observer.
Poi possiamo eseguire nuovamente Lighthouse. Questa volta possiamo vedere che il nostro punteggio di rendimento è migliorato (70/100), così come il Total Blocking Time (400 ms => 300 ms).
Sostituisci gli incorporamenti 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ò comportare payload costosi che influiscono negativamente sull'esperienza utente. Si tratta di uno spreco se la terza parte non è fondamentale (ad esempio se l'utente deve scorrere prima di vederla).
Un pattern per migliorare le prestazioni di questi widget è il caricamento lento in base all'interazione dell'utente. Per farlo, esegui il rendering di un'anteprima leggera del widget (un facade) e carica 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 i video di YouTube incorporati.
Ti ricordiamo che Lighthouse evidenzia il codice di terze parti che blocca il thread principale per più di 250 ms. In questo modo, è possibile individuare tutti i tipi di script di terze parti (compresi quelli creati da Google) che potrebbe essere opportuno posticipare o caricare in modalità caricamento lento se ciò che mostrano richiede lo scorrimento per essere visualizzato.
Oltre i Core Web Vitals
Oltre a evidenziare 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 uso intensivo di JavaScript se hai attivato le mappe di origine.
Questi includono una raccolta crescente di controlli per ridurre il costo di JavaScript nella pagina, ad esempio riducendo la dipendenza da 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 di Lighthouse e Novità di DevTools.