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.
1 Passo: 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 premendo
Ctrl+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'.
2 Fase: utilizzare 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.
-
SEOConfiguri il suo audit selezionando le categorie che desidera analizzare (Prestazioni, Accessibilità, Pratiche consigliate, , e PWA).
-
3 G 4 GPuò anche configurare le condizioni di simulazione, come ad esempio il tipo di connessione ( , ) 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.
3 Fase: 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 visualizzare 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:
4 Passo: 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. SEOSi tratta di punti salienti del suo sito che rispettano gli standard raccomandati in termini di prestazioni, accessibilità, pratiche consigliate e .
- 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.
100 È necessario avere un punteggio 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 possibile di problemi identificati.
⚠️Questo articolo è stato tradotto da un programma di traduzione automatica. In caso di dubbi, consultare l'articolo in francese o in inglese.
Commenti
0 commenti
Accedi per aggiungere un commento.