Scopri i problemi di prestazioni del rendering con questo riferimento delle opzioni relative alle prestazioni nella scheda Rendering.
Evidenziare le aree ridipinte con vernice che lampeggia
Quando questa opzione è attiva, Chrome fa lampeggiare lo schermo in verde ogni volta che viene ridipinta.
Per visualizzare le aree in fase di ricolorazione:
- Apri la scheda Rendering di questa demo e seleziona Paint lampeggiante.
- Osserva il dipinto evidenziato in verde.
Se, in un'altra pagina, vedi che l'intero schermo lampeggia in verde o aree dello schermo che non pensi debbano essere dipinte, valuta la possibilità di effettuare ulteriori accertamenti.
Evidenzia le regioni con variazioni del layout
Le variazioni di layout causano modifiche impreviste del layout e possono essere non solo fastidiose, ma dannose.
Per visualizzare la posizione e i tempi delle variazioni di layout su una pagina:
Apri la scheda Rendering e seleziona Regioni con variazioni del layout.
Aggiorna la pagina. Le aree di variazione del layout sono brevemente evidenziate in viola.
Visualizzare livelli e riquadri con bordi dei livelli
Utilizza Bordi livello per visualizzare un overlay di bordi del livello e riquadri sulla parte superiore della pagina.
Per attivare i bordi dei livelli:
- Apri la scheda Rendering e seleziona Bordi livello.
- Osserva i bordi dei livelli in arancione e verde oliva e le piastrelle in ciano.
Leggi i commenti alla sezione debug_colors.cc per una spiegazione dei codici colore.
Visualizza i frame al secondo in tempo reale con le statistiche di rendering dei frame
Le statistiche di rendering del frame sono un overlay che viene visualizzato nell'angolo in alto a destra dell'area visibile.
Per aprire le Statistiche di rendering del frame:
- Apri la scheda Rendering e attiva la casella di controllo Statistiche rendering frame.
- Osserva le statistiche nell'angolo in alto a destra della pagina.
L'overlay Statistiche di rendering del frame mostra:
- Stima in tempo reale dei frame al secondo durante l'esecuzione della pagina.
- Traccia la sequenza temporale come grafico con tre tipi di fotogrammi:
- Frame visualizzati correttamente (linee blu)
- Fotogrammi parzialmente presentati (linee gialle)
- Fotogrammi eliminati (linee rosse).
- Lo stato del raster GPU: attivato o disattivato. Per ulteriori informazioni, vedi Come ottenere la rasterizzazione GPU.
- Utilizzo memoria GPU: numero di MB utilizzati e massimo di MB di memoria.
Identificare i problemi di prestazioni dello scorrimento
Utilizza Problemi di rendimento dello scorrimento per identificare gli elementi della pagina con listener di eventi correlati allo scorrimento che potrebbero danneggiare le prestazioni della pagina.
Per visualizzare gli elementi potenzialmente problematici:
- Apri la scheda Rendering e seleziona Scorrimento dei problemi di prestazioni.
- Osserva gli elementi potenzialmente problematici evidenziati.
Visualizza i Segnali web essenziali
Web Vitals è un'iniziativa di Google per fornire una guida unificata per gli indicatori di qualità essenziali per offrire un'ottima esperienza utente sul web.
I Segnali web essenziali sono un sottoinsieme di Web Vitals che si applicano a tutte le pagine web. Ciascuno dei Segnali web essenziali rappresenta un aspetto distinto dell'esperienza utente, è misurabile sul campo e riflette l'esperienza reale di un risultato critico incentrato sull'utente. I Segnali web essenziali sono:
- Largest Contentful Paint (LCP): misura le prestazioni di caricamento. Per offrire una buona esperienza utente, il valore LCP dovrebbe avvenire entro 2,5 secondi dal primo 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.
- Cumulative Layout Shift (CLS): 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 di Core Web Vitals della tua pagina.