Potenzia le tue capacità di rilevamento del rendimento con Lighthouse e Chrome DevTools.
In qualità di sviluppatore, spesso non hai il controllo su quali script di terze parti vengono caricati sul tuo sito. Prima di poter ottimizzare i contenuti di terze parti, devi fare un po' di lavoro investigativo per scoprire cosa rallenta il tuo sito. 🕵️
In questo post scoprirai come utilizzare Lighthouse e Chrome DevTools per identificare le risorse di terze parti lente. Il post illustra tecniche sempre più efficaci che è meglio utilizzare in combinazione.
Se hai solo 5 minuti
Il controllo delle prestazioni di Lighthouse ti aiuta a scoprire opportunità per velocizzare i caricamenti delle pagine. È probabile che gli script di terze parti lenti vengano visualizzati nella sezione Diagnostica, in Riduci il tempo di esecuzione di JavaScript e Evita payload di rete enormi.
Per eseguire un controllo:
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
- Fai clic sulla scheda Lighthouse.
- Fai clic su Dispositivo mobile.
- Seleziona la casella di controllo Prestazioni. Puoi deselezionare le altre caselle di controllo nella sezione Controlli.
- Fai clic su 3G rapido simulato, rallentamento CPU 4x.
- Seleziona la casella di controllo Libera spazio di archiviazione.
- Fai clic su Esegui controlli.
Utilizzo di terze parti
Il controllo Uso di terze parti di Lighthouse mostra un elenco dei fornitori di terze parti utilizzati da una pagina. Questa panoramica può aiutarti a comprendere meglio il quadro generale e a identificare il codice di terze parti ridondante. Il controllo è disponibile nell'estensione Lighthouse e a breve verrà aggiunto a DevTools in Chrome 77.
Riduci il tempo di esecuzione di JavaScript
Il controllo Riduci il tempo di esecuzione di JavaScript di Lighthouse mette in evidenza gli script che richiedono molto tempo per l'analisi, la compilazione o la valutazione. Seleziona la casella di controllo Mostra risorse di terze parti per rilevare gli script di terze parti che richiedono un'elevata elaborazione della CPU.
Evita payload di rete enormi
Il controllo Evita payload di rete enormi di Lighthouse identifica le richieste di rete, incluse quelle di terze parti, che potrebbero rallentare il tempo di caricamento della pagina. L'audit non va a buon fine quando il payload di rete supera i 4000 KB.
Bloccare le richieste di rete in Chrome DevTools
Il blocco delle richieste di rete di Chrome DevTools ti consente di vedere il comportamento della pagina quando un determinato script, foglio di stile o altra risorsa non è disponibile. Dopo aver identificato gli script di terze parti che ritieni possano influire sul rendimento, misura la variazione del tempo di caricamento bloccando le richieste a questi script.
Per attivare il blocco delle richieste: 1. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools. 1. Fai clic sulla scheda Rete. 1. Fai clic con il tasto destro del mouse su una richiesta qualsiasi nel riquadro Rete. 1. Seleziona Blocca URL richiesta.
Nel riquadro di DevTools viene visualizzata la scheda Blocco delle richieste. Qui puoi gestire le richieste che sono state bloccate.
Per misurare l'impatto degli script di terze parti:
- Misura il tempo di caricamento della pagina utilizzando il riquadro Rete. Per emulare le condizioni reali, attiva la limitazione della larghezza di banda della rete e la limitazione della CPU. Su connessioni più veloci e hardware desktop, l'impatto di script costosi potrebbe non essere così rappresentativo come su uno smartphone.
- Blocca gli URL o i domini responsabili degli script di terze parti che ritieni siano un problema.
- Ricarica la pagina e misura di nuovo il tempo necessario per il caricamento senza gli script di terze parti bloccati.
Dovresti notare un miglioramento della velocità, ma a volte il blocco degli script di terze parti potrebbe non avere l'effetto previsto. In questo caso, riduci l'elenco di URL bloccati finché non isoli quello che causa la lentezza.
Tieni presente che eseguire tre o più esecuzioni della misurazione e esaminare i valori mediani produrrà probabilmente risultati più stabili. Poiché i contenuti di terze parti possono occasionalmente richiamare risorse diverse per ogni caricamento di pagina, questo approccio può darti una stima più realistica. DevTools ora supporta più registrazioni nel riquadro Rendimento, semplificando un po' la procedura.