Le impostazioni perfette del pannello Network di Chrome per ottimizzare i Core Web Vitals
Configura il pannello network di chrome devtools per la massima efficienza
Le impostazioni perfette del pannello Network di Chrome per ottimizzare i Core Web Vitals
Il pannello Network di Chrome DevTools è uno strumento indispensabile per gli sviluppatori web che mirano a ottimizzare i Core Web Vitals. Sfortunatamente le impostazioni predefinite non sono le migliori per ottimizzare la velocità. Configurando le impostazioni corrette, puoi simulare accuratamente condizioni reali e ottenere migliori informazioni sulle prestazioni del tuo sito web. Questa guida ti accompagnerà attraverso la configurazione ideale del pannello network di Chrome DevTools per analizzare e migliorare i tuoi punteggi Core Web Vitals.
Table of Contents!
Configurazione del pannello Network
Per accedere al pannello Network, apri Chrome DevTools (F12 o Ctrl+Shift+I) e clicca sulla scheda "Network".
Throttling
Una delle impostazioni più importanti per ottimizzare i Core Web Vitals è il throttling di rete. Questo ti permette di simulare varie condizioni di rete che i tuoi utenti potrebbero sperimentare.
Clicca sul menu a tendina "No throttling" nel pannello Network. Seleziona "Fast 4g", "Slow 4g" o "3G" per simulare condizioni di rete mobile. L'opzione migliore dipende dal tuo pubblico. Se il tuo pubblico utilizza tipicamente dispositivi mobili di fascia alta in condizioni di rete veloce abilita "Fast 4G". Se le condizioni di rete tipiche sono un po' peggiori seleziona "Slow 4G" e altrimenti gioca sul sicuro e seleziona "3G"
Disabilita Cache
Per assicurarti di testare il tuo sito come lo sperimenterebbe un visitatore per la prima volta: Seleziona la casella "Disable cache" nel pannello Network.
Abilita righe di richiesta grandi
Le righe di richiesta grandi forniscono una vista più completa di ogni richiesta. Le nuove informazioni più importanti che ti darà sono:
- La colonna size ora mostrerà la dimensione non compressa e compressa della richiesta.
- La colonna name fornirà informazioni sul percorso.
- La colonna priority ti mostrerà la priorità di fetch iniziale e finale.
Abilita Screenshots
Quando abiliti Screenshots, Chrome catturerà screenshot durante il caricamento della pagina. Ogni screenshot rappresenta un cambiamento visivo sulla pagina e può essere utilizzato per comprendere le diverse fasi del caricamento della pagina e identificare cumulative layout shifts.
- Con la scheda Network attiva, premi Ctrl+F5 (Cmd+R su Mac) per aggiornare la pagina.
- Chrome catturerà screenshot durante il processo di caricamento della pagina.
- Le miniature di questi screenshot appariranno sotto la riga di caselle di controllo nel pannello Network.
La panoramica degli screenshot ha alcune piccole funzionalità utili che potresti non conoscere ancora:
- Passa il mouse su uno screenshot per vedere quando è stato catturato. Questo sarà indicato da una linea verticale gialla sul grafico Overview.
- Clicca su una miniatura di screenshot per filtrare le richieste che si sono verificate dopo che quello screenshot è stato catturato.
- Fai doppio clic su una miniatura per ingrandire e visualizzare lo screenshot in maggiore dettaglio.
Abilita le migliori colonne di rete
Per trovare problemi con i Core Web Vitals i seguenti pannelli ti daranno informazioni utili. Semplicemente fai clic destro su qualsiasi nome di colonna e seleziona le colonne preferite
Quindi abilita le seguenti colonne che hanno importanza per i Core Web Vitals:
| Nome Colonna | Descrizione | Importanza per i Core Web Vitals |
|---|---|---|
| Name | Nome della richiesta | Identifica le risorse |
| Status | Codici di stato HTTP | Monitora per codici non-200 (301 e 302 per trovare redirect e 404 / 410 per risorse che non esistono) |
| Protocol | Protocollo di rete utilizzato | Dai priorità a HTTP/3 per le prestazioni |
| Domain | Dominio della risorsa | Identifica risorse di terze parti |
| Type | Tipo di risorsa | Categorizza le richieste |
| Initiator | Trigger della richiesta | Comprendi le origini delle richieste |
| Size | Dimensione di trasferimento e effettiva | Identifica richieste di grandi dimensioni |
| Priority | Priorità di caricamento delle risorse | Assicura la corretta prioritizzazione |
| Waterfall | Timeline visuale delle richieste | Analizza la sequenza di caricamento |
Abilita questi Custom Response Headers:
Abilita questi Custom Response Headers:
| Nome Colonna | Descrizione | Importanza per i Core Web Vitals |
|---|---|---|
| Cache-Control | Comportamento di caching delle risorse | Identifica le risorse |
| Link | Header di risposta Link | Controlla header di preloading o prefetch |
| Content-Encoding | La codifica utilizzata | Verifica la compressione delle risorse |
Il risultato finale:
Ora è il momento di ricaricare la pagina e vedere la nuova e migliorata risposta di rete nella scheda network di Chrome. Apparirà come qualcosa di simile a questo e mostra tutte le informazioni di cui hai bisogno per iniziare a debuggare i Core Web Vitals!
Secure your Q3 Metrics.
Do not let technical debt derail your Core Web Vitals. I provide the strategy, the code, and the verification to pass Google's assessment.
- Strategic Planning
- Code Implementation
- Verification & Testing
