Riquadro Rendimento: analizza il rendimento del tuo sito web

Usa il riquadro Prestazioni per analizzare le prestazioni del tuo sito web.

Panoramica

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

Utilizza il riquadro Prestazioni per:

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

Per una guida completa su come migliorare le prestazioni del tuo sito web, consulta Analizzare le prestazioni 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, da migliorare 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. Acquisisce e segnala anche i Core Web Vitals per le navigazioni soft lato client nelle applicazioni a pagina singola.

Nelle tre schede delle metriche nelle schede Interazioni e Spostamenti di layout , 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 blocco Cancella.

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

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.

   Avanzate: configurare una mappatura tra gli ambienti di sviluppo e produzione...

   Facoltativamente, per ottenere automaticamente i dati sul campo più pertinenti, puoi configurare (più) mappature 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 mappatura, inserisci gli URL di sviluppo e produzione e fai clic su +.

      

      Ad esempio, una mappatura di http://localhost:8080 a https://example.com visualizzerà 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 a cui vai.

      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 ora mostra un confronto tra i punteggi delle metriche locali e quelli sperimentati 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 un tooltip.

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 ti 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 corrispondere meglio all'esperienza degli utenti, potresti voler utilizzare una dimensione dello schermo del computer comune e limitare la CPU e la rete.

2. Per corrispondere alla configurazione dell'ambiente per questo esempio:

   1. Imposta la finestra 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. Dopo aver configurato l'ambiente, 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 sperimentati 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 prestazioni

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

• Registra le prestazioni di runtime
• Registra le prestazioni 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 delle prestazioni da parte di DevTools e possono fornirti 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 i campioni JavaScript: disattiva la registrazione degli stack di chiamate JavaScript visualizzati nella traccia Principale chiamati durante la registrazione. Riduce l'overhead delle prestazioni.
• Attiva la strumentazione di disegno avanzata (lenta): acquisisce la strumentazione di disegno avanzata. Ostacola notevolmente le prestazioni.
• Attiva le statistiche del selettore CSS (lento): acquisisce le statistiche del selettore CSS. Ostacola notevolmente le prestazioni.
• Limitazione della CPU: simula velocità della CPU più lente.
• Limitazione della larghezza di banda della rete: simula velocità della rete più lente.
• Acquisizione di screenshot: scegli una dimensione del frame dello screenshot e un limite di conteggio preimpostati quando l'opzione Screenshot è attivata.

Analizzare un report sul rendimento

Consulta Analizzare una registrazione delle prestazioni 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
• Cercare attività
• Monitorare gli iniziatori di eventi

Utilizzare insight sul rendimento per ottenere insight operativi sul rendimento del tuo sito web:

• Insight 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, Albero delle chiamate e Log 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
• Creare profili delle prestazioni 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

Risorse aggiuntive