Riquadro Rendimento: analizza il rendimento del tuo sito web

Utilizza il riquadro Prestazioni per analizzare il rendimento del tuo sito web.

Panoramica

Il riquadro Prestazioni ti consente di registrare i profili di rendimento della CPU delle tue applicazioni web. Analizza i profili per trovare potenziali colli di bottiglia del rendimento e modi per ottimizzare l'utilizzo delle risorse.

Utilizza il riquadro Prestazioni per:

• Registrare un profilo di rendimento.
• Modificare le impostazioni di acquisizione.
• Analizzare un report sul rendimento.

Per una guida completa su come migliorare il rendimento del tuo sito web, consulta Analizzare il rendimento di runtime.

Aprire il riquadro Prestazioni

Per aprire il riquadro Prestazioni, apri DevTools e seleziona Prestazioni da un insieme di schede in alto.

In alternativa, segui questi passaggi per aprire il riquadro Prestazioni con il menu Comando:

1. Apri DevTools.
2. Apri il menu Comando premendo:
3. macOS: Command+Shift+P
4. Windows, Linux, ChromeOS: Control+Shift+P
5. Inizia a digitare Performance panel, seleziona Show Performance panel e premi Enter.

Osservare i Core Web Vitals live

Quando apri il riquadro Prestazioni , questo acquisisce e mostra immediatamente le metriche Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS) locali e indica il relativo punteggio (buono, deve essere migliorato o scarso).

Se interagisci con la pagina, il riquadro Prestazioni acquisisce anche l'Interaction to Next Paint (INP) locale e il relativo punteggio, che, oltre a LCP e CLS, ti offre una panoramica completa dei Core Web Vitals della tua pagina utilizzando la connessione di rete e il dispositivo.

Nelle schede Interazioni e Spostamenti di layout, sotto le tre schede delle metriche, puoi trovare tabelle con informazioni sulle interazioni e sugli spostamenti di layout acquisiti, inclusi elementi, tempistiche, fasi (per le interazioni) e punteggi (per gli spostamenti di layout). Per cancellare entrambi gli elenchi, fai clic su block Cancella.

Per visualizzare una suddivisione del punteggio di una metrica, passa il mouse sopra il valore della metrica per visualizzare una descrizione comando.

Confrontare la propria esperienza con quella degli utenti

Puoi anche recuperare i dati sul campo dal Chrome UX Report e confrontare l'esperienza degli utenti del tuo sito con le tue metriche locali.

Per aggiungere i dati sul campo:

1. In Prestazioni > Passaggi successivi > Dati sul campo, fai clic su Configura.

   

2. Nella finestra di dialogo Configura il recupero dei dati sul campo , prendi nota della Dichiarazione sulla privacy e fai clic su Ok.

   Avanzato: configurare un mapping tra gli ambienti di sviluppo e produzione...

   Facoltativamente, per ottenere automaticamente i dati sul campo più pertinenti, puoi configurare uno o più mapping tra le origini di sviluppo e produzione:

   1. Nella finestra di dialogo, espandi la sezione Avanzate e fai clic su + Nuovo.

   2. Nella tabella di mapping, inserisci gli URL di sviluppo e produzione e fai clic su +.

      

      Ad esempio, un mapping da http://localhost:8080 a https://example.com mostrerà i dati sul campo per example.com/page1 quando vai a localhost:8080/page1.

      Inoltre, se per qualche motivo non riesci a ottenere automaticamente i dati sul campo, puoi attivare check_boxMostra sempre i dati sul campo per l'URL di seguito e fornire un URL. Il riquadro Prestazioni tenterà di recuperare prima i dati sul campo per questo URL e poi li mostrerà indipendentemente dalla pagina che visiti.

      Per modificare le impostazioni di recupero dei dati sul campo dopo la configurazione, fai clic su Dati sul campo > Configura.

   Con il recupero dei dati sul campo configurato, il riquadro Prestazioni mostra ora un confronto tra i punteggi delle metriche locali e quelli riscontrati dagli utenti. Puoi visualizzare il periodo di raccolta nella sezione Dati sul campo a destra.

   

   Per visualizzare una suddivisione del punteggio di una metrica, passa il mouse sopra il valore della metrica per visualizzare una descrizione comando.

Configurare l'ambiente in modo che corrisponda meglio a quello degli utenti

Con il recupero dei dati sul campo configurato come descritto nella sezione precedente, il riquadro Prestazioni fornisce consigli su come configurare l'ambiente in modo che corrisponda meglio all'esperienza degli utenti.

Per configurare l'ambiente:

1. In ogni scheda delle metriche, espandi la sezione Valuta le condizioni di test locali, se presente, e leggi i consigli.

   

   Sembra che in questo esempio, per far corrispondere meglio l'esperienza degli utenti, potresti voler utilizzare una dimensione dello schermo del computer comune e limitare la CPU e la rete.

2. Per far corrispondere la configurazione dell'ambiente a questo esempio:

   1. Imposta l'area visibile su una delle dimensioni dello schermo comuni (ad esempio 720p o 1080p). Per emulare dispositivi e dimensioni dello schermo specifici, puoi utilizzare la modalità Dispositivo nel riquadro Elementi.
   2. L'82% degli utenti del sito web in questo esempio utilizza computer per navigare. Per assicurarti di confrontare i punteggi delle metriche locali con i dati sul campo corretti, puoi selezionare Computer dall'elenco a discesa Dati sul campo > Dispositivo.
   3. Nella sezione Impostazioni ambiente , imposta l'elenco a discesa Rete su, ad esempio, 4G veloce e CPU su, ad esempio, Rallentamento di 20 volte. Puoi anche assicurarti di check_box Disattiva cache di rete nella stessa sezione.

3. Con l'ambiente configurato, ricarica la pagina, interagisci con essa per acquisire l'INP locale e confronta di nuovo i punteggi delle metriche.

   

   Sembra che i punteggi delle metriche siano ora più simili a quelli riscontrati dagli utenti. Di conseguenza, le sezioni Valuta le condizioni di test locali sono scomparse dalle schede delle metriche.

A questo punto, puoi iniziare a migliorare i Core Web Vitals del tuo sito web:

• Ottimizzare LCP
• Ottimizzare INP
• Ottimizzare CLS

Acquisire e analizzare un report sul rendimento

Nelle sezioni successive, segui le indicazioni su come registrare un profilo, modificare le impostazioni di acquisizione e analizzare il report.

Registrare un profilo di rendimento

Quando sei pronto per la registrazione, il riquadro Prestazioni ti offre le seguenti opzioni:

• Registra il rendimento di runtime
• Registra il rendimento di caricamento
• Acquisisci screenshot durante la registrazione
• Forza la garbage collection durante la registrazione
• Salva una registrazione
• Carica una registrazione
• Cancella una registrazione

Modificare le impostazioni di acquisizione

Le impostazioni di acquisizione ti consentono di modificare la modalità di acquisizione delle registrazioni del rendimento da parte di DevTools e possono fornire informazioni aggiuntive nel report. Fai clic su Impostazioni di acquisizione settings per accedere al menu Impostazioni di acquisizione.

Seleziona le seguenti opzioni dal menu Impostazioni di acquisizione:

• Disattiva campioni di JavaScript: disattiva la registrazione degli stack di chiamate JavaScript visualizzati nella traccia Principale chiamati durante la registrazione. Riduce l'overhead di rendimento.
• Attiva la strumentazione di colorazione avanzata (lento): acquisisce la strumentazione di colorazione avanzata. Ostacola notevolmente il rendimento.
• Attiva le statistiche del selettore CSS (lento): acquisisce le statistiche del selettore CSS. Ostacola notevolmente il rendimento.
• Limitazione della CPU: simula velocità della CPU più lente.
• Limitazione della larghezza di banda della rete: simula velocità di rete più lente.

Analizzare un report sul rendimento

Consulta Analizzare una registrazione del rendimento per una guida completa su come utilizzare il riquadro Prestazioni.

Di seguito è riportato un raggruppamento di argomenti della guida, oltre ad altra documentazione utile:

Per scoprire come navigare nel report:

• Navigare nella registrazione
• Attività di ricerca
• Monitorare gli iniziatori di eventi

Utilizza Informazioni sul rendimento per ottenere informazioni strategiche sul rendimento del tuo sito web:

• Informazioni sul rendimento

Per scoprire come concentrarti su ciò che conta per il tuo flusso di lavoro:

• Modificare l'ordine delle tracce e nasconderle
• Nascondere le funzioni e i relativi figli nel grafico a fiamma
• Creare breadcrumb e passare da un livello di zoom all'altro

Per scoprire di più sulle schede Dal basso verso l'alto, Albero delle chiamate e Log degli eventi:

• Visualizzare le attività in una tabella

Per scoprire come analizzare il report:

• Visualizzare l'attività del thread principale
• Leggere il flame chart
• Visualizzare uno screenshot
• Visualizzare le metriche di memoria
• Visualizzare la durata di una parte di una registrazione
• Analizzare il rendimento del selettore CSS durante gli eventi di ricalcolo dello stile
• Profilare il rendimento di Node.js con il riquadro Prestazioni
• Analizzare i frame al secondo (FPS)
• Riferimento agli eventi della sequenza temporale

Migliorare il rendimento con questi riquadri

Scopri altri riquadri che possono aiutarti a migliorare il rendimento del tuo sito web:

• Lighthouse: ottimizzare la velocità del sito web
• Memoria: panoramica del riquadro Memoria
• Rendering: scoprire i problemi relativi al rendimento del rendering
• Problemi: trovare e risolvere i problemi
• Prestazioni: visualizzare le informazioni sui livelli