Scopri i problemi di prestazioni del rendering con questo riferimento delle opzioni relative alle prestazioni nella scheda Rendering.
Evidenzia le aree ridipinte con vernice lampeggiante
Se questa opzione è attiva, Chrome fa lampeggiare lo schermo di verde ogni volta che viene eseguita la nuova colorazione.
Per visualizzare le aree che stai ricolorando:
- Apri la scheda Rendering in questa demo e controlla l'opzione Paint flashing.
- Osserva la ricolorazione evidenziata in verde.
Se, in un'altra pagina, vedi che l'intero schermo lampeggia in verde o aree dello schermo che non pensavi debbano essere colorate, prova a indagare ulteriormente.
Evidenzia le regioni con variazioni del layout
Le variazioni del layout causano revisioni impreviste e possono essere non solo fastidiose, ma dannose.
Per visualizzare la posizione e la tempistica dei cambiamenti di layout in una pagina:
Apri la scheda Rendering e seleziona Regioni di variazione 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 dei livelli per visualizzare un overlay di bordi dei livelli e riquadri nella parte superiore della pagina.
Per attivare i bordi dei livelli:
- Apri la scheda Rendering e seleziona Bordi livello.
- Osserva i bordi degli strati in arancione e oliva e le mattonelle in ciano.
Per una spiegazione della codifica 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 del frame sono un overlay che compare nell'angolo in alto a destra dell'area visibile.
Per aprire le Statistiche di rendering del frame:
- Apri la scheda Rendering e abilita la casella di controllo Statistiche di rendering dei frame.
- Osserva le statistiche nell'angolo in alto a destra della pagina.
L'overlay Statistiche rendering frame mostra:
- Stima in tempo reale dei frame al secondo durante l'esecuzione della pagina.
- Raggruppa la sequenza temporale come un grafico con tre tipi di fotogrammi:
- Frame visualizzati correttamente (linee blu)
- Frame parzialmente presentati (linee gialle)
- Frame persi (linee rosse).
- Lo stato del raster GPU: attivato o disattivato. Per ulteriori informazioni, consulta Come ottenere la rasterizzazione 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:
- Apri la scheda Rendering e controlla Problemi di rendimento dello scorrimento.
- Osserva gli elementi potenzialmente problematici evidenziati.
Visualizza 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.
Le metriche Core Web Vitals sono il sottoinsieme di Web Vitals 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:
- LCP (Largest Contentful Paint): misura il rendimento del 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 valore 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.