Lighthouse ist ein automatisiertes Open-Source-Tool, das von Google entwickelt wurde, um die Qualität von Webseiten zu verbessern. Es prüft Ihre Website anhand verschiedener Kennzahlen, darunter Leistung, Zugänglichkeit, Best Practices, SEO und Progressive Web App (PWA)-Kriterien. Auch wenn das Erreichen eines perfekten Lighthouse-Scores eine Herausforderung darstellt, ist dies durch systematische Optimierung möglich. Dieser Leitfaden führt Sie durch die notwendigen Schritte, um Ihre Website zu verbessern und einen Lighthouse-Score von 100 % anzustreben.

1. Leistungsoptimierung

Leistung ist eine entscheidende Komponente des Lighthouse-Scores. So können Sie es verbessern:

Faules Laden

Implementieren Sie Lazy Loading für Bilder und Videos, um sicherzustellen, dass sie nur geladen werden, wenn sie im Ansichtsfenster angezeigt werden.

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 




  
  
  Kompression


Verwenden Sie die Brotli- oder gzip-Komprimierung für Ihre Assets, um deren Größe zu reduzieren und die Ladezeiten zu verkürzen.


  
  
  Minimierung


Minimieren Sie Ihre JavaScript-, CSS- und HTML-Dateien, um unnötige Zeichen zu entfernen und die Dateigröße zu reduzieren.


  
  
  Caching


Nutzen Sie Browser-Caching, indem Sie geeignete Cache-Header festlegen, um die Ladezeiten für wiederkehrende Besucher zu verbessern.


  
  
  Kritisches CSS


Inline-kritisches CSS, um sicherzustellen, dass der Hauptinhalt Ihrer Seite schnell geladen wird, und unkritisches CSS zurückstellen.


  
  
  Reduzieren Sie die Ausführungszeit von JavaScript


Optimieren Sie Ihren JavaScript-Code, um die Ausführungszeit zu minimieren und sicherzustellen, dass Ihre Website reaktionsfähig bleibt.


  
  
  2. Verbesserungen der Barrierefreiheit


Barrierefreiheit stellt sicher, dass Ihre Website von möglichst vielen Menschen genutzt werden kann, auch von Menschen mit Behinderungen.


  
  
  Farbkontrast


Stellen Sie sicher, dass Text- und Hintergrundfarben ausreichend Kontrast haben, damit sie gut lesbar sind.


  
  
  ARIA-Rollen


Verwenden Sie ARIA-Rollen und -Attribute, um die Zugänglichkeit Ihrer Webanwendung zu verbessern.


  
  
  Tab-Reihenfolge


Stellen Sie eine logische Tab-Reihenfolge für interaktive Elemente sicher, um die Navigation über die Tastatur zu erleichtern.


  
  
  Etiketten


Fügen Sie beschreibende Beschriftungen zu Formularelementen hinzu, um sie für Screenreader zugänglich zu machen.


  
  
  3. Best Practices


Das Befolgen von Best Practices trägt dazu bei, dass Ihre Website sicher ist und eine gute Leistung erbringt.


  
  
  HTTPS


Stellen Sie Ihre Website über HTTPS bereit, um eine sichere Datenübertragung zu gewährleisten.


  
  
  Vermeiden Sie gemischte Inhalte


Stellen Sie sicher, dass alle Ressourcen über HTTPS geladen werden, um Probleme mit gemischten Inhalten zu vermeiden.


  
  
  Prüfung auf Sicherheitslücken


Überprüfen Sie Ihren Code regelmäßig auf Sicherheitsprobleme und beheben Sie etwaige Schwachstellen.


  
  
  4. SEO


SEO trägt dazu bei, die Sichtbarkeit Ihrer Website in Suchmaschinenergebnissen zu verbessern.


  
  
  Meta-Tags


Fügen Sie relevante Meta-Tags für Titel, Beschreibung und Darstellungsbereich ein.


  
  
  Strukturierte Daten


Verwenden Sie strukturierte Daten (z. B. JSON-LD), um Suchmaschinen dabei zu helfen, Ihre Inhalte besser zu verstehen.


  
  
  Mobilfreundlich


Stellen Sie sicher, dass Ihre Website für Mobilgeräte geeignet ist und reagiert, um Benutzer auf verschiedenen Geräten anzusprechen.


  
  
  5. Progressive Web-App (PWA)


PWAs bieten ein natives App-ähnliches Erlebnis im Web.


  
  
  Manifestdatei


Erstellen Sie eine Web-App-Manifestdatei mit allen notwendigen Informationen, um Ihre Website zu einer PWA zu machen.


  
  
  Servicemitarbeiter


Implementieren Sie einen Servicemitarbeiter, um Assets zwischenzuspeichern und Offline-Funktionalität zu aktivieren.


  
  
  HTTPS


Stellen Sie sicher, dass Ihre Website über HTTPS bereitgestellt wird, da dies eine Voraussetzung für PWAs ist.


  
  
  Testen und Iteration



  
  
  Führen Sie regelmäßig Lighthouse-Audits durch


Verwenden Sie Chrome DevTools oder die Lighthouse-CLI, um Audits durchzuführen und etwaige Probleme zu beheben.


  
  
  Monitor Leistung


Verwenden Sie Tools wie WebPageTest, Google PageSpeed ​​Insights und GTmetrix, um die Leistung Ihrer Website zu überwachen.


  
  
  Ständige Verbesserung


Aktualisieren und optimieren Sie Ihre Codebasis regelmäßig, um eine hohe Leistung und ein gutes Benutzererlebnis zu gewährleisten.


  
  
  Beispiel: Optimieren der Ressourcenauslastung mit Preload




    
    




  
  
  Beispiel: Implementierung eines Service Workers für Caching




// 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);
        })
    );
});





  
  
  Lighthouse programmgesteuert ausführen


Sie können Lighthouse programmgesteuert mit dem Lighthouse Node-Modul ausführen:


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();
})();





  
  
  Abschluss


Um einen perfekten Lighthouse-Score zu erreichen, sind konsequente Anstrengungen und die Verpflichtung zu Best Practices erforderlich. Indem Sie sich auf Leistungsoptimierung, Verbesserungen der Barrierefreiheit, die Befolgung von Best Practices, die Verbesserung von SEO und die Implementierung von PWA-Funktionen konzentrieren, können Sie Ihren Lighthouse-Score erheblich verbessern. Regelmäßige Tests und Iterationen sind der Schlüssel zur Aufrechterhaltung einer qualitativ hochwertigen Webanwendung, die ein großartiges Benutzererlebnis bietet.

Denken Sie daran: Auch wenn es verlockend sein mag, Abkürzungen zur Verbesserung Ihres Lighthouse-Scores zu finden, führt eine echte Optimierung zu einer besseren Benutzererfahrung und einer robusteren Webanwendung.