Lighthouse est un outil automatisé open source développé par Google pour améliorer la qualité des pages Web. Il audite votre site selon diverses mesures, notamment les critères de performances, d'accessibilité, de meilleures pratiques, de référencement et d'application Web progressive (PWA). Bien qu’il soit difficile d’obtenir un score Lighthouse parfait, cela est possible grâce à une optimisation systématique. Ce guide vous guidera à travers les étapes nécessaires pour améliorer votre site et viser un score Lighthouse de 100 %.

1. Optimisation des performances

La performance est un élément essentiel du score Lighthouse. Voici comment vous pouvez l'améliorer :

Chargement paresseux

Implémentez le chargement différé des images et des vidéos pour garantir qu'elles ne se chargent que lorsqu'elles apparaissent dans la fenêtre.

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback for browsers without IntersectionObserver
        let lazyLoad = function() {
            let scrollTop = window.pageYOffset;
            lazyImages.forEach(function(img) {
                if (img.offsetTop 




  
  
  Compression


Utilisez la compression Brotli ou gzip pour vos ressources afin de réduire leur taille et d'accélérer les temps de chargement.


  
  
  Minification


Réduisez vos fichiers JavaScript, CSS et HTML pour supprimer les caractères inutiles et réduire la taille des fichiers.


  
  
  Mise en cache


Exploitez la mise en cache du navigateur en définissant des en-têtes de cache appropriés pour améliorer les temps de chargement des visiteurs qui reviennent.


  
  
  CSS critique


Inline CSS critique pour garantir que le contenu principal de votre page se charge rapidement et différer les CSS non critiques.


  
  
  Réduisez le temps d’exécution de JavaScript


Optimisez votre code JavaScript pour minimiser le temps d'exécution et garantir que votre site reste réactif.


  
  
  2. Améliorations de l'accessibilité


L'accessibilité garantit que votre site peut être utilisé par le plus grand nombre de personnes possible, y compris les personnes handicapées.


  
  
  Contraste des couleurs


Assurez-vous que les couleurs du texte et de l'arrière-plan présentent un contraste suffisant pour être facilement lisibles.


  
  
  Rôles ARIA


Utilisez les rôles et attributs ARIA pour améliorer l'accessibilité de votre application Web.


  
  
  Ordre des onglets


Assurez un ordre de tabulation logique pour les éléments interactifs afin de faciliter la navigation à l'aide du clavier.


  
  
  Étiquettes


Ajoutez des étiquettes descriptives aux éléments de formulaire pour les rendre accessibles aux lecteurs d'écran.


  
  
  3. Meilleures pratiques


Le respect des bonnes pratiques permet de garantir la sécurité et le bon fonctionnement de votre site.


  
  
  HTTPS


Servez votre site via HTTPS pour garantir une transmission sécurisée des données.


  
  
  Évitez le contenu mixte


Assurez-vous que toutes les ressources sont chargées via HTTPS pour éviter les problèmes de contenu mixte.


  
  
  Audit des vulnérabilités de sécurité


Auditez régulièrement votre code pour détecter les problèmes de sécurité et corrigez les vulnérabilités.


  
  
  4. Référencement


Le référencement contribue à améliorer la visibilité de votre site dans les résultats des moteurs de recherche.


  
  
  Balises méta


Incluez des balises méta pertinentes pour le titre, la description et la fenêtre d'affichage.


  
  
  Données structurées


Utilisez des données structurées (par exemple, JSON-LD) pour aider les moteurs de recherche à mieux comprendre votre contenu.


  
  
  Adapté aux mobiles


Assurez-vous que votre site est adapté aux mobiles et réactif pour répondre aux besoins des utilisateurs sur différents appareils.


  
  
  5. Application Web progressive (PWA)


Les PWA offrent une expérience native semblable à celle d'une application sur le Web.


  
  
  Fichier manifeste


Créez un fichier manifeste d'application Web avec toutes les informations nécessaires pour faire de votre site une PWA.


  
  
  Employé de service


Implémentez un service Worker pour mettre en cache les actifs et activer les fonctionnalités hors ligne.


  
  
  HTTPS


Assurez-vous que votre site est servi via HTTPS, car c'est une exigence pour les PWA.


  
  
  Tests et itérations



  
  
  Effectuez régulièrement des audits de phare


Utilisez Chrome DevTools ou la CLI Lighthouse pour exécuter des audits et résoudre tout problème.


  
  
  Les performances du moniteur


Utilisez des outils tels que WebPageTest, Google PageSpeed ​​Insights et GTmetrix pour surveiller les performances de votre site.


  
  
  Amélioration continue


Mettez à jour et optimisez régulièrement votre base de code pour maintenir des performances élevées et une bonne expérience utilisateur.


  
  
  Exemple : optimisation du chargement des ressources avec préchargement




    
    




  
  
  Exemple : implémentation d'un Service Worker pour la mise en cache




// service-worker.js
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('my-cache').then(function(cache) {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles/main.css',
                '/scripts/main.js',
                '/images/logo.png'
            ]);
        })
    );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});





  
  
  Exécuter Lighthouse par programmation


Vous pouvez exécuter Lighthouse par programmation à l'aide du module Lighthouse Node :


const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port};
    const runnerResult = await lighthouse('https://example.com', options);

    // `.report` is the HTML report as a string
    const reportHtml = runnerResult.report;
    console.log(reportHtml);

    // `.lhr` is the Lighthouse Result as a JS object
    console.log('Report is done for', runnerResult.lhr.finalUrl);
    console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);

    await chrome.kill();
})();





  
  
  Conclusion


Atteindre un score Lighthouse parfait nécessite des efforts constants et un engagement envers les meilleures pratiques. En vous concentrant sur l'optimisation des performances, l'amélioration de l'accessibilité, le respect des meilleures pratiques, l'amélioration du référencement et la mise en œuvre des fonctionnalités PWA, vous pouvez améliorer considérablement votre score Lighthouse. Des tests et des itérations réguliers sont essentiels au maintien d'une application Web de haute qualité qui offre une expérience utilisateur exceptionnelle.

N'oubliez pas que même s'il peut être tentant de trouver des raccourcis pour améliorer votre score Lighthouse, une véritable optimisation se traduira par une meilleure expérience utilisateur et une application Web plus robuste.