Di cosa parliamo
Il nostro amato Google da tempo ha messo a disposizione diversi strumenti che mirano all’ottimizzazione della pagina web, tra i più famosi troviamo Search Console e il tanto chiacchierato (da quando la velocità è diventata un fattore di posizionamento) Pagespeeed Insight.
Per poter però parlare di ottimizzazioni e di performance non possiamo lasciare in disparte il DevTool messo a disposizione da Cupertino sul browser di casa, grazie infatti ad una serie di strumenti potremo tramite Chrome analizzare e intervenire su vari aspetti del nostro sito.
Ma cos’è Chrome DevTools?
Chrome DevTool, o console per sviluppatori, è un pacchetto di strumenti per il debug delle pagine web che puoi trovare gratuitamente nel browser. Per poterlo utilizzare è ovviamente necessario che sia installato Chrome sul tuo Mac o sul tuo Window. Una volta installato ti basterà premere Command+Option+I per avere accesso al pannello. Chrome DevTool è parte della mia quotidianità, lo utilizzo per modifiche test/realtime al codice di una pagina , per identificare problemi oppure per scoprire quali risorse ottimizzare. Permette inoltre di analizzare e migliorare i tanto discussi in questo periodo Core Web Vitals, ovvero una serie di segnali essenziali di una pagina web. Si tratta nello specifico di tre metriche che permettono di valutare velocità, reattività e stabilità di una pagina web:
- Largest Contentful Paint.
- First Input Delay.
- Cumulative Layout Shift.
A cosa serve Chrome DevTools
La console ci consente di fare delle operazioni / test senza intervenire sul vero codice del sito, possiamo quindi immaginarlo come una sorta di laboratorio dove possiamo modificare delle porzioni di codice, verificare se funzionano in real time e solo successivamente apportare realmente queste modifiche su FTP ad esempio.
Come usare con Chrome DevTools per ottimizzare un sito web
Entriamo finalmente nel vivo e capiamo come utilizzare la nostra amata console per poter migliorare le performance del nostro sito. Quali elementi ci è utile analizzare con Chrome DevTools per il nostro scopo?
Il primo passo sicuramente è lavorare su JavaScript, DOM e CSS, così da capire se errori negli elementi chiave del nostro sito. Passiamo poi a capire come ottimizzare il TBT (Total Blocking Time), ovvero il tempo che intercorre tra caricamento e interazione, più questo tempo è basso migliore sarà la nostra user experience sul sito.
Grazie al DevTools inoltre possiamo avere un accesso istantaneo a Lighthouse e avere un report con una serie di informazioni su vari parametri e ovviamente cosa correggere per avere uno score alto. Questi i punteggi che è possibile trovare:
- Performance.
- Accessibilità.
- SEO.
- Consigli per migliorare.
- Progressive Web App.
Altro strumento utile che troviamo nella nostra super console è il simulatore. Questo strumento ci consente infatti di visualizzare il sito da un dispositivo diverso dal nostro. Se ad esempio sto ottimizzando il mobile ed ho bisogno di controllare delle porzioni di codice potrò facilmente impostare la visuale da un modello Iphone ad esempio e visualizzare il tutto come se stessi navigando da smartphone.
Se vuoi approfondire l’argomento e le evoluzione dei Core Web Vitals puoi trovare dei video interessanti sul canale ufficiale Chrome Developers: https://www.youtube.com/user/ChromeDevelopers
