Un workbench di debug per una pagina che sembra lenta

Un laptop che mostra il codice sorgente e i pannelli di debug accanto a un impianto

Acerca de esta selección

Documentazione del browser e riferimenti alle prestazioni per trasformare "questo sembra lento" in un'osservazione riproducibile e in un passaggio successivo mirato.

Una pagina lenta può essere in attesa di una risposta, disegnare troppo, cambiare il suo layout o ritardare il feedback di input. Questi sono problemi diversi. Questa raccolta abbina gli strumenti di ispezione del browser al vocabolario utilizzato per descrivere caricamento, reattività e stabilità visiva. L'obiettivo è raccogliere prove prima di modificare il codice, non inseguire un punteggio senza comprendere la pagina.

Prova prima questo

Annotare l'URL, il dispositivo e l'azione che genera il problema. Riprodurlo una volta con i pannelli della rete e delle prestazioni aperti. Identifica il ritardo che puoi effettivamente osservare, quindi confrontalo con la metrica o la diagnostica pertinente. Cambia una cosa e ripeti in condizioni simili. Salva la traccia e una breve spiegazione di cosa è cambiato.

Tienilo a mente

I risultati di laboratorio e i dati sul campo degli utenti reali rispondono a domande diverse. I risultati variano in base allo stato dell'hardware, della rete e della cache e i dati dei campi potrebbero non essere disponibili per una pagina. Mantieni gli URL privati e i dettagli delle richieste acquisite fuori dai rapporti pubblici.

4 enlaces/En el orden elegido por el curador

Enlace 1–

Strumenti di sviluppo di Chrome

Utilizza la documentazione ufficiale per l'ispezione della rete, il debug e la registrazione delle prestazioni. Abbina il pannello al sintomo anziché aprire tutti gli strumenti contemporaneamente.

developer.chrome.com

Enlace 2inglés

Documenti utente di Firefox DevTools

Confronta gli strumenti di ispezione e debug di Firefox con il comportamento che vedi in un altro browser. Le differenze tra i browser possono essere una prova utile.

firefox-source-docs.mozilla.org

Enlace 3–

web.dev: Web Vital

Impara la distinzione tra metriche di caricamento, reattività e stabilità visiva. Utilizza le definizioni per descrivere il problema che hai osservato.

web.dev

Enlace 4inglés estadounidense

PageSpeed Insights

Esamina i dati sul campo disponibili e un'analisi di laboratorio per un URL pubblico. Leggi la diagnostica e la copertura dei dati invece di considerare il punteggio principale come il risultato complessivo.