Il pannello Rendimento in Chrome DevTools aiuta gli sviluppatori a misurare e ottimizzare le prestazioni di runtime in una forma o nell'altra da quasi 15 anni. È iniziato con un riquadro denominato "Cronologia" ed è poi evoluto nel riquadro Rendimento che conosci oggi.
Nel corso del tempo, Chrome ha lanciato altri prodotti e funzionalità efficaci per le prestazioni. In particolare, Lighthouse è stato lanciato nel 2016 per aiutare a individuare più facilmente le opportunità di ottimizzazione. Il riquadro sperimentale Informazioni sulle prestazioni è stato rilasciato nel 2022 per testare nuovi modi per visualizzare gli approfondimenti sul rendimento.
Il riquadro Rendimento è ricco di dati e funzionalità per aiutare gli sviluppatori a esaminare in dettaglio i problemi di caricamento della pagina e di prestazioni di runtime. Tuttavia, diciamoci la verità: può essere difficile da utilizzare e difficile identificare le maggiori opportunità per migliorare il rendimento della pagina. Inoltre, la potenza di altri strumenti che aiutano a filtrare i dati non pertinenti e a isolare rapidamente le opportunità, come Lighthouse, non è collegata al pannello Rendimento.
Nel nostro intento di semplificare l'identificazione e la riproduzione dei problemi di prestazioni da parte degli sviluppatori, porteremo le funzionalità e le informazioni di Lighthouse e del riquadro Informazioni sulle prestazioni nel riquadro Prestazioni esistente. Ci stiamo inoltre concentrando sull'esperienza utente e sull'usabilità per migliorare l'efficacia del riquadro Rendimento come strumento di ottimizzazione del rendimento web.
Qual è il risultato? Un unico riquadro, più semplice e potente che mai, per tutti i dati e gli approfondimenti sul rendimento.
Intervenire sul rendimento web è più facile
Il tuo feedback conferma che l'elevata densità di informazioni complica i problemi di usabilità. Stiamo sviluppando attivamente correzioni e funzionalità per aiutarti. I percorsi di ottimizzazione chiave, come il miglioramento dei Core Web Vitals, ricevono un'attenzione di primo livello. Prevediamo di introdurre funzionalità come le annotazioni, che ti consentiranno di contrassegnare i risultati e condividere le tue conoscenze con i colleghi. La visualizzazione delle correlazioni nei dati contribuirà a migliorare la capacità di comprendere un sistema complesso, con più modi per rivelare la connessione dei dati, ad esempio le richieste di rete all'attività del thread principale.
Implementeremo le nuove funzionalità man mano che le sviluppiamo e ogni pochi mesi condivideremo un aggiornamento delle nuove funzionalità offerte dal panel. Sii paziente. A breve inizierai a vedere le nuove funzionalità.
La potenza di Lighthouse nel riquadro Prestazioni
Abbiamo visto come gli sviluppatori utilizzino sia i riquadri Lighthouse sia quelli sul rendimento e che il passaggio da un contesto all'altro sia una sfida. Inoltre, per intervenire in base ai risultati di Lighthouse potrebbe essere necessario accedere al riquadro Rendimento per ottenere un contesto aggiuntivo. Ciò causa attriti, in quanto la panoramica prescrittiva del rendimento di una pagina è scollegata dai dati sul rendimento dettagliati.
Integreremo in modo approfondito l'analisi del rendimento di Lighthouse tramite il riquadro Rendimento. Con questa integrazione, Lighthouse mette in evidenza le migliori opportunità per migliorare il rendimento delle pagine all'interno del riquadro Rendimento, insieme a tutti i dettagli necessari per intervenire.
Dopo aver spostato tutte le funzionalità relative alle prestazioni nel riquadro Prestazioni, il riquadro Lighthouse indipendente in DevTools diventerà superfluo e verrà ritirato. Il ritiro di questo riquadro non avverrà prima della seconda metà del 2025. È importante affermare con enfasi che Lighthouse non verrà ritirato.
Lighthouse è destinato a durare
Il modulo npm Lighthouse e il report Lighthouse in PageSpeed Insights (inclusa l'API PSI) non verranno ritirati. Ci impegniamo a garantire la disponibilità e la qualità di Lighthouse come strumento open source che può essere utilizzato nell'ambiente preferito di uno sviluppatore per valutare le prestazioni delle pagine.
Questa integrazione ci consente di migliorare sia il riquadro Rendimento sia le funzionalità di Lighthouse per gli sviluppatori che cercano di comprendere il caricamento, la reattività e la stabilità dei contenuti.
Il riquadro sperimentale Informazioni sulle prestazioni verrà ritirato
Il riquadro Approfondimenti sul rendimento è stato implementato come esperimento per capire come risolvere meglio tre problemi principali: ridurre la densità di informazioni del riquadro Rendimento, supportare l'analisi basata sui casi d'uso e ridurre la curva di apprendimento associata all'utilizzo del riquadro Rendimento.
Abbiamo imparato molto dall'esperimento grazie al feedback degli sviluppatori. Abbiamo verificato che l'analisi basata sui casi d'uso, ad esempio "Voglio ottimizzare LCP" o "Voglio ottimizzare le pagine per renderle più adattabili", è estremamente utile e che funzionalità come il monitoraggio dei cambiamenti di layout semplificano notevolmente la diagnosi e il miglioramento delle metriche.
Gli sviluppatori hanno inoltre riscontrato che il riquadro Approfondimenti sul rendimento è più accessibile rispetto al riquadro Rendimento, confermando che la ridotta densità di informazioni è accattivante. Tuttavia, in molti casi questa densità ridotta ha comportato un costo, in quanto gli sviluppatori dovevano accedere al riquadro Rendimento per ottenere i dati dettagliati necessari per intervenire.
Le nostre scoperte e molte funzionalità del riquadro sperimentale Informazioni sulle prestazioni verranno integrate nel riquadro Prestazioni. Funzionalità come l'analisi basata sui casi d'uso e i miglioramenti alla densità delle informazioni, insieme all'integrazione di Lighthouse, ci aiuteranno a rendere gli approfondimenti sul rendimento delle pagine più strategici che mai.
L'esperimento Informazioni sulle prestazioni verrà rimosso nel corso del 2024.
Dove inviare feedback
Quando implementiamo nuove funzionalità, accogliamo con favore i feedback. Se hai idee su come migliorare le funzionalità aggiunte o se il flusso esistente nel riquadro viene interrotto in modo ingiustificato, contattaci. Vogliamo sapere cosa funziona, cosa no e cosa ritieni possa essere migliorato. Grazie.