Riquadro Rendimento: analizza il rendimento del tuo sito web

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

Panoramica

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

Utilizza il riquadro Rendimento per:

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

Per una guida completa sul miglioramento delle prestazioni del tuo sito web, consulta Analisi delle prestazioni di runtime.

Apri il riquadro Rendimento

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

In alternativa, segui questi passaggi per aprire il riquadro Rendimento con il menu dei comandi:

1. Apri DevTools.
2. Apri il menu Comando premendo:
3. macOS: Comando+Maiusc+P
4. Windows, Linux, ChromeOS: Ctrl+Maiusc+P
5. Inizia a digitare Performance panel, seleziona Mostra riquadro Rendimento e premi Invio.

Osserva i Core Web Vitals in tempo reale

Quando apri il riquadro Rendimento, vengono immediatamente acquisite e visualizzate le metriche Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS) locali, con il relativo punteggio (buono, richiede miglioramenti o cattivo).

Se interagisci con la pagina, il riquadro Rendimento acquisisce anche l'interazione con Next Paint (INP) locale e il relativo punteggio. Questo, insieme a LCP e CLS, offre una panoramica completa dei Core Web Vitals della pagina utilizzando la connessione di rete e il dispositivo.

Il riquadro Rendimento fornisce un elenco delle interazioni acquisite nelle tre schede delle metriche. Per cancellare l'elenco, fai clic su Blocca Cancella.

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

Confronta la tua esperienza con quella dei tuoi utenti

Puoi anche recuperare i dati dei campi dal Report sull'esperienza utente di Chrome e confrontare l'esperienza degli utenti del tuo sito con le metriche locali.

Per aggiungere i dati sul campo:

1. In Rendimento > Passaggi successivi > Dati dei campi: fai clic su Configura.

   

2. Nella finestra di dialogo Configura il recupero dei dati dei campi, prendi nota dell'Informativa sulla privacy e fai clic su Ok.

   (Avanzato) Configura una mappatura tra gli ambienti di sviluppo e di produzione…

   Se vuoi, per ottenere automaticamente i dati di campo più pertinenti, puoi configurare più mappature tra le origini di sviluppo e di 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 mostrerà i dati di campo per example.com/page1 quando vai a localhost:8080/page1.

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

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

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

   

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

Configura il tuo ambiente in modo che corrisponda meglio a quello dei tuoi utenti

Dopo aver configurato il recupero dei dati dei campi come descritto nella sezione precedente, il riquadro Rendimento fornisce consigli su come configurare il tuo ambiente per adattarlo meglio all'esperienza degli utenti.

Per configurare il tuo ambiente:

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

   

   In questo esempio, per corrispondere meglio all'esperienza dei tuoi utenti, potresti voler utilizzare uno schermo desktop di dimensioni comuni e limitare la CPU e la rete.

2. Per trovare la corrispondenza con la configurazione dell'ambiente per 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 di campo corretti, puoi selezionare Computer dall'elenco a discesa Dati di campo > Dispositivo.
   3. Nella sezione Impostazioni ambiente, imposta l'elenco a discesa Rete su, ad esempio, 4G veloce e CPU, ad esempio su Raffreddamento 20x. Assicurati anche di check_box Disattiva cache di rete nella stessa sezione.

3. Una volta configurato il tuo ambiente, ricarica la pagina, interagisci con questa per acquisire il tuo INP locale e confronta di nuovo i punteggi delle metriche.

   

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

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

• Ottimizzare l'LCP
• Ottimizza INP
• Ottimizzare la metrica 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.

Registra un profilo di rendimento

Quando è tutto pronto per registrare, il riquadro Rendimento offre le seguenti opzioni:

• Registrare le prestazioni di runtime
• Registrare prestazioni di caricamento
• Acquisire screenshot durante la registrazione
• Forzare la raccolta dei rifiuti durante la registrazione
• Salvare una registrazione
• Caricare una registrazione
• Cancellare una registrazione

Modificare le impostazioni di acquisizione

Le impostazioni di acquisizione ti consentono di modificare il modo in cui DevTools acquisisce le registrazioni delle prestazioni e possono fornirti ulteriori informazioni nel report. Fai clic su Acquisisci impostazioni impostazioni per accedere al menu Impostazioni di acquisizione.

Seleziona le seguenti opzioni dal menu Impostazioni di acquisizione:

• Disabilita esempi JavaScript: disattiva la registrazione degli stack di chiamate JavaScript visualizzati nella traccia Principale che vengono chiamate durante la registrazione. Ridurrà l'overhead delle prestazioni.
• Attiva la strumentazione di colorazione avanzata (lenta): acquisisce la strumentazione di colorazione avanzata. Ostacola significativamente il rendimento.
• Attiva le statistiche del selettore CSS (lento): acquisisce le statistiche del selettore CSS. Ostacola significativamente il rendimento.
• Limitazione della CPU: simula velocità della CPU più lente.
• Limitazione della larghezza di banda della rete: simula velocità di rete più ridotte.
• Contemporaneità hardware: configura il valore riportato da navigator.hardwareConcurrency.

Analizzare un report sul rendimento

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

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

Per scoprire come esplorare il report:

• Esplorare la registrazione
• Attività di ricerca
• Monitorare le persone che hanno avviato un evento

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

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

Per informazioni sulle schede Dal basso verso l'alto, Albero chiamate e Log eventi:

• Visualizzare le attività in una tabella

Per scoprire come analizzare il report:

• Visualizzare l'attività del thread principale
• Leggi il grafico a fiamme
• Visualizzare uno screenshot
• Visualizzare le metriche della memoria
• Visualizzare la durata di una parte di una registrazione
• Analisi del rendimento del selettore CSS durante gli eventi di ricalcolo dello stile
• Profilo delle prestazioni di Node.js con il riquadro Prestazioni
• Analizzare i frame al secondo (FPS)
• Informazioni sugli eventi della sequenza temporale

Migliora 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
• Informazioni sul rendimento: ottieni informazioni strategiche sul rendimento del tuo sito web
• Rendering: scopri i problemi relativi al rendimento del rendering
• Problemi: trovare e risolvere i problemi
• Rendimento: visualizza le informazioni sui livelli