Potenzia le tue capacità di rilevamento delle prestazioni con Lighthouse e Chrome DevTools.
In qualità di sviluppatore, spesso non hai il controllo sugli script di terze parti caricati dal tuo sito. Prima di poter ottimizzare i contenuti di terze parti, devi svolgere un'indagine 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ù robuste che possono essere utilizzate al meglio in combinazione.
Se hai a disposizione solo 5 minuti
Il controllo delle prestazioni di Lighthouse ti consente di scoprire opportunità per velocizzare il caricamento delle pagine. È probabile che gli script di terze parti lenti vengano visualizzati nella sezione Diagnostica dei controlli Riduci il tempo di esecuzione di JavaScript ed Evita enormi payload di rete.
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 Rendimento. Puoi deselezionare le altre caselle di controllo nella sezione Controlli.
- Fai clic su Simulato Fast 3G, 4x CPU Slowdown.
- Seleziona la casella di controllo Cancella dati archiviati.
- Fai clic su Esegui controlli.
Utilizzo di terze parti
Il controllo Utilizzo 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 verrà presto aggiunto a DevTools in Chrome 77.
Ridurre il tempo di esecuzione di JavaScript
Il controllo di Lighthouse Riduci il tempo di esecuzione di JavaScript evidenzia gli script la cui analisi, compilazione o valutazione richiede molto tempo. Seleziona la casella di controllo Mostra risorse di terze parti per trovare script di terze parti che consumano molta CPU.
Evita payload di rete enormi
Il controllo di Lighthouse Evita payload di rete enormi identifica le richieste di rete, incluse quelle di terze parti, che potrebbero rallentare il tempo di caricamento delle pagine. Il controllo ha esito negativo 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 consente di verificare il comportamento della pagina quando non è disponibile uno script, un foglio di stile o un'altra risorsa specifici. Dopo aver identificato gli script di terze parti che sospetti possano influire sulle prestazioni, misura le variazioni 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 qualsiasi richiesta nel riquadro Rete. 1. Seleziona Blocca URL richiesta.
Nel riquadro a scomparsa di DevTools viene visualizzata una 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 necessario per il caricamento della pagina utilizzando il riquadro Rete. Per emulare condizioni reali, attiva la limitazione della rete e la limitazione della CPU. (Sulle connessioni più veloci e sull'hardware per computer, l'impatto di script costosi potrebbe non essere rappresentativo di un telefono cellulare).
- Blocca gli URL o i domini responsabili degli script di terze parti che ritieni rappresentino un problema.
- Ricarica la pagina e misura nuovamente il tempo necessario per il caricamento senza gli script di terze parti bloccati.
Dovresti notare un miglioramento della velocità, ma occasionalmente il blocco degli script di terze parti potrebbe non avere l'effetto previsto. In questo caso, riduci l'elenco degli URL bloccati finché non isoli quello che causa la lentezza.
Tieni presente che eseguire tre o più esecuzioni di misurazioni ed esaminare i valori mediani produrrà probabilmente risultati più stabili. Poiché a volte i contenuti di terze parti possono utilizzare risorse diverse per ogni caricamento pagina, questo approccio può fornire una stima più realistica. DevTools ora supporta più registrazioni nel riquadro Prestazioni, semplificando le operazioni.