Trovare opportunità per migliorare l'esperienza utente con gli strumenti web di Chrome.
Oggi parleremo delle nuove funzionalità degli strumenti in Lighthouse, PageSpeed e DevTools per identificare meglio i miglioramenti del tuo sito su Web Vitals.
Ti ricordiamo che Lighthouse è uno strumento automatizzato e open source per migliorare la qualità delle pagine web. Puoi trovare questa funzionalità nella suite di strumenti di debug Chrome DevTools ed eseguirla 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 di parti della UI che influiscono sulle metriche dell'esperienza utente (ad es. quali nodi contribuiscono alla variazione del layout).
Abbiamo inoltre fornito il supporto per gli screenshot degli elementi su PageSpeed Insights, in modo da consentire un modo più semplice per individuare i problemi relativi a esecuzioni singole del rendimento delle pagine.
Misura i Core Web Vitals
Lighthouse è in grado di misurare sinteticamente le metriche Core Web Vitals, tra cui Largest Contentful Paint, Cumulative Layout Shift, e Total Blocking Time (un proxy del lab per First Input Delay). Queste metriche riflettono il caricamento, la stabilità del layout e la prontezza dell'interazione. Esistono anche altre metriche, come First Contentful Paint, evidenziate nel futuro di Core Web Vitals.
La sezione "Metriche" del report Lighthouse include le versioni del lab di queste metriche. Puoi utilizzarlo come una 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 hanno questa limitazione e sono un complemento prezioso ai dati di laboratorio, in quanto riflettono l'esperienza degli utenti reali. I dati sul campo non offrono i tipi di informazioni diagnostiche che ricevi nel lab, perciò le due opzioni vanno di pari passo.
Identifica dove puoi migliorare in Web Vitals
Identificare l'elemento Largest Contentful Paint
L'LCP è una misurazione 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 "Largest Contentful Paint", che identifica l'elemento che era il più grande elemento Contentful Paint. Se passi il mouse sopra l'elemento, questo viene evidenziato nella finestra principale del browser.
Se l'elemento è un'immagine, queste informazioni sono un suggerimento utile che ti consente di ottimizzare il caricamento dell'immagine. Lighthouse include una serie di controlli di ottimizzazione delle immagini per aiutarti a capire se è possibile comprimere, ridimensionare o pubblicare meglio le immagini in un formato di immagine moderno e ottimale.
Potresti trovare utile anche LCP Bookmarklet di Annie Sullivan per identificare rapidamente l'elemento LCP con un rettangolo rosso con un solo clic.
Precarica le immagini scoperte in ritardo per migliorare LCP
Per migliorare Largest Contentful Paint, precarica le tue immagini hero critiche se vengono scoperte in ritardo dal browser. Se è necessario caricare un bundle JavaScript prima che l'immagine sia rilevabile, è possibile che si verifichi un rilevamento tardivo.
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 usata 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 evidenzia anche le opportunità di precaricamento se l'immagine LCP viene definita tramite uno sfondo CSS? Sì.
Qualsiasi immagine contrassegnata come LCP tramite sfondo CSS o <img> è candidata se viene scoperta con una profondità della cascata pari o superiore a tre.
Caricamento lento di immagini fuori schermo ed evitarlo per LCP
Le immagini fuori schermo che non sono fondamentali per l'esperienza utente iniziale possono essere caricate tramite caricamento lento. Si tratta di una tecnica che rimanda il download di un'immagine finché l'utente non vi scorre vicino, il che può ridurre la contesa sulla rete per le risorse critiche e, in alcuni casi, migliorare la metrica LCP. Il controllo "Posticipa le immagini fuori schermo" può essere utile nei seguenti casi:
Le immagini critiche above the fold, come l'immagine Largest Contentful Paint, non devono essere caricate tramite caricamento lento. Ciò può ritardare il caricamento dell'immagine LCP. Lighthouse evidenzia se un'immagine LCP viene caricata in modo errato tramite il controllo "L'immagine Largest Contentful Paint è stata caricata lentamente":
Identificare i contributi della CLS
La metrica Cumulative Layout Shift misura la stabilità visiva. Quantifica la variazione visiva dei contenuti di una pagina. Lighthouse ha un controllo per il debug della CLS denominato "Evita variazioni di layout di grandi dimensioni".
Questo controllo evidenzia gli elementi DOM che contribuiscono maggiormente alle variazioni della pagina. Nella colonna Elemento a sinistra viene visualizzato l'elenco di questi elementi DOM e, a destra, il loro contributo complessivo alla 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 la CLS post-caricamento, può esserci un valore nella visualizzazione persistente con rettangoli quali elementi hanno contribuito maggiormente alla 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 visione a livello di 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 una CLS elevata (in questo caso aiutandomi a identificare da sé su quali parti del modello devo dedicare tempo):
Identificare la metrica CLS a partire da immagini senza dimensioni
Per limitare la metrica Cumulative Layout Shift causata da immagini senza dimensioni, includi gli attributi larghezza e altezza relativi alle dimensioni 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 Ancora una volta è importante impostare altezza e larghezza delle immagini per capire meglio l'importanza di considerare le dimensioni e le proporzioni delle immagini.
Identificazione della metrica CLS dalla pubblicità
Annunci dei publisher per Lighthouse ti consente di trovare opportunità per migliorare l'esperienza di caricamento degli annunci sulla tua pagina, ad esempio contributi alla variazione del layout e attività lunghe che potrebbero indicare quanto tempo prima la tua pagina sarà utilizzabile dagli utenti. In Lighthouse, puoi attivare questa funzionalità tramite i plug-in della community.
Ricorda che gli annunci sono tra i maggiori fattori che contribuiscono alle variazioni di layout sul web. È importante:
- Fai attenzione quando posizioni annunci non persistenti vicino alla parte superiore dell'area visibile
- Elimina le variazioni prenotando la dimensione più grande possibile per l'area annuncio
Evita animazioni non composte
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 un'animazione non può essere composita, la segnala a una traccia DevTools le lettura di Lighthouse, consentendo di elencare gli elementi con animazioni non compositi e il motivo per cui non è stato composto. Puoi trovare queste informazioni nel controllo Evita animazioni non composte.
Debug del primo ritardo di input / 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, ovvero il tempo di blocco totale.
Lighthouse include un controllo Evita attività lunghe del thread principale che elenca le attività più lunghe nel thread principale. Questo può essere utile per identificare i fattori che peggiori contribuiscono al ritardo dell'input. Nella colonna di sinistra possiamo vedere l'URL degli script responsabili di attività lunghe nel thread principale.
A destra possiamo vedere la durata di queste attività. Le attività lunghe sono attività che vengono eseguite per più di 50 ms. 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 prendiamo in considerazione servizi di terze parti per il monitoraggio, mi piace anche la timeline di esecuzione del thread principale che Calibre ha per visualizzare questi costi, il che evidenzia le attività principali e secondarie che contribuiscono ad attività lunghe che incidono sull'interattività.
Blocca le richieste di rete per visualizzare l'impatto prima/dopo in Lighthouse
Chrome DevTools supporta il blocco delle richieste di rete per conoscere l'impatto delle singole risorse che vengono rimosse o non disponibili. 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 una rapida occhiata al report Lighthouse per un sito. Il punteggio Perf è 63/100 con un TBT di 400 ms. Esaminando il codice, scopriamo che questo sito carica un polyfill di Intersection Observer in Chrome, non necessario. Bloccalo!
Possiamo fare clic con il tasto destro del mouse su uno script nel riquadro della rete DevTools e fare clic su Block Request URL per bloccarlo. Lo facciamo per il polyfill di Intersection Observer.
Ora possiamo eseguire di nuovo Lighthouse. Questa volta possiamo vedere che il punteggio delle prestazioni è migliorato (70/100) e 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 è critica (ad es. se l'utente deve scorrere prima di vedere).
Un metodo per migliorare le prestazioni di questi widget è il caricamento lento in caso di interazione dell'utente. A questo scopo, puoi eseguire il rendering di un'anteprima leggera del widget (un'interfaccia) e caricare la versione completa solo se un utente interagisce con quest'ultima. Lighthouse ha un controllo che consiglia risorse di terze parti che possono essere caricate tramite caricamento lento con un facade, come gli incorporamenti di video di YouTube.
Ti ricordiamo che Lighthouse evidenzia il codice di terze parti che blocca il thread principale per oltre 250 ms. Ciò può esporre tutti i tipi di script di terze parti (inclusi quelli creati da Google) che potrebbero valere meglio il differimento o il caricamento lento se ciò di cui viene eseguito il rendering richiede lo scorrimento per essere visualizzato.
Oltre i Core Web Vitals
Oltre a mettere in evidenza i Core Web Vitals, anche le versioni recenti di Lighthouse e PageSpeed Insights provano a fornire indicazioni concrete che puoi seguire per migliorare la velocità di caricamento delle applicazioni web con utilizzo intensivo di JavaScript se hai attivato le mappe di origine.
Queste includono una crescente raccolta 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 Core Web Vitals, tieni d'occhio l'account Twitter del team Lighthouse e le novità di DevTools.