Ricerca di opportunità per migliorare l'esperienza utente con gli strumenti web di Chrome.
Oggi parleremo delle nuove funzionalità degli strumenti di Lighthouse, PageSpeed e DevTools per aiutarvi a identificare in che modo il vostro sito può migliorare in Segnali web.
Per fare un ripasso degli strumenti, Lighthouse è uno strumento automatizzato 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 richieda 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 incidono sulle metriche dell'esperienza utente (ad es. quali nodi contribuiscono alla variazione del layout).
Abbiamo anche fornito supporto per gli screenshot degli elementi su PageSpeed Insights, in modo da individuare più facilmente i problemi relativi a esecuzioni una tantum delle pagine.
Misura i Segnali web essenziali
Lighthouse può misurare sinteticamente le metriche di Segnali web essenziali, 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 l'idoneità all'interazione. Ci sono anche altre metriche come First Contentful Paint messa in evidenza nel futuro dei Segnali web essenziali.
La sezione "Metriche" del report Lighthouse include le versioni dei lab di queste metriche. Puoi utilizzarla come una panoramica di riepilogo degli aspetti dell'esperienza utente che richiedono la tua attenzione.
Le metriche sul campo, come quelle che si trovano nel report sull'esperienza utente di Chrome o nel RUM, non presentano questa limitazione e sono un'utile integrazione ai dati di laboratorio in quanto riflettono l'esperienza vissuta dagli utenti reali. I dati sul campo non sono in grado di fornire i tipi di informazioni diagnostiche disponibili in laboratorio, pertanto i due dati vanno di pari passo.
Identifica gli aspetti che puoi migliorare nei Segnali web
Identifica l'elemento Largest Contentful Paint
La metrica LCP misura l'esperienza di caricamento percepita. Durante il caricamento della pagina, segna il punto in cui il contenuto principale, o "più grande", è stato caricato ed è visibile all'utente.
Lighthouse dispone di un controllo "elemento Largest Contentful Paint" che identifica quale elemento è stato l'elemento più grande con contenuti. Passa il mouse sopra l'elemento per evidenziarlo nella finestra principale del browser.
Se questo elemento è un'immagine, queste informazioni sono un suggerimento utile per ottimizzare il caricamento dell'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 meglio in un formato dell'immagine moderno e più ottimale.
Potrebbe esserti 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 tardi per migliorare la metrica LCP
Per migliorare la metrica Largest Contentful Paint, precarica le tue immagini hero critiche se vengono scoperte in ritardo dal browser. Può verificarsi un rilevamento tardivo 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 la pena trattare brevemente.
Puoi 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 viene definita tramite uno sfondo CSS? Sì.
Qualsiasi immagine contrassegnata come LCP tramite sfondo CSS o <img> è candidata se viene scoperta a una profondità di struttura a cascata di tre o più.
Caricamento lento delle 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é un utente non scorre vicino all'immagine, il che può ridurre la contesa della rete per gli asset critici e, in alcuni casi, migliorare la metrica LCP. Il controllo "Rimanda immagini fuori schermo" può essere utile in questi casi:
Le immagini critiche above the fold, come l'immagine Largest Contentful Paint, non devono essere caricate tramite caricamento lento. Questo potrebbe ritardare il caricamento dell'immagine LCP. Lighthouse viene evidenziato se un'immagine LCP viene caricata tramite caricamento lento in modo errato tramite il controllo "L'immagine di Largest Contentful Paint è stata caricata tramite caricamento lento":
Identificare i contributi CLS
La metrica Cumulative Layout Shift è una misurazione della stabilità visiva. Quantifica lo spostamento visivo dei contenuti di una pagina. Lighthouse dispone di un controllo per il debug CLS chiamato "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 puoi vedere l'elenco di questi elementi DOM e, a destra, il loro contributo CLS complessivo.
Grazie alla nuova funzionalità Screenshot degli elementi Lighthouse, possiamo vedere un'anteprima visiva degli elementi chiave indicati 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 gli elementi che hanno contribuito maggiormente alla CLS. Questa è una funzionalità che troverai in strumenti di terze parti, come la dashboard Segnali web essenziali di SpeedCurve, e che adoro usare il Generatore di GIF per la variazione del layout di Defaced per:
Per una visione a livello di sito dei problemi di variazione del layout, ottengo molti chilometri dal report Segnali web essenziali di Search Console. Questo mi consente di vedere i tipi di pagine del mio sito con un CLS elevato (in questo caso, aiutandomi a identificare autonomamente le parti del modello su cui devo dedicare il mio tempo):
Identificare il CLS in immagini senza dimensioni
Per limitare la variazione cumulativa del layout causata da immagini senza dimensioni, includi gli attributi relativi alla larghezza e all'altezza delle immagini e degli 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 È importante ridefinire l'altezza e la larghezza delle immagini per un riepilogo dell'importanza di tenere conto delle dimensioni e delle proporzioni delle immagini.
Identificazione di CLS dagli annunci
Annunci del publisher per Lighthouse ti consente di trovare opportunità per migliorare l'esperienza di caricamento degli annunci sulla tua pagina, compresi i contributi alla variazione del layout e attività lunghe che potrebbero determinare quando la pagina è utilizzabile dagli utenti. In Lighthouse puoi attivare questa funzionalità tramite i plug-in della community.
Ricorda che gli annunci sono uno dei fattori maggiori delle variazioni di layout sul Web. È importante:
- Fai attenzione quando posizioni gli annunci non persistenti vicino alla parte superiore dell'area visibile
- Elimina le variazioni prenotando la dimensione massima possibile per l'area annuncio
Evita animazioni non composite
Le animazioni non composite possono presentarsi come scadenti sui dispositivi di fascia inferiore se attività JavaScript molto impegnative mantengono occupato il thread principale. Queste animazioni possono introdurre variazioni di layout.
Se Chrome rileva che un'animazione non può essere composita, la segnala a una traccia DevTools le letture di Lighthouse, che gli permette di elencare gli elementi con animazioni non compositi e per quale motivo. Le trovi nel controllo Evita animazioni non composte.
Debug First Input Delay / Tempo di blocco totale / Attività lunghe
First Input misura il tempo trascorso 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, il 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 a sinistra puoi vedere l'URL degli script responsabili delle attività lunghe nel thread principale.
A destra è indicata la durata di queste attività. Ti ricordiamo che le attività lunghe sono attività che vengono eseguite per più di 50 millisecondi. In questo modo, il thread principale viene bloccato per un tempo abbastanza lungo da influire sulla frequenza frame o sulla latenza dell'input.
Se consideriamo i servizi di terze parti per il monitoraggio, mi piace anche la sequenza temporale di esecuzione del thread principale che Calibre ha visivo per visualizzare questi costi, che evidenzia le attività principali e secondarie che contribuiscono ad 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à delle singole risorse. Ciò può essere utile per comprendere il costo dei singoli script (ad esempio, incorporamenti o tracker di terze parti) in base a metriche quali Tempo di blocco totale (TBT) e Tempo all'interattività.
Il blocco delle richieste di rete funziona anche con Lighthouse. Diamo una rapida occhiata al report Lighthouse relativo a un sito. Il punteggio Perf è 63/100 con un TBT di 400 ms. Esaminando il codice, abbiamo scoperto che questo sito carica un polyfill di Intersection Identifir in Chrome, che non è necessario. Bloccalo!
Possiamo fare clic con il tasto destro del mouse su uno script nel riquadro Rete DevTools e fare clic su Block Request URL per bloccarlo. Qui lo faremo per il polyfill Intersection Identifir.
Ora possiamo eseguire nuovamente Lighthouse. Questa volta possiamo vedere che il nostro punteggio delle prestazioni è migliorato (70/100) con il tempo di blocco totale (400 ms => 300 ms).
Sostituisci 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 viene caricata immediatamente e può includere payload costosi che influiscono negativamente sull'esperienza utente. Questo è uno spreco di risorse se la terza parte non è critica (ad esempio se l'utente deve scorrere prima di vederla).
Un pattern per migliorare le prestazioni di questi widget consiste nel caricarli lentamente all'interazione dell'utente. A questo scopo, puoi eseguire il rendering di un'anteprima leggera del widget (un facade) e caricare la versione completa solo se un utente interagisce con questo elemento. Lighthouse dispone di 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 evidenzierà il codice di terze parti che blocca il thread principale per oltre 250 ms. Questo 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 per visualizzare l'elemento visualizzato è necessario scorrere la pagina.
Oltre i Segnali web essenziali
Oltre a evidenziare i Segnali web essenziali, le versioni recenti di Lighthouse e PageSpeed Insights provano anche a fornire indicazioni concrete da seguire per migliorare la velocità di caricamento delle applicazioni web con uso intensivo di JavaScript se hai attivato le mappe di origine.
tra cui una crescente raccolta di controlli volti a ridurre il costo di JavaScript nella pagina, ad esempio riducendo l'affidamento a polyfill e duplicati che potrebbero non essere necessari per l'esperienza utente.
Per ulteriori informazioni sugli strumenti di Segnali web essenziali, tieni d'occhio l'account Twitter del team di Lighthouse e le Novità di DevTools.