Lighthouse est un outil open-source automatisé de Google qui est intégré dans les DevTools de Chrome, Opera, Arc, Edge… (liste non exhaustive). Il est conçu pour aider les développeurs à améliorer la qualité de leurs pages web en fournissant des audits relatifs à la performance, l'accessibilité, les meilleures pratiques, le SEO, et la compatibilité avec les Progressive Web Apps. Dans cet article, nous expliquerons comment utiliser Lighthouse pour analyser et optimiser votre boutique PrestaShop.

Étape 1 : Accéder à Lighthouse via les Chrome DevTools

Pour commencer votre analyse avec Lighthouse, suivez ces étapes simples :

• Ouvrez Google Chrome (ou un autre navigateur intégrant Lighthouse). Si vous ne l'avez pas encore installé, téléchargez-le depuis le site officiel de Google Chrome et installez-le sur votre ordinateur.
• Accédez à votre boutique PrestaShop en saisissant l'URL dans la barre d'adresse de Chrome.
• Ouvrez les outils de développement de Chrome en appuyant sur Ctrl+Shift+I (ou Cmd+Option+I sur Mac), ou faites un clic droit sur n'importe quelle page de votre site et sélectionnez "Inspecter".

Étape 2 : Utiliser Lighthouse pour analyser votre site

Une fois les DevTools ouverts, procédez comme suit pour lancer une analyse avec Lighthouse :

• Cliquez sur l'onglet "Lighthouse" dans la barre supérieure des Chrome DevTools. Si vous ne voyez pas cet onglet, cliquez sur les deux petites flèches à droite pour faire défiler les onglets disponibles.

  

• Configurez votre audit en sélectionnant les catégories que vous souhaitez analyser (Performance, Accessibilité, Pratiques recommandées, SEO, et PWA).

• Vous pouvez également configurer les conditions de simulation, comme le type de connexion (3G, 4G) et si vous souhaitez exécuter l'audit en mode mobile ou desktop.

• Cliquez sur "Analyze page load" pour lancer l'audit. Lighthouse analysera votre page et générera un rapport détaillé.

Étape 3 : Interpréter les résultats de Lighthouse

Le rapport généré par Lighthouse vous donnera un score pour chaque catégorie testée, ainsi que des recommandations détaillées pour améliorer votre site :

• Performance : Optimisez le temps de chargement et l'interactivité de votre site.
• Accessibilité : Assurez-vous que votre site est utilisable par tous les utilisateurs, y compris ceux en situation de handicap.
• Pratiques recommandées : Vérifiez la sécurité et d'autres bonnes pratiques de développement web.
• SEO : Améliorez la visibilité de votre site sur les moteurs de recherche.
• PWA : Assurez que votre site web puisse être utilisé comme une application web progressive.

En cliquant sur une des catégories, vous aurez un rapport détaillé pour cette dernière :

De plus, en scrollant un peu vers le bas, vous obtiendrez des recommandations pour optimiser votre site :

En cliquant sur un des éléments, vous aurez des explications vous permettant de comprendre et de résoudre le problème identifié :

Etape 4 : Comprendre les icônes de couleur dans les rapports Lighthouse

Dans les rapports générés par Lighthouse, vous trouverez des icônes colorées qui aident à identifier rapidement le type de recommandation ou de problème signalé. Ces icônes facilitent la priorisation des actions à entreprendre pour améliorer votre site. Voici ce que chaque couleur signifie :

• Rouge (Erreur) : Ces icônes signalent des erreurs critiques qui nécessitent une attention immédiate. Elles indiquent souvent des problèmes qui peuvent avoir un impact direct et significatif sur l'expérience utilisateur ou la performance du site.
• Orange (Avertissement) : Les icônes orange identifient les avertissements, qui sont moins critiques que les erreurs mais qui méritent néanmoins d'être examinés. Ces problèmes peuvent affecter l'optimisation du site ou entraîner des incohérences dans l'expérience utilisateur.
• Vert (Passé) : Les icônes vertes accompagnent les éléments qui ont réussi les tests de Lighthouse. Ce sont des points forts de votre site qui respectent les normes recommandées en matière de performance, accessibilité, pratiques recommandées, et SEO.
• Bleu (Information) : Les icônes bleues fournissent des informations supplémentaires qui ne sont pas directement liées à des problèmes mais peuvent offrir des insights sur la configuration du site ou des suggestions pour des améliorations futures.

Chacune de ces icônes apparaît à côté des résultats de tests dans le rapport de Lighthouse, permettant aux utilisateurs de comprendre rapidement le statut de chaque élément analysé et de déterminer les priorités pour optimiser leur site web.

Questions fréquentes

Comment résoudre les problèmes signalés par Lighthouse ?

Chaque suggestion dans le rapport Lighthouse est accompagnée d'une documentation qui explique le problème et propose des solutions concrètes. Cliquez sur les liens "En savoir plus" pour obtenir des conseils détaillés.

Lighthouse peut-il être utilisé pour des sites autres que ceux construits avec PrestaShop ?

Absolument, Lighthouse est un outil polyvalent qui peut être utilisé pour analyser n'importe quel site web, indépendamment de la technologie sous-jacente.

Est-il nécessaire d’avoir un score de 100 pour chaque catégorie ?

Non, d’ailleurs, très peu de site obtiennent ces scores. Par exemple, les scores présentées plus haut sont ceux de la page de téléchargement de Google Chrome. L’idéal est d’obtenir les scores les plus élevés possibles en résolvant le maximum de problèmes identifiés.