Riquadro Rendimento: analizza il rendimento del tuo sito web

Dale St. Marthe

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.
• 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 Comando:

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, il riquadro acquisisce e mostra immediatamente le metriche locali Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS) per indicare il relativo punteggio (Buono, Da migliorare o Scadente).

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 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 dati dei campi:

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 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 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 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

Dopo aver configurato il recupero dei dati dei campi come descritto nella sezione precedente, il riquadro Prestazioni 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 di test locali, se presente, 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 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 comuni (ad esempio, 720p o 1080p). Per emulare dispositivi e dimensioni dello schermo specifici, puoi utilizzare la modalità Dispositivo nel riquadro Elementi.
   2. In questo esempio, l'82% degli utenti del sito web utilizza i 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. 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 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.

Registrare un profilo del rendimento

Quando è tutto pronto per registrare, 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 garbage collection 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:

• Disabilita esempi JavaScript: disattiva la registrazione degli stack di chiamate JavaScript visualizzati nella traccia Principale che vengono chiamate durante la registrazione. Riduce l'overhead delle prestazioni.
• Attiva la strumentazione di colorazione avanzata (lenta): 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 CPU: simula velocità della CPU più basse.
• Limitazione della rete: simula velocità di rete inferiori.
• 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 viene presentato un raggruppamento di argomenti della guida, oltre ad altra documentazione utile:

Per scoprire come navigare nel report:

• Esplorare la registrazione
• Attività di ricerca
• Monitorare gli iniziatori degli eventi

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 fiamme
• Creare breadcrumb e passare da un livello di zoom all'altro

Per informazioni sulle schede In basso, struttura ad albero delle 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 di 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 (f/s)
• 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: scopri i problemi relativi alle prestazioni del rendering
• Problemi: trova e risolvi i problemi
• Rendimento: visualizza le informazioni sui livelli