Lighthouse è uno strumento che ti aiuta a misurare e trovare modi per migliorare il rendimento di una pagina. Ecco il flussi di lavoro generale per l'utilizzo di Lighthouse:
- Devi indicare a Lighthouse la pagina da controllare.
- Lighthouse carica la pagina e registra il tempo necessario per raggiungere diversi traguardi di rendimento. Questi traguardi sono chiamati metriche.
- Lighthouse fornisce un report sul rendimento della pagina. Il report fornisce un punteggio per ogni metrica e un elenco di opportunità che, se implementate, dovrebbero contribuire a velocizzare il caricamento della pagina.
Il tuo obiettivo è 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. Sfruttare queste opportunità tende a migliorare i punteggi delle metriche.
Eseguire Lighthouse dalla pagina del profilo
Esegui Lighthouse dalla pagina del tuo profilo web.dev:
Fornisci un URL qualsiasi e Lighthouse eseguirà una serie di controlli generando un report sul rendimento della pagina.
Esamina il report degli audit per identificare le aree in cui la tua pagina può essere migliorata.
Per ogni audit, troverai indicazioni e passaggi immediati che puoi intraprendere per migliorare i tuoi punteggi.
Eseguire Lighthouse da Chrome DevTools
Chrome DevTools è l'insieme di strumenti per sviluppatori web integrati direttamente nel browser Google Chrome. Non è necessario scaricare nulla per installare DevTools. Se hai Chrome, hai anche 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 poi seleziona Controlli dall'elenco. Lighthouse è il motore che alimenta il riquadro Controlli. Ecco perché vedi l'immagine di un faro.
- Assicurati che il pulsante di opzione Dispositivo mobile sia selezionato. Quando Lighthouse esamina la tua pagina, simula la visualizzazione e la stringa dell'agente utente 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 li attivi, vedrai una serie di opportunità per migliorare questi altri aspetti della tua pagina.
- Assicurati che il pulsante di opzione 3G rapido simulato, rallentamento CPU 4x sia selezionato. Lighthouse non limita la rete o la CPU durante il caricamento della pagina. ma esamina il tempo necessario per il caricamento della pagina in condizioni normali e poi stima il tempo necessario su una rete 3G veloce con una CPU 4 volte meno potente di quella del tuo computer.
- Assicurati che la casella di controllo Svuota spazio di archiviazione sia attivata. Questa opzione obbliga Lighthouse a collegarsi alla rete per ogni risorsa della pagina, ovvero come la pagina viene visualizzata dai visitatori alla prima visita.
- Fai clic su Esegui controlli. Dopo 5-10 secondi, Lighthouse mostra un report.
Ad esempio, se esegui alcuni controlli con 3G rapido simulato, Rallentamento CPU 4x con throttling abilitato e altre volte esegui controlli con il throttling disabilitato, i punteggi delle metriche saranno notevolmente inferiori quando il throttling è abilitato. Potresti passare molto tempo a cercare di capire perché la tua pagina ora è molto più lenta, quando in realtà l'unica cosa che è cambiata è la tua configurazione.
Informazioni sul report
In alto a destra nel report è riportato il punteggio del rendimento complessivo. 100 è un punteggio perfetto. Sotto il punteggio complessivo sono riportati i punteggi delle metriche. La guida al punteggio di Lighthouse v3 spiega in che modo ogni punteggio delle metriche contribuisce al punteggio complessivo.
Passa il mouse sopra una metrica per scoprire di più. Fai clic su Scopri di più per leggere la documentazione al riguardo.
Sotto i punteggi delle metriche sono visibili gli screenshot dell'aspetto della pagina durante il caricamento.
Sotto gli screenshot sono riportate le opportunità per migliorare il rendimento della pagina.
Fai clic su un'opportunità per saperne di più.
Passaggi successivi
Prova a utilizzare Lighthouse per eseguire un audit della tua 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 un po' migliori e Lighthouse non dovrebbe più segnalare l'opportunità come un aspetto da migliorare.
Eseguire Lighthouse autonomamente è un ottimo modo per verificare la presenza di problemi, ma alla fine è consigliabile configurare il monitoraggio continuo per assicurarsi che il sito rimanga in buone condizioni. Per monitorare l'avanzamento di Lighthouse nel tempo, aggiungi il tuo sito al tuo profilo.