Scopri i problemi relativi alle prestazioni del rendering

Sofia Emelianova
Sofia Emelianova

Scopri i problemi di prestazioni di rendering con questo riferimento alle opzioni correlate al rendimento nella scheda Rendering.

Evidenziare le aree ridipinte con un lampeggiamento del colore

Se questa opzione è attiva, Chrome fa lampeggiare lo schermo di verde ogni volta che viene eseguita la nuova colorazione.

Per visualizzare le aree in cui viene applicata una nuova vernice:

  1. Apri la scheda Rendering in questa demo e seleziona Sfarfallio della vernice.
  2. Osserva la nuova colorazione evidenziata in verde.
Aree da colorare lampeggianti

Se in un'altra pagina vedi l'intero schermo lampeggiare di verde o aree dello schermo che non pensavi dovessero essere colorate, valuta la possibilità di effettuare ulteriori accertamenti.

Evidenzia le regioni con variazioni di layout

I spostamenti del layout causano ridisegni imprevisti e possono essere non solo fastidiosi, ma anche dannosi.

Uno screencast che mostra in che modo l'instabilità del layout può incidere negativamente sugli utenti.

Per visualizzare la posizione e la tempistica dei cambiamenti di layout in una pagina:

  1. Apri la scheda Rendering e seleziona Regioni con variazioni di layout.

  2. Aggiorna la pagina. Le aree con variazioni di layout vengono evidenziate brevemente in viola.

Variazione del layout

Visualizzare i livelli e i riquadri con i bordi dei livelli

Utilizza Bordi dei livelli per visualizzare un overlay di bordi dei livelli e riquadri nella parte superiore della pagina.

Per attivare i bordi dei livelli:

  1. Apri la scheda Rendering e seleziona Bordi livello.
  2. Osserva i bordi dei livelli in arancione e verde oliva e le tessere in turchese.

Bordi e riquadri dei livelli

Per una spiegazione delle codifiche a colori, consulta i commenti in debug_colors.cc.

Visualizzare i frame al secondo in tempo reale con le statistiche di rendering dei frame

Le statistiche di rendering dei frame sono un overlay visualizzato nell'angolo in alto a destra del viewport.

Per aprire le Statistiche di rendering del frame:

  1. Apri la scheda Rendering e abilita la casella di controllo Statistiche di rendering dei frame.
  2. Osserva le statistiche nell'angolo in alto a destra della pagina.

Statistiche di rendering del frame

L'overlay Statistiche di rendering del frame mostra:

  • Stima in tempo reale dei frame al secondo durante l'esecuzione della pagina.
  • Inserisci la sequenza temporale come trama con tre tipi di frame:
    • Frame visualizzati correttamente (linee blu)
    • Frame parzialmente presentati (linee gialle)
    • Frame persi (linee rosse).
  • Lo stato della rasterizzazione della GPU: attivo o disattivato. Per ulteriori informazioni, consulta Come ottenere la rasterizzazione della GPU.
  • Utilizzo della memoria GPU: il numero di MB di memoria utilizzati e massimi.

Identificare i problemi di prestazioni dello scorrimento

Utilizza Problemi di prestazioni dello scorrimento per identificare gli elementi della pagina che hanno ascoltatori di eventi relativi allo scorrimento che potrebbero influire negativamente sulle prestazioni della pagina.

Per visualizzare gli elementi potenzialmente problematici:

  1. Apri la scheda Rendering e seleziona Problemi di prestazioni dello scorrimento.
  2. Osserva gli elementi potenzialmente problematici evidenziati.

La segnalazione Problemi di prestazioni dello scorrimento indica che sono presenti più ascoltatori di eventi che potrebbero influire negativamente sulle prestazioni dello scorrimento

Visualizzare Core Web Vitals

Web Vitals è un'iniziativa di Google che intende fornire linee guida unificate per gli indicatori di qualità che sono essenziali per offrire un'esperienza utente ottimale sul web.

I Segnali web essenziali sono il sottoinsieme di Segnali web che si applica a tutte le pagine web. Ciascuno dei Core Web Vitals rappresenta un aspetto distinto dell'esperienza utente, è misurabile sul campo e riflette l'esperienza reale di un risultato incentrato sull'utente fondamentale. I Core Web Vitals sono:

  • Largest Contentful Paint (LCP): misura le prestazioni di caricamento. Per offrire una buona esperienza utente, l'LCP deve verificarsi entro 2,5 secondi dall'inizio del caricamento della pagina.
  • Interaction to Next Paint (INP): misura l'interattività. Per offrire una buona esperienza utente, le pagine devono avere un INP pari o inferiore a 200 millisecondi.
  • CLS (Cumulative Layout Shift): misura la stabilità visiva. Per offrire una buona esperienza utente, le pagine devono mantenere un CLS pari o inferiore a 0,1.

Utilizza l'estensione di Chrome Web Vitals per visualizzare i valori Core Web Vitals della tua pagina.