Pubblicato il 18 Feb 2021 - Aggiornato il 16 Apr 2022

Chrome DevTools, cosa devi sapere su questo tool

Web Performance

Conosciamo tutti i principali strumenti di Google per sviluppatori che puntano verso l’ottimizzazione di una pagina web. Pagespeed Insight, ad esempio, è uno dei più noti insieme alla Search Console con i vari test e dati sui Core Web Vitals. Ma quanti usano e sfruttano anche Chrome DevTools?

In realtà questo è un problema tipico di Mountain View: riesce a dare grandi risorse ma non sempre porta alla ribalta i vari strumenti con la stessa enfasi. Forse perché alcuni, come la già citata Search Console e l’imprescindibile Google Analytics, sono indispensabili e decisivi per tutti.

Altri rappresentano dei punti saldi solo per gli specialisti. Ma è pur vero che oggi non possiamo lasciare nulla al caso se vogliamo ottimizzare un sito web in termini di web performance. Ecco perché è importante scoprire a cosa serve il Chrome DevTool, quando bisogna usarlo e in che modo.

Cos’è Chrome DevTools: definizione

Chrome DevTool è un insieme di strumenti per il debug delle pagine web integrato nel browser Google. Si usano per modificare in un attimo le risorse che vuoi ottimizzare per individuare i problemi e scoprire i punti da migliorare. Chrome DevTools fa parte delle risorse utili per analizzare e migliore i Core Web Vitals, vale a dire una serie di indicatori decisivi per garantire l’user experience di una pagina web.

In realtà tutti gli strumenti Google per gli sviluppatori supportano la misurazione dei Core Web Vitals, ma hanno ruoli e funzioni differenti. Infatti anche Chrome DevTool può diagnosticare e risolvere più facilmente i problemi relativi all’esperienza utente se lo utilizzi insieme a Lighthouse, PageSpeed Insights, Search Console e tutti gli strumenti indicati nella pagina web.dev/vitals-tools.

A cosa serve il Chrome DevTool

Serve a influenzare i parametri di una pagina web in una sorta di laboratorio, dopo aver individuato eventuali problemi. Che potrebbero essere legati a un debug del CSS, un miglioramento lato JavaScript e analisi delle prestazioni per velocizzare il caricamento delle pagine web.

Con questa suite operi su una pagina ma solo per capire se quell’intervento può aiutare a ottenere ciò che serve. In modo da scoprire subito cosa modificare e rendere operativa la soluzione che hai scelto. Senza Chrome DevTools, in sintesi, sarebbe tutto più lungo e difficile da sviluppare.

Da leggere: quali verifiche prima di pubblicare un ecommerce

Come aprire questo strumento

Per iniziare a usare Chrome DevTool basta andare sulla pagina che vuoi analizzare e premere il tasto destro del mouse. Poi clicchi sulla voce Ispeziona elemento: a destra si aprirà una console per analizzare DOM e CSS. Preferisci lavorare con i pulsanti? Puoi usare alcune combinazioni.

Command + Option + C (Mac) o Control + Shift + C (Windows, Linux) aprono la finestra principale. Quando vuoi visualizzare i messaggi registrati o eseguire JavaScript premi Comand + Opzione + J (Mac) o Ctrl + Maiuscola + J (Windows, Linux). Così puoi passare al pannello della console.

Dashboard di gestione finanziaria per Freelance

Ottimizza il tuo tempo e cresci più velocemente.

Scopri di più

Come usare Chrome DevTools

Attivare il tuo lavoro di ottimizzazione attraverso Google Crome DevTools è facile, gratuito e immediato. Basta usare il browser di Mountain View per avere quello che necessita. Ma quali sono i punti da monitorare? A cosa serve questo strumento pensato per gli sviluppatori e i webmaster più esperti?

Lavorare su JavaScript, DOM e CSS

Con Chrome DevTools puoi ottimizzare alcuni punti essenziali del sito web. Come JavaScript, i fogli di stile (CSS) e DOM. Vale a dire i Document Object Model che sono, secondo Wikipedia:

lo standard ufficiale del W3C per la rappresentazione di documenti strutturati in maniera da essere neutrali sia per la lingua che per la piattaforma.

Queste funzioni permettono di ispezionare e analizzare elementi chiave di un sito web. Questa fase può essere fondamentale per correggere errori che sarebbe difficile migliorare senza il DevTool.

Ottimizzare il Total Blocking Time

Il TBT – o total blocking time – è una metrica di laboratorio che definisce il tempo di interattività di una pagina web prima che lo diventi. Un TBT basso equivale a un buon livello di user experience della risorsa dato che misura la quantità di tempo che intercorre tra caricamento e interazione.

Ma come si misura il TBT in modo chiaro e semplice? Su Chrome DevTools il total blocking time – quindi la distanza tra First Contentful Paint (FCP) e Time to Interactive (TTI) – viene mostrato nella footer del pannello Performance quando misuri le prestazioni della pagina su internet.

Studia a fondo il performance panel

Di sicuro uno dei punti fondamentali del Chrome DevTool è la possibilità di analizzare le metriche che consentono di velocizzare e migliorare le performance di un portale. La funzione principale è quella di Lighthouse che permette di ottenere una miriade di informazioni. Ad esempio:

• Performance.
• Accessibilità.
• SEO.
• Consigli per migliorare.
• Progressive Web App.

Tutto questo per desktop e mobile. Basta cliccare su generate report per avere tutti i risultati necessari per capire cosa puoi migliorare. E ottimizzando i vari passaggi puoi ottenere frutti concreti.

Simulare un device particolare

Cerchi un metodo semplice ed efficace per scoprire come si vede il tuo sito web su un dispositivo diverso dal tuo, magari su smartphone o tablet? Basta aprire il pannello di Chrome DevTools e cliccare sull’icona dei Device Toolbar che si trova in alto a sinistra. Ora selezione il tipo di dispositivo.

Ottimizzare il cumulative layout shift

Il mondo del Core Web Vitals sarà sempre più importante per l’ottimizzazione delle prestazioni del sito web? Ecco perché è utile eseguire il debug degli eventi legati al cumulative layout shift (CLS).

Il passaggio si trova nella sezione Experience. Sappiamo bene che questo inconveniente della pagina web, relativo allo sbalzo di un elemento dopo il caricamento della pagina, è piuttosto difficile da valutare e registrare. In sintesi, non è come il caricamento della pagina web dove puoi osservare i decimi. Eppure il pannello delle prestazioni di Chrome DevTools ha una sezione che può aiutarti.

Sto parlando dell’area Experience: per trovare i problemi di instabilità visiva sulla tua pagina, che contribuiscono allo spostamento del layout, devi selezionare un cambio di layout per visualizzare i dettagli nella scheda Riepilogo. Vuoi ottenere il punto in cui si è verificato lo spostamento?

La soluzione è semplice, passa con il mouse sui campi Moved from e Moved to. Così puoi intervenire, correggere in fase lab e se tutto funziona applichi le modifiche alla pagina web o al template.

Per approfondire l’argomento e il tool

Se vuoi affrontare le evoluzioni dell’universo Core Web Vitals, come si svilupperà questo tema e il peso che avrà nel lavoro di ottimizzazione della pagina web e dei tuoi progetti online puoi seguire le lezioni dell’evento online developer.chrome.com/devsummit. Seguilo, è molto interessante!

Per approfondire: come scegliere i plugin per velocizzare WordPress

Vuoi ottimizzare il tuo sito web?

Di sicuro Chrome DevTools è fondamentale per raggiungere l’obiettivo ma c’è da aggiungere un punto: bisogna conoscere le metriche e gli sviluppi tecnici, implementare le modifiche è un passaggio fondamentale e per ottenere il miglior risultato possibile bisogna affrontare questa sfida con il giusto supporto e il confronto con un professionista delle web performance. Vuoi approfondire?

Migliorerò il tuo sito web

Tag: Strumenti per il web

Mirko Ciesco

Web Performer

Mi piace raccogliere dati dai siti per comprendere come portarli ad un livello superiore! 🚀
Sono esperto in web performance, ottimizzo la SEO tecnica e miglioro l’usabilità dei siti internet attraverso la web analytics. Creo strategie vincenti partendo dai problemi delle Startup e delle aziende. Infine tengo corsi personalizzati online e in tutta Italia con la mission di rendere il web un posto migliore.