Lighthouse è uno strumento open-source automatizzato di Google, integrato nei DevTools per Chrome, Opera, Arc, Edge... (elenco non esaustivo). È stato progettato per aiutare gli sviluppatori a migliorare la qualità delle loro pagine web, fornendo audit su prestazioni, accessibilità, best practice, SEO e compatibilità con le Progressive Web App. In questo articolo, le spiegheremo come utilizzare Lighthouse per analizzare e ottimizzare il suo negozio PrestaShop.

Passo 1 Accedere a Lighthouse tramite Chrome DevTools

Per iniziare la sua analisi con Lighthouse, segua questi semplici passi:

• Apra Google Chrome (o un altro browser con Lighthouse). Se non l'ha ancora installato, lo scarichi dal sito ufficiale di Google Chrome e lo installi sul suo computer.
• Acceda al suo negozio PrestaShop inserendo l'URL nella barra degli indirizzi di Chrome.
• Apra gli strumenti di sviluppo di Chrome premendoCtrl+Shift+I (oCmd+Option+I su Mac), oppure faccia clic con il tasto destro del mouse su qualsiasi pagina del suo sito e selezioni 'Ispezione'.

Passo 2 Utilizzi Lighthouse per analizzare il suo sito

Una volta aperto DevTools, segua questi passaggi per lanciare un'analisi con Lighthouse:

• Clicchi sulla scheda "Lighthouse" nella barra superiore di Chrome DevTools. Se non vede questa scheda, clicchi sulle due piccole frecce a destra per scorrere le schede disponibili.

  

• Configuri il suo audit selezionando le categorie che desidera analizzare (Prestazioni, Accessibilità, Pratiche consigliate, SEO, e PWA).

• Può anche configurare le condizioni di simulazione, come il tipo di connessione (3 G 4 G) e se desidera eseguire l'audit in modalità mobile o desktop.

• Clicchi su "Analizza caricamento pagina" per avviare l'audit. Lighthouse analizzerà la sua pagina e genererà un rapporto dettagliato.

Passo 3 Interpretare i risultati di Lighthouse

Il rapporto generato da Lighthouse le fornirà un punteggio per ogni categoria testata, oltre a raccomandazioni dettagliate per migliorare il suo sito:

• Prestazioni: ottimizzare i tempi di caricamento e l'interattività del suo sito.
• Accessibilità: si assicuri che il suo sito sia utilizzabile da tutti gli utenti, compresi quelli con disabilità.
• Pratiche consigliate: verificare la sicurezza e altre buone pratiche di sviluppo web.
• SEO Migliora la visibilità del suo sito sui motori di ricerca.
• PWA: si assicuri che il suo sito web possa essere utilizzato come applicazione web progressiva.

Clicchi su una categoria per vedere un rapporto dettagliato per quella categoria:

E se scorre un po' più in basso, troverà consigli per ottimizzare il suo sito:

Cliccando su una delle voci, otterrà delle spiegazioni che la aiuteranno a capire e a risolvere il problema identificato:

Passo 4 capire le icone dei colori nei rapporti Lighthouse

Nei rapporti generati da Lighthouse, troverà delle icone colorate che la aiuteranno a identificare rapidamente il tipo di raccomandazione o problema segnalato. Queste icone rendono più facile stabilire le priorità delle azioni da intraprendere per migliorare il suo sito. Ecco il significato di ciascun colore:

• Rosso (errore): queste icone indicano errori critici che richiedono un'attenzione immediata. Spesso indicano problemi che possono avere un impatto diretto e significativo sull'esperienza dell'utente o sulle prestazioni del sito.
• Arancione (Avvertenza): le icone arancioni identificano le avvertenze, che sono meno critiche degli errori ma che vale la pena esaminare. Questi problemi possono influire sull'ottimizzazione del sito o portare a incoerenze nell'esperienza dell'utente.
• Verde (passato): le icone verdi accompagnano gli articoli che hanno superato i test Lighthouse. Si tratta di punti salienti del suo sito che rispettano gli standard raccomandati in termini di prestazioni, accessibilità, pratiche consigliate e SEO.
• Blu (Informazioni): le icone blu forniscono informazioni aggiuntive che non sono direttamente collegate ai problemi, ma possono offrire approfondimenti sulla configurazione del sito o suggerimenti per miglioramenti futuri.

Ciascuna di queste icone appare accanto ai risultati dei test nel rapporto Lighthouse, consentendo agli utenti di comprendere rapidamente lo stato di ciascun elemento analizzato e di determinare le priorità per l'ottimizzazione del sito web.

Domande frequenti

Come posso risolvere i problemi segnalati da Lighthouse?

Ogni suggerimento del rapporto Lighthouse è accompagnato da una documentazione che spiega il problema e propone soluzioni pratiche. Clicchi sui link "Per saperne di più" per avere consigli dettagliati.

Lighthouse può essere utilizzato per siti diversi da quelli costruiti con PrestaShop?

Assolutamente sì, Lighthouse è uno strumento versatile che può essere utilizzato per analizzare qualsiasi sito web, indipendentemente dalla tecnologia sottostante.

È necessario avere un punteggio di 100 per ogni categoria?

No, in realtà sono pochissimi i siti che raggiungono questi punteggi. Ad esempio, i punteggi mostrati sopra sono per la pagina di download di Google Chrome. L'ideale è ottenere i punteggi più alti possibili risolvendo il maggior numero di problemi identificati.