Trovare opportunità per migliorare l'esperienza utente con gli strumenti web di Chrome.
Oggi vedremo le nuove funzionalità degli strumenti in Lighthouse, PageSpeed e DevTools per identificare più facilmente come il tuo sito può migliorare i Web Vitals.
Per fare un ripasso degli strumenti, Lighthouse è una strumento automatizzato open source per migliorare la qualità delle pagine web. Puoi trovarlo nel DevTools di eseguire il debug. da qualsiasi pagina web, pubblica o che richieda l'autenticazione. Puoi trovare Lighthouse anche PageSpeed Approfondimenti, CI e WebPageTest.
Lighthouse 7.x include nuove funzionalità, come gli screenshot degli elementi, per un'ispezione visiva più semplice delle parti dell'interfaccia utente che influiscono sulle metriche dell'esperienza utente (ad es. quali nodi contribuiscono al layout maiusc).
Abbiamo inoltre fornito il supporto per gli screenshot degli elementi su PageSpeed Insights, in modo da consentire a individuare facilmente i problemi relativi alle esecuzioni singole delle pagine.
Misura i Core Web Vitals
Lighthouse può misurare sinteticamente le metriche Core Web Vitals, tra cui Largest Contentful Paint, Cumulativa Layout Shift e Total Block Time (un proxy del lab per First Input Delay). Queste metriche riflettono il caricamento, la stabilità del layout e la prontezza dell'interazione. Altre metriche come First Contentful Paint evidenziato nel futuro di Sono presenti anche i Core Web Vitals.
"Metriche" del report Lighthouse include le versioni lab di queste metriche. Puoi utilizzare la modalità Questo è un riepilogo degli aspetti dell'esperienza utente che richiedono la tua attenzione.
Metriche sul campo, ad esempio quelle che si trovano nell'esperienza utente di Chrome Segnala o RUM, non dispongo di questo e sono un prezioso complemento dei dati di laboratorio, in quanto riflettono l'esperienza degli utenti reali avere. I dati sul campo non offrono i tipi di informazioni diagnostiche che ricevi nel lab, quindi i due metodi mano nella mano.
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 quando i contenuti principali o "più grandi" sono stati caricati e sono visibili all'utente.
Lighthouse ha un elemento "Largest Contentful Paint" che identifica l'elemento Large 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 indizio utile per ottimizzare il caricamento di questa immagine. Lighthouse include una serie di controlli di ottimizzazione delle immagini per aiutarti a comprendere se le tue immagini potessero essere compresse, ridimensionate o pubblicate meglio in un'immagine moderna e ottimale formato.
Potresti anche trovare l'opzione LCP Bookmarklet di Annie Sullivan è utile 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 il tuo hero critico se vengono scoperte in ritardo dal browser. Il rilevamento in ritardo può avvenire se È necessario caricare il bundle JavaScript affinché l'immagine sia rilevabile.
Ci sono alcune domande comuni sul precaricamento delle immagini LCP che potrebbero valere per illustrare brevemente il concetto.
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
precarica 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 evidenzierà anche le opportunità di precaricamento se l'immagine LCP è definita tramite un CSS sfondo? Sì.
Qualsiasi immagine segnalata come immagine LCP, tramite lo sfondo CSS o <img>, è candidata, se lo è
scoperta a una profondità di tre o più cascate.
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 caricamento lento tramite "L'immagine Largest Contentful Paint è stata caricata tramite caricamento lento". controllo:
Identificare i contributi della CLS
La metrica Cumulative Layout Shift misura la stabilità visiva. Quantifica il numero di immagini di una pagina i contenuti cambiano visivamente. Lighthouse ha un controllo per il debug della CLS denominato "Evita grandi variazioni del layout".
Questo controllo evidenzia gli elementi DOM che contribuiscono maggiormente alle variazioni della pagina. Nell'elemento colonna a sinistra vedrai l'elenco di questi elementi DOM e, a destra, il loro CLS complessivo contributo.
Grazie alla nuova funzionalità Screenshot degli elementi Lighthouse, possiamo vedere un'anteprima visiva del elementi chiave citati nel controllo, nonché la funzione click-to-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 metrica CLS. Si tratta di una funzionalità disponibile in strumenti di terze parti come Dashboard Core Web Vitals di SpeedCurve e che adoro usare GIF Defaced's Layout Shift Generatore per:
Per una visione a livello di sito dei problemi di variazione del layout, ottengo un buon impiego di Search Console report Web Vitals. In questo modo posso vedere i tipi di pagine del mio sito con una CLS elevata (in questo caso è utile per identificare autonomamente quale modello parziali a cui devo dedicare tempo):
Identificare la metrica CLS a partire da immagini senza dimensioni
Per limitare la metrica Cumulative Layout Shift causata dalle immagini senza dimensioni, includi gli attributi larghezza e altezza per le 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 È importante impostare altezza e larghezza sulle immagini Ancora per un buon resoconto sull'importanza di considerare le dimensioni e le proporzioni delle immagini.
Identificazione della metrica CLS dalla pubblicità
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 ad attività lunghe che possono far capire quanto tempo la tua pagina sarà utilizzabile dagli utenti. Nella Lighthouse, puoi attivare questa funzionalità tramite i plug-in della community.
Ricorda che gli annunci sono uno dei I maggiori fattori che contribuiscono alle variazioni del 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 sono Le attività JavaScript mantengono occupato il thread principale. Queste animazioni possono introdurre variazioni del layout.
Se Chrome rileva che non è possibile comporre un'animazione, la segnala a una traccia DevTools Lighthouse legge, consentendo di elencare gli elementi con animazioni non compositi e per per quale motivo. Puoi trovare questi dati nella sezione Evita il controllo delle animazioni.
Debug del primo ritardo di input / Tempo di blocco totale / Attività lunghe
Primo input misura il tempo trascorso dalla prima interazione di un utente con una pagina (ad esempio, quando fa clic su un link, toccare un pulsante o utilizzare un controllo personalizzato basato su JavaScript) fino all'ora in cui il browser di iniziare a elaborare i gestori di eventi in risposta a tale interazione. JavaScript lungo Le attività possono influire su questa metrica e sul proxy per questa metrica, ovvero Tempo di blocco totale.
Lighthouse include un controllo Evita lunghe attività del thread principale che elenca le le attività più lunghe sul thread principale. Questo può essere utile per identificare i peggiori collaboratori un ritardo di input. Nella colonna di sinistra possiamo vedere l'URL degli script responsabili del thread principale lungo attività di machine learning.
A destra possiamo vedere la durata di queste attività. Ti ricordiamo che le attività lunghe sono attività vengono eseguite per più di 50 millisecondi. In questo modo il thread principale viene bloccato per un tempo sufficiente a impatto sulla frequenza frame o sulla latenza dell'input.
Se consideri servizi di terze parti per il monitoraggio, mi piace anche l'esecuzione del thread principale la sequenza temporale. Calibre ha per visualizzare questi costi, mettendo in evidenza le attività del genitore e del figlio che hanno attività che influiscono sull'interattività.
Blocca le richieste di rete per visualizzare l'impatto prima/dopo in Lighthouse
Chrome DevTools supporta il blocco della rete richieste per vedere l'impatto delle singole risorse rimosse o non disponibili. Può essere utile per comprendere il costo che i singoli script (ad es.incorporamenti o tracker di terze parti) hanno su come Tempo di blocco totale (TBT) e Tempo all'interattività.
Il blocco delle richieste di rete funziona anche con Lighthouse. Diamo una rapida occhiata Report Lighthouse per un sito. Il punteggio Perf è 63/100 con un TBT di 400 ms. L'analisi del codice scopriamo che questo sito carica un polyfill di Intersection Observer in Chrome non necessario. Iniziamo 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
li annotino. 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) ha un 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 pagine. Per impostazione predefinita, la maggior parte degli incorporamenti si carica immediatamente e può includere payload costosi che avere un impatto negativo sull'esperienza utente. Questo è uno spreco se la terza parte non è critica (ad es. se l'utente deve scorrere prima di vederla).
Un metodo per migliorare le prestazioni di questi widget è il caricamento lento sui widget un'interazione. A questo scopo, esegui il rendering un'anteprima leggera del widget (un'interfaccia) e carica la versione completa solo se un utente interagisce con essa. Lighthouse ha un controllo che consiglia risorse di terze parti, che possono essere caricato con il 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 evidenziare i Core Web Vitals, anche le versioni recenti di Lighthouse e PageSpeed Insights prova a fornire indicazioni concrete che puoi seguire per migliorare la velocità con cui l'utilizzo di JavaScript possono essere caricate se le mappe di origine sono attivate.
Questi includono una crescente raccolta di controlli per ridurre il costo di JavaScript nella pagina, ad esempio: come la riduzione della 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 il Lighthouse dell'account Twitter del team e Novità di DevTools.