Atteindre un score Lighthouse parfait : un guide complet

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). Même s’il est 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é pour les images et les vidéos afin de 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 < (window.innerHeight + scrollTop)) {
                    img.src = img.dataset.src;
                    img.classList.remove("lazy");
                }
            });
            if (lazyImages.length == 0) {
                document.removeEventListener("scroll", lazyLoad);
                window.removeEventListener("resize", lazyLoad);
                window.removeEventListener("orientationChange", lazyLoad);
            }
        };

        document.addEventListener("scroll", lazyLoad);
        window.addEventListener("resize", lazyLoad);
        window.addEventListener("orientationChange", lazyLoad);
    }
});

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-vous d'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 que votre site est sécurisé et fonctionne correctement.

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 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.

Surveiller les performances

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

<head>
    <!-- Preload key CSS -->
    <link rel="preload" href="/styles/main.css" as="style">
    <!-- Preload key JavaScript -->
    <link rel="preload" href="/scripts/main.js" as="script">
</head>
<body>
    <!-- Your content -->
    <script src="/scripts/main.js" defer></script>
    <link href="/styles/main.css" rel="stylesheet">
</body>

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

Achieving a perfect Lighthouse score requires consistent effort and a commitment to best practices. By focusing on performance optimization, accessibility enhancements, following best practices, improving SEO, and implementing PWA features, you can significantly improve your Lighthouse score. Regular testing and iteration are key to maintaining a high-quality web application that provides a great user experience.

Remember, while it may be tempting to find shortcuts to improve your Lighthouse score, genuine optimization will result in a better user experience and a more robust web application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!