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 gli aspetti che puoi migliorare in base ai Web Vitals
Identificare l'elemento Largest Contentful Paint
LCP è una misura dell'esperienza di caricamento percepita. Contrassegna il punto durante il caricamento della pagina in cui i contenuti principali o "più grandi" sono stati caricati ed sono visibili all'utente.
Lighthouse dispone di un controllo "Elemento Largest Contentful Paint" che identifica l'elemento che ha avuto il tempo di Largest Contentful Paint più elevato. Se passi il mouse sopra l'elemento, questo viene 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 possono 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 Largest Contentful Paint, precarica le tue immagini hero critiche se vengono scoperte in ritardo dal browser. La scoperta tardiva può verificarsi se è necessario caricare un bundle JavaScript prima che l'immagine sia rilevabile.
Ci sono alcune domande comuni sul precaricamento delle immagini LCP che potrebbero valere brevemente.
Puoi precaricare le immagini adattabili? Sì.
Supponiamo di avere un'immagine hero adattabile specificata 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 critiche above the fold, come l'immagine Largest Contentful Paint, non devono essere caricate tramite caricamento lento. In questo modo, il caricamento dell'immagine LCP può essere ritardato. 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à Screenshot degli elementi Lighthouse, possiamo visualizzare un'anteprima visiva degli elementi chiave annotati nel controllo e fare clic per eseguire 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 Defaced's Layout Shift GIF Generator 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 una CLS elevata (in questo caso aiutandomi a identificare da sé su quali parti del modello devo dedicare 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 la sezione È di nuovo importante impostare altezza e larghezza delle immagini per capire meglio l'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 le variazioni prenotando la dimensione più grande possibile per l'area annuncio
Evitare animazioni non composite
Le animazioni non composte possono presentarsi come difficili sui dispositivi di fascia bassa se attività JavaScript gravose mantengono occupato il thread principale. Queste animazioni possono introdurre variazioni del 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
Primo 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 tale 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 in modo da bloccare il thread principale per un tempo sufficiente a influire sulla frequenza frame o sulla latenza dell'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. Ciò può essere utile per comprendere il costo dei singoli script (ad es.incorporamenti o tracker di terze parti) su metriche come Tempo di blocco totale (TBT) e Tempo all'interazione.
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 costosi incorporamenti di terze parti con un facade
È pratica comune utilizzare risorse di terze parti per incorporare video, post di social media o widget nelle pagine. Per impostazione predefinita, la maggior parte degli incorporamenti si carica immediatamente e può includere payload costosi che incidono 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 la visualizzazione.
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.