Lighthouse è uno strumento che ti aiuta a misurare e trovare modi per migliorare il rendimento di una pagina. Ecco il flusso di lavoro generale per l'utilizzo di Lighthouse:
- Puoi indicare a Lighthouse la pagina da controllare.
- Lighthouse carica la pagina e registra il tempo necessario per raggiungere vari obiettivi di rendimento. Questi traguardi sono chiamati metrics.
- Lighthouse ti fornisce un report sul rendimento della pagina. Il report fornisce un punteggio per ogni metrica e un elenco di opportunità che, se le implementi, dovrebbero rendere più veloce il caricamento della pagina.
La tua missione è migliorare i punteggi delle metriche nel tempo o almeno assicurarti che non peggiorino. Tuttavia, non è possibile lavorare direttamente sulle metriche. ma segui le opportunità offerte da Lighthouse. Lavorare su queste opportunità tende a migliorare i punteggi delle metriche.
Esegui Lighthouse dalla pagina del tuo profilo
Esegui Lighthouse dalla pagina del tuo profilo web.dev:
Se fornisci un URL, Lighthouse eseguirà una serie di controlli generando un report sul rendimento della pagina.
Esamina il report dei controlli per identificare le aree in cui la pagina può essere migliorata.
Per ogni controllo, troverai indicazioni e azioni immediate che puoi intraprendere per migliorare i tuoi punteggi.
Esegui Lighthouse da Chrome DevTools
Chrome DevTools è un insieme di strumenti per sviluppatori web integrati direttamente nel browser Google Chrome. Non devi scaricare nulla per scaricare DevTools. Se hai Chrome, hai DevTools.
- In Chrome, vai alla pagina che vuoi controllare.
- Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
Fai clic sulla scheda Controlli. Se non vedi questa scheda, fai clic sul simbolo » e seleziona Controlli dall'elenco. Lighthouse è il motore su cui si basa il riquadro Controlli. Ecco perché vedi l'immagine di un faro.
- Assicurati che il pulsante di opzione Cellulare sia selezionato. Quando Lighthouse controlla la pagina, simulerà l'area visibile e la stringa dello user agent di un dispositivo mobile.
- Assicurati che la casella di controllo Rendimento sia attivata. Puoi attivare o disattivare le altre caselle di controllo nella sezione Controlli. Se le attivi, vedrai una serie di opportunità per migliorare questi altri aspetti della pagina.
- Assicurati che il pulsante di opzione Simulated Fast 3G, 4x CPU Slowdown (Rallentamento della CPU 4x simulato) sia selezionato. Lighthouse non limita effettivamente la rete o la CPU durante il caricamento della pagina. Viene invece analizzato il tempo di caricamento della pagina in condizioni normali e poi viene calcolato quanto tempo sarebbe stato necessario su una rete 3G veloce con una CPU quattro volte meno potente di quella della tua macchina.
- Assicurati che la casella di controllo Cancella dati archiviati sia selezionata. Questa opzione obbliga Lighthouse ad accedere alla rete per ogni risorsa della pagina, ovvero l'esperienza dei nuovi visitatori della pagina.
- Fai clic su Esegui controlli. Dopo 5-10 secondi, Lighthouse mostra un report.
Ad esempio, se esegui alcuni controlli con Simulated Fast 3G, la limitazione di rallentamento della CPU 4x abilitata e le altre volte che esegui controlli con la limitazione disabilitata, i punteggi delle metriche saranno notevolmente più bassi quando è abilitata la limitazione. Potresti dedicare molto tempo a tentare di capire perché la pagina è così più lenta ora, mentre in realtà l'unica cosa che è cambiata è stata la configurazione.
Comprendere il report
In alto a destra nel report è indicato il punteggio del rendimento complessivo. 100 è un punteggio perfetto. Sotto il punteggio complessivo ci sono i punteggi delle metriche. La Guida al punteggio di Lighthouse v3 spiega in che modo ogni punteggio di metrica contribuisce al punteggio complessivo.
Passa il mouse sopra una metrica per scoprire di più. Fai clic su Scopri di più per leggere la documentazione.
Sotto i punteggi delle metriche, puoi vedere screenshot dell'aspetto della pagina durante il caricamento.
Sotto gli screenshot puoi vedere le opportunità per migliorare il rendimento della pagina.
Fai clic su un'opportunità per saperne di più.
Passaggi successivi
Prova a utilizzare Lighthouse per controllare la pagina, dalla pagina del profilo o da Chrome DevTools. Implementa una delle opportunità, quindi controlla di nuovo la pagina per vedere in che modo la modifica ha influito sul report. Idealmente, i punteggi delle metriche dovrebbero essere leggermente migliori e Lighthouse non dovrebbe più segnalare questa opportunità come qualcosa su cui lavorare.
Eseguire Lighthouse in autonomia è un'ottima soluzione per verificare l'integrità del sito, ma è consigliabile configurare il monitoraggio continuo. Per monitorare i progressi di Lighthouse nel tempo, aggiungi il tuo sito al tuo profilo.