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à

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 Cmd+Option+I
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)
Largest Contentful Paint (LCP)
Total Blocking Time (TBT)
Cumulative Layout Shift (CLS)

Accessibility

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

aggiungere attributi alt
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 meta description
Utilizzare tag h1
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 WebP
Abilitare la compressione Gzip CSS JavaScript HTML
Usare un CDN

Ridurre i JavaScript bloccanti

Code Splitting
Lazy Loading
Minificare i file

Migliorare la stabilità visiva

specifica larghezza e altezza per tutte le immagini e gli elementi multimediali.
Usa font-display: swap

Ottimizzare accessibilità e SEO

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

Accessibilità

aggiungi attributi aria-label aria-labelledby
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
Verifica che le pagine abbiano un unico tag <h1>
Usa un file sitemap.xml

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