Introduzione a Lighthouse

Lighthouse è uno strumento automatizzato e open source per aiutarti a migliorare la qualità delle pagine web. Puoi eseguirlo su qualsiasi pagina web, pubblica o che richiede l'autenticazione. che offre controlli di 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. Usa i controlli non riusciti come indicatori per migliorare la pagina. Ogni controllo ha un riferimento che spiega perché è importante, nonché come correggerlo.

Puoi anche utilizzare CI di Lighthouse per evitare le regressioni sui tuoi siti.

Inizia

Scegli il flusso di lavoro di Lighthouse più adatto a te:

Eseguire Lighthouse in Chrome DevTools

Lighthouse ha il proprio riquadro in Chrome DevTools. Per eseguire un rapporto:

  1. Scarica Google Chrome per computer.
  2. Apri Chrome e vai all'URL che vuoi controllare. Puoi controllare qualsiasi URL sul web.
  3. Apri Chrome DevTools.
  4. Fai clic sulla scheda Lighthouse.

    A sinistra è presente l'area visibile della pagina web da controllare. Quello a destra è il riquadro Lighthouse di Chrome DevTools.

  5. Fai clic su Analizza caricamento pagina. DevTools mostra un elenco di categorie di controllo. Lasciale tutte attive.

  6. 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 Nodo:

  1. Scarica Google Chrome per desktop.
  2. Installa la versione Long-Term Support corrente di Node.
  3. Installa Lighthouse. Il flag -g lo installa come modulo globale.
npm install -g lighthouse

Per eseguire un controllo:

lighthouse <url>

Per visualizzare tutte le opzioni:

lighthouse --help

Esegui il modulo Nodo 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:

  1. Vai a PageSpeed Insights.
  2. Inserisci l'URL di una pagina web.
  3. Fai clic su Analizza.

    Il sito web di PageSpeed Insights.

Eseguire Lighthouse come estensione di Chrome

Per installare l'estensione:

  1. Scarica Google Chrome per computer.
  2. Installa l'estensione per Chrome Lighthouse dal Chrome Web Store.

Per eseguire un controllo:

  1. In Chrome, vai alla pagina che vuoi controllare.
  2. Fai clic su Lighthouse, accanto alla barra degli indirizzi di Chrome o nel menu delle estensioni di Chrome. Dopo aver fatto clic, il menu Lighthouse si espande.

    L'estensione richiede di generare un report.

  3. 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 il visualizzatore Lighthouse per visualizzare e condividere i report online.

Visualizzatore Lighthouse

Condividere i report come file JSON

Il visualizzatore Lighthouse 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. Esegui: shell lighthouse --output json --output-path <path/for/output.json>

Per visualizzare i dati del report:

  1. Apri il visualizzatore Lighthouse.
  2. 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 passare manualmente i file JSON, puoi anche condividere i report come gist secret di GitHub. Uno dei vantaggi dei Gists è il controllo della versione senza costi.

Per esportare un report come gist:

  1. Fai clic sul menu e poi su Apri nel visualizzatore. Il report si trova in https://googlechrome.github.io/lighthouse/viewer/.
  2. Nel visualizzatore, fai clic sul menu , poi su Salva come Gist. La prima volta che esegui questa operazione, viene visualizzato un popup che chiede l'autorizzazione per accedere ai dati di base di GitHub e per leggere e scrivere nei tuoi log.

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 su come generare un 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 Viewer e incolla l'URL di un messaggio al suo interno.

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. Anziché fornire consigli generali, Lighthouse fornisce consigli pertinenti e utili, 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 uno stack pack, 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.

Integra 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.

Contribuire a Lighthouse

Lighthouse è open source e sono benvenuti contributi. Consulta il tracker dei problemi del repository per trovare bug che puoi correggere o controlli che puoi creare o migliorare. I problemi sono un buon posto per discutere di metriche sul rendimento, idee per nuovi controlli o qualsiasi altro argomento correlato a Lighthouse.