Lighthouse è uno strumento automatico open source per aiutarti a migliorare la qualità delle pagine web. Puoi eseguirlo su qualsiasi pagina web, pubblica o che richiede l'autenticazione. Esegue controlli su prestazioni, accessibilità, app web progressive, SEO e altro ancora.
Puoi eseguire Lighthouse in Chrome DevTools, dalla riga di comando o come modulo Node. Fornisci a Lighthouse un URL da controllare, esegue una serie di controlli sulla pagina e genera un report sul rendimento della pagina. Utilizza gli audit non riusciti come indicatori per capire come migliorare la pagina. Ogni controllo ha un riferimento che spiega perché è importante, nonché come correggerlo.
Puoi anche utilizzare Lighthouse CI per evitare regressioni sui tuoi siti.
Inizia
Scegli il flusso di lavoro Lighthouse più adatto a te:
- In Chrome DevTools. Controlla le pagine che richiedono l'autenticazione e leggi i report in un formato intuitivo, direttamente dal browser.
- Dalla riga di comando. Automatizzare le esecuzioni di Lighthouse con script shell.
- Come modulo Node. Integra Lighthouse nei sistemi di integrazione continua.
- Da un'interfaccia utente web. Esegui Lighthouse e collegalo ai report senza bisogno di installarlo.
Esegui Lighthouse in Chrome DevTools
Lighthouse ha un proprio riquadro in Chrome DevTools. Per eseguire un rapporto:
- Scarica Google Chrome per desktop.
- Apri Chrome e vai all'URL che vuoi controllare. Puoi controllare qualsiasi URL sul web.
- Apri Chrome DevTools.
Fai clic sulla scheda Lighthouse.
A sinistra è visibile il viewport della pagina web da controllare. A destra è visualizzato il riquadro Lighthouse di Chrome DevTools. Fai clic su Analizza caricamento pagina. DevTools mostra un elenco di categorie di controllo. Lasciale tutte attivate.
Fai clic su Esegui controllo. Dopo 30-60 secondi, Lighthouse genera un report sulla pagina.
Un report Lighthouse in Chrome DevTools.
Installa ed esegui lo strumento a riga di comando Node
Per installare il modulo Node:
- Scarica Google Chrome per desktop.
- Installa la versione Long-Term Support corrente di Node.
- Installa Lighthouse. Il flag
-glo installa come modulo globale.
npm install -g lighthouse
Per eseguire un controllo:
lighthouse <url>
Per visualizzare tutte le opzioni:
lighthouse --help
Eseguire il modulo Node in modo programmatico
Consulta Utilizzo tramite programmazione per un esempio di esecuzione di Lighthouse tramite programmazione, come modulo Node.
Esegui PageSpeed Insights
Per eseguire Lighthouse su PageSpeed Insights:
- Vai a PageSpeed Insights.
- Inserisci l'URL di una pagina web.
Fai clic su Analizza.
Il sito web di PageSpeed Insights.
Eseguire Lighthouse come estensione di Chrome
Per installare l'estensione:
- Scarica Google Chrome per desktop.
- Installa l'estensione Lighthouse di Chrome dal Chrome Web Store.
Per eseguire un controllo:
- In Chrome, vai alla pagina che vuoi controllare.
Fai clic su
Lighthouse accanto alla barra degli indirizzi di Chrome o nel menu delle estensioni di Chrome.
Una volta fatto clic, il menu Lighthouse si espande.
L'estensione richiede di generare un report. Fai clic su Genera report. Lighthouse esegue i controlli sulla pagina attualmente attiva, quindi apre una nuova scheda con un report dei risultati.
Un report Lighthouse generato dall'estensione.
Condividere e visualizzare i report online
Utilizza Lighthouse Viewer per visualizzare e condividere i report online.
Condividi i report come JSON
Lighthouse Viewer ha bisogno dell'output JSON di un report Lighthouse. Genera gli output JSON come segue:
- Da un report Lighthouse. Fai clic su per il menu, quindi su
Salva come JSON - Riga di comando. Corsa:
shell lighthouse --output json --output-path <path/for/output.json>
Per visualizzare i dati del report:
- Apri Lighthouse Viewer.
- Trascina il file JSON nel visualizzatore o fai clic in un punto qualsiasi del visualizzatore per aprire il browser dei file e selezionarlo.
Condividere i report come Gist di GitHub
Se non vuoi trasmettere manualmente i file JSON, puoi anche condividere i report come gist di GitHub segreti. Uno dei vantaggi dei gist è il controllo della versione gratuito.
Per esportare un report come gist:
- Fai clic sul menu e poi su
Apri nel visualizzatore. Il report si trova all'indirizzo
https://googlechrome.github.io/lighthouse/viewer/. - Nel visualizzatore, fai clic sul menu , poi su
Salva come Gist. La prima volta che esegui questa operazione, un popup ti chiede l'autorizzazione per accedere ai tuoi dati di base di GitHub e per leggere e scrivere nei tuoi gist.
Per esportare un report come gist dalla versione CLI di Lighthouse,
crea manualmente un gist e copia e incolla l'output JSON del report nel gist. Il nome file gist contenente l'output JSON deve
terminare con .lighthouse.report.json. Consulta Condividere i report come JSON per un
esempio di come generare l'output JSON dallo strumento a riga di comando.
Per visualizzare un report salvato come Gist:
- Aggiungi
?gist=<ID>all'URL del visualizzatore, dove<ID>è l'ID del riepilogo.text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID> - Apri il Visualizzatore e incolla l'URL di un gist.
Estensibilità di Lighthouse
Lighthouse ha lo scopo di fornire indicazioni pertinenti e strategiche per tutti gli sviluppatori web. A questo scopo, sono disponibili due funzionalità che ti consentono di personalizzare Lighthouse in base alle tue esigenze specifiche.
Pacchetti di pacchetti
Gli sviluppatori utilizzano molte tecnologie diverse (backend, sistemi di gestione dei contenuti e framework JavaScript) per creare le pagine web. Invece di fornire consigli generali, Lighthouse fornisce consigli pertinenti e strategici, a seconda degli strumenti utilizzati.
I pacchetti di stack consentono a Lighthouse di rilevare la piattaforma su cui è basato il tuo sito e di mostrare consigli specifici basati sullo stack. Questi consigli sono definiti e selezionati da esperti della community.
Per contribuire con un pacchetto di pacchetti, consulta le linee guida per i contributi.
Plug-in Lighthouse
I plug-in di Lighthouse consentono agli esperti di dominio di estendere la funzionalità di Lighthouse in base alle esigenze specifiche della loro community. Puoi sfruttare i dati raccolti da Lighthouse per creare nuovi controlli. In sostanza, un plug-in Lighthouse è un modulo Node che implementa un insieme di controlli da eseguire da Lighthouse e da aggiungere al report come nuova categoria.
Per ulteriori informazioni su come creare il tuo plug-in, consulta il nostro manuale del plug-in nel repository GitHub di Lighthouse.
Integrare Lighthouse
Se sei un'azienda o un privato che sta integrando Lighthouse come parte dei prodotti o servizi che offri, è fantastico. Vogliamo che il maggior numero possibile di persone utilizzi Lighthouse.
Consulta le linee guida e gli asset del brand per l'integrazione di Lighthouse per mostrare che Lighthouse viene utilizzato, proteggendo al contempo il nostro brand.
Dai il tuo contributo a Lighthouse
Lighthouse è open source ed è benvenuto ogni tipo di contributo. Consulta il tracker dei problemi del repository per trovare bug che puoi correggere o controlli che puoi creare o migliorare. Nella scheda Problemi puoi discutere le metriche delle prestazioni, trovare idee per nuovi controlli o qualsiasi altra cosa relativa a Lighthouse.