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 per ottimizzare l'utilizzo delle risorse.

Utilizza il riquadro Rendimento per:

• Registra un profilo di rendimento.
• Modificare le impostazioni di acquisizione.
• Analizza un report sul rendimento.

Per una guida completa su come migliorare il rendimento del tuo sito web, consulta Analisi del rendimento in fase di esecuzione.

Apri il riquadro Prestazioni

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.

Monitorare 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 tua pagina, il riquadro Rendimento acquisisce anche l'Interaction to Next Paint (INP) locale e il relativo punteggio, che, oltre a LCP e CLS, offre una panoramica completa dei Core Web Vitals della tua pagina utilizzando la connessione di rete e il dispositivo.

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

Per visualizzare un'analisi dettagliata 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 sul campo, 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 di campo per questo URL e poi li mostrerà indipendentemente dalla pagina a cui accedi.

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

   Una volta configurato il recupero dei dati dei campi, 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 di campo a destra.

   

   Per visualizzare un'analisi dettagliata 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

Una volta configurato il recupero dei dati di campo come descritto nella sezione precedente, il riquadro Rendimento fornisce consigli su come configurare l'ambiente in modo che corrisponda meglio all'esperienza dei tuoi 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.

   

   A quanto pare, in questo esempio, per adattarsi meglio all'esperienza degli utenti, ti consigliamo di utilizzare le dimensioni dello schermo di un computer comuni e di ridurre la CPU e la rete.

2. Per fare in modo che la configurazione dell'ambiente corrisponda a quella di questo esempio:

   1. Imposta l'area visibile su una delle dimensioni dello schermo più 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 su, ad esempio, Rallentamento 20x. Nella stessa sezione, assicurati anche di check_box Disattiva cache di rete.

3. Una volta 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 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.

Ora puoi iniziare a migliorare i Segnali web essenziali del tuo sito web:

• Ottimizzare l'LCP
• Ottimizzare l'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 la registrazione, il riquadro Rendimento offre le seguenti opzioni:

• Registrare il rendimento in fase di runtime
• Registrare il rendimento del 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 del rendimento e possono fornirti ulteriori informazioni nel report. Fai clic su Impostazioni di acquisizione Impostazioni 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 nel canale Principale che vengono chiamati durante la registrazione. Ridurrà l'overhead delle prestazioni.
• Attiva la strumentazione di colorazione avanzata (lento): acquisisce la strumentazione di colorazione avanzata. Impedisce notevolmente il rendimento.
• Attiva le statistiche del selettore CSS (lento): acquisisce le statistiche del selettore CSS. Impedisce notevolmente 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 navigare nel report:

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

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 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 forma di fiamma
• Visualizzare uno screenshot
• Visualizzare le metriche relative alla memoria
• Visualizzare la durata di una parte di una registrazione
• Analisi del rendimento dei selettori CSS durante gli eventi di ricalcolo dello stile
• Eseguire il profiling del rendimento di Node.js con il riquadro Rendimento
• Analizzare i frame al secondo (FPS)
• Riferimento all'evento della cronologia

Migliora il rendimento con questi riquadri

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

• Lighthouse: ottimizza la velocità del sito web
• Memoria: panoramica del riquadro Memoria
• Approfondimenti sul rendimento: informazioni strategiche sul rendimento del tuo sito web
• Rendering: scoprire i problemi relativi al rendimento del rendering
• Problemi: trova e risolvi i problemi
• Rendimento: visualizza le informazioni sui livelli