Lighthouse: ottimizzare la performance delle pagine web

Link copiato negli appunti

Le prestazioni delle applicazioni web sono fondamentali per garantire un'esperienza utente ottimale e migliorare il posizionamento nei motori di ricerca. Google Lighthouse è uno strumento gratuito e open source che ti consente di analizzare e ottimizzare le prestazioni delle tue applicazioni web. In questa guida capiremo come utilizzare Lighthouse per identificare problemi nello sviluppo e implementare miglioramenti.

Cosa è Google Lighthouse?

Google Lighthouse è un tool automatizzato che analizza le prestazioni e la qualità di un sito web. Può essere utilizzato per:

valutare le performance.
Migliorare l'accessibilità.
Ottimizzare la SEO.
Garantire le migliori pratiche per il web.
Misurare la progressività delle applicazioni (PWA).

Lighthouse è integrato nei DevTools di Chrome ma può essere utilizzato anche come CLI o libreria Node.js.

Configurare Lighthouse

Per utilizzare Lighthouse nei DevTools di Chrome:

apri Google Chrome.
Vai al sito web che vuoi analizzare.
Premi Ctrl+Shift+I (o Cmd+Option+I su Mac) per aprire i DevTools.
Vai alla scheda "Lighthouse".
Seleziona le categorie che vuoi analizzare (Performance, SEO, Accessibility, etc.).
Premi "Generate Report".

Otterrai un report dettagliato con un punteggio per ogni categoria e suggerimenti per i miglioramenti.

Analizzare un report di Lighthouse

Il report di Lighthouse è diviso in sezioni principali. Esploriamo le più importanti:

Performance

Questa sezione valuta il tempo di caricamento del sito e l'interattività. Include metriche chiave come:

First Contentful Paint (FCP): quanto tempo impiega la prima parte di contenuto ad essere visibile.
Largest Contentful Paint (LCP): quanto tempo impiega il contenuto principale ad essere visibile.
Total Blocking Time (TBT): quanto tempo viene speso in script bloccanti.
Cumulative Layout Shift (CLS): la stabilità visiva della pagina durante il caricamento.

Accessibility

Misura quanto il sito è accessibile agli utenti con disabilità. Suggerisce miglioramenti come:

aggiungere attributi alt alle immagini.
Assicurarsi che il contrasto del testo sia sufficiente.
Garantire una navigazione coerente tramite tastiera.

SEO

Verifica che il sito segua le migliori pratiche SEO come:

avere un title tag e una meta description.
Utilizzare tag h1 unici e descrittivi.
Implementare il file robots.txt.

Best Practices

Questa sezione analizza sicurezza e buone pratiche come:

Utilizzare HTTPS.
Evitare l'uso di librerie vulnerabili.
Garantire la sicurezza degli iframe.

Migliorare le prestazioni con Lighthouse

Dopo aver analizzato il report, implementa le ottimizzazioni suggerite. Ecco alcune strategie comuni:

Ottimizzare il tempo di caricamento

Ridurre il peso delle immagini: usa formati moderni come WebP e comprimi le immagini con strumenti come TinyPNG o ImageOptim.
Abilitare la compressione Gzip: configura il server per comprimere file CSS, JavaScript e HTML.
Usare un CDN: distribuisci i contenuti statici su una rete di distribuzione per ridurre la latenza.

Ridurre i JavaScript bloccanti

Code Splitting: suddividi il codice JavaScript in moduli più piccoli per caricare solo ciò che serve.
Lazy Loading: carica risorse solo quando sono necessarie.
Minificare i file: rimuovi spazi, commenti e caratteri inutili da CSS e JavaScript.

Migliorare la stabilità visiva

specifica larghezza e altezza per tutte le immagini e gli elementi multimediali.
Usa font-display: swap per evitare il ritardo di caricamento dei font personalizzati.

Ottimizzare accessibilità e SEO

Ecco tutte le sezioni di cui tenero conto durante il nostro lavoro di ottimizzazione.

Accessibilità

aggiungi attributi aria-label e aria-labelledby per migliorare la navigazione.
Testa il sito con strumenti come axe.
Verifica che tutti i contenuti siano accessibili con la tastiera.

SEO

utilizza tag semantici HTML5 (header, article, section etc.).
Verifica che le pagine abbiano un unico tag <h1> significativo.
Usa un file sitemap.xml per aiutare i motori di ricerca a indicizzare le pagine.

Utilizzare Lighthouse nella CI/CD

Puoi integrare Lighthouse nel tuo flusso di sviluppo utilizzando la versione CLI o librerie come lighthouse-ci.

Installare Lighthouse CLI

npm install -g lighthouse

Esegui un'analisi direttamente dal terminale:

lighthouse https://tuosito.com --output=json --output-path=report.json

Lighthouse CI

Per analisi continue, configura Lighthouse CI nella tua pipeline installa innanzitutto il pacchetto:

npm install -g @lhci/cli

Configura poi un file .lighthouserc.json:

{
  "ci": {
    "collect": {
      "url": ["https://tuosito.com"],
      "numberOfRuns": 3
    },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }]
      }
    }
  }
}

Esegui infine l'analisi:

lhci autorun

Conclusione

Google Lighthouse è uno strumento essenziale per ottimizzare le prestazioni, l'accessibilità e la SEO delle applicazioni web. Con un report dettagliato e suggerimenti pratici, puoi migliorare l'esperienza utente e garantire che il tuo sito sia veloce, sicuro e facilmente reperibile sui motori di ricerca.

Integrando Lighthouse nei tuoi workflow di sviluppo, puoi monitorare continuamente la qualità di un sito web, identificare problemi e assicurarti che esso rimanga competitivo nel panorama digitale. Sperimenta con Lighthouse e trasforma il modo in cui sviluppi applicazioni web!

Indice lezioni