Google Lighthouse Score erklärt

Ein Blick auf die Faktoren hinter Performance, SEO und Accessibility.

Stellen Sie sich vor, Sie stehen kurz vor dem Betreten eines Ladens – die Tür öffnet sich nicht, und nach ein paar Sekunden entscheiden Sie sich, einfach weiterzugehen. Zum Laden nebenan. So oder so ähnlich passiert das im Online Marketing auch. Speed is King: 40% der Besucher verlassen eine Website, wenn sie länger als drei Sekunden zum Laden braucht. Die Geduld der Nutzer? Seien wir ehrlich – sie ist mittlerweile kürzer als die Aufmerksamkeitsspanne eines Goldfisches. Wenn Ihre Website also nicht in Rekordzeit lädt und Sie sonst ihre wichtigsten KPIs nicht im Griff haben, sind Sie schneller vergessen als der letzte TikTok-Trend.

Und das ist besonders wichtig, wenn man bedenkt, dass im Jahr 2023 89,2% der Menschen das Internet über ihre Smartphones nutzen. Wenn Ihre Seite also auf mobilen Geräten nicht flüssig läuft, verlieren Sie nicht nur potenzielle Besucher, sondern auch Ihre Sichtbarkeit in den Suchergebnissen.

Jetzt fragen Sie sich vielleicht: Wie sieht's mit SEO aus? Die ersten fünf Suchergebnisse kassieren rund 70% der Klicks, während nur 0,78% der Suchenden sich überhaupt die Mühe machen, auf Seite zwei zu schauen. Google lässt grüßen.

Doch es kommt noch schlimmer: Accessibility – ein oft übersehener Aspekt. Eine umfassende Studie aus dem Jahr 2023 ergab, dass 95,9% der Startseiten weltweit gegen die WCAG 2 Standards verstoßen. Das bedeutet, dass viele Websites Menschen mit Behinderungen den Zugang verwehren – und damit gegen deren Recht auf Inklusion verstoßen. Es kann zu Bußgeldern in Höhe von bis zu 100.000 Euro führen, wenn gegen Paragraph 37 BFSG verstoßen wird. Und zudem verlieren Unternehmen eine riesige Zielgruppe.

In diesem Artikel erkläre ich Ihnen den Lighthouse Score – was er misst, warum er so wichtig ist und wie er Ihre Website bewerten kann. Ziel ist es, dass Sie verstehen, wie Ihre Seite in den verschiedenen Kategorien abschneidet und worauf Sie achten müssen.

Google Lighthouse: Was es ist und wie Sie es nutzen

Lighthouse ist ein kostenloses Open-Source-Tool von Google, das entwickelt wurde, um die Qualität von Webseiten zu analysieren und zu verbessern. Es bewertet Seiten in fünf Bereichen: Performance, SEO, Best Practices, Accessibility und Progressive Web Apps (PWA). Und da dieses Instrument eben von Google ist, sollte man es auch wirklich ernst nehmen, wenn Sie nicht in den Statistiken von oben negativ auffallen möchten.

Auf diese Arten können Sie Lighthouse nutzen:

  • In den Chrome DevTools: Ideal, um Seiten zu auditieren, die eine Authentifizierung erfordern, und um Reports direkt im Browser zu erhalten. Öffnen Sie dafür in Chrome die zu prüfende URL, navigieren Sie zu den Developer Tools und klicken Sie auf den Reiter "Lighthouse".
  • Von der Kommandozeile: Perfekt, um Lighthouse-Checks zu automatisieren und mit Shell-Skripten zu arbeiten.
  • Als Node-Modul: Integriert Lighthouse direkt in Ihre CI/CD-Systeme.
  • Über eine Web-Oberfläche: Audits erstellen und teilen, ohne Installation.

Die fünf Dimensionen des Lighthouse Scores: Eine Übersicht

Lighthouse bewertet Websites in fünf Dimensionen, die darüber entscheiden, ob Ihre Seite im digitalen Dschungel überlebt:

Die 5 Dimensionen des Lighthouse Scores
  • Performance
    Alles dreht sich um Geschwindigkeit. Lighthouse misst, wie schnell der Inhalt Ihrer Seite geladen wird und wie interaktiv sie ist. Warum das wichtig ist? Nutzer springen schneller ab, als Sie "Ladebalken" sagen können, wenn Ihre Seite im Schneckentempo lädt.
  • Accessibility
    Accessibility sorgt dafür, dass Ihre Website für alle zugänglich ist, auch für Menschen mit Behinderungen. Und Achtung: Schlechte Accessibility kann nicht nur Nutzer vergraulen, sondern auch Bußgelder nach sich ziehen.
  • Best Practices
    Hier wird Ihre Seite auf technische Standards geprüft, von HTTPS bis zu modernen Web-Technologien. Ohne Best Practices wirkt Ihre Seite schnell wie ein Relikt aus der Steinzeit des Internets.
  • SEO
    SEO sorgt dafür, dass Ihre Seite überhaupt gefunden wird. Ohne solide Suchmaschinenoptimierung (z.B. Mobilfreundlichkeit, Meta-Daten) gerät Ihre Website ins digitale Nirwana – und das bringt keine Besucher.
  • Progressive Web Apps (PWA)
    PWAs verbinden die besten Eigenschaften von Webseiten und Apps: schnell, zuverlässig und sogar offline nutzbar. Lighthouse prüft, ob Ihre Seite fit für mobile Nutzer und den Offline-Modus ist.

Performance-Metriken im Detail (Lighthouse 10)

Performance ist der Hebel, an dem wir als technische Dienstleister am meisten drehen können. Lassen Sie uns die wichtigsten Metriken durchgehen und sehen, wie man sie optimiert:

  • First Contentful Paint (FCP)
    Hier wird gemessen, wann der erste sichtbare Inhalt erscheint. Werte unter 2 Sekunden sind ideal. Optimieren Sie die Server-Antwortzeit und eliminieren Sie blockierende Ressourcen.
  • Speed Index (SI)
    Dieser Index zeigt, wie schnell der sichtbare Inhalt geladen wird. Unter 3,4 Sekunden ist perfekt. Caching und Content Delivery Networks (CDNs) helfen hier.
  • Largest Contentful Paint (LCP)
    Dieser Wert misst, wann das größte sichtbare Element geladen ist. Werte unter 2,5 Sekunden sind optimal. Preloading großer Inhalte wie Bilder verbessert den LCP.
  • Total Blocking Time (TBT)
    Dieser Wert sagt Ihnen, wie lange die Seite blockiert ist. Unter 300 Millisekunden ist hier optimal. Reduzieren Sie unnötiges JavaScript und blockierende Skripte.
  • Cumulative Layout Shift (CLS)
    Misst Layout-Verschiebungen. Werte unter 0,1 sind optimal. Platzhalter für nachladende Inhalte helfen, Layout-Sprünge zu verhindern.

Das Lighthouse 10 Performance Audit basiert auf einem gewichteten Durchschnitt dieser fünf Metriken:

Gewichtung der Metriken

Warum der Lighthouse Score nicht alles ist: Die Schwächen

So beeindruckend ein perfekter Lighthouse Score auch sein mag, er hat seine Tücken. Der Algorithmus liefert oft variable Ergebnisse, abhängig von Faktoren wie Netzwerkbedingungen und der Leistung des Geräts. Das bedeutet, dass Ihr Lighthouse Score auf einem High-End Gerät bei guter Internetverbindung super sein kann, während ein Nutzer mit einem älteren Smartphone und schwacher Verbindung eine ganz andere – weniger erfreuliche – Erfahrung macht.

 

Lighthouse verwendet zudem häufig simuliertes Throttling, um reale Bedingungen nachzustellen. Klingt gut, oder? Leider sind diese Simulationen nicht immer so akkurat wie erhofft. Die simulierten CPU- und Netzwerkverzögerungen sind nicht gleichzusetzen mit echten Nutzererlebnissen. Kurz gesagt: Manchmal ist die simulierte Langsamkeit langsamer als die echte Langsamkeit.

 

Auch die CPU-Leistung spielt eine entscheidende Rolle. Ein leistungsstarker Prozessor schraubt die Bewertung nach oben, weil er Seiten schneller rendert. Nutzer mit älteren Geräten könnten aber weit weniger erfreut über die tatsächliche Performance sein.

 

Daher ist der Lighthouse Score zwar wichtig, aber nicht der Heilige Gral. Setzen Sie zusätzlich auf Real User Monitoring (RUM), um echte Nutzerdaten zu sammeln und die wirkliche Performance Ihrer Seite im Blick zu behalten.

 

Mehr dazu finden Sie auf GitHub.

Adobe Edge Delivery Services: Der technische Turbo für Ihren perfekten Lighthouse Score

Adobe verspricht: Mit AEM Edge Delivery Services (EDS) wird die Ladezeit Ihrer Seite drastisch beschleunigt. Ein Lighthouse Score von 100 soll easy machbar sein. Wie? Schauen wir uns ein paar technische Details an:

  1. Edge Computing und Caching:
    Content wird geographisch näher am Nutzer bereitgestellt, wodurch die Latenzzeiten sinken. Persistent Caching speichert häufig angefragte Inhalte und verbessert FCP und LCP erheblich.
  2. Phasenweises Rendering:
    Wichtige Inhalte wie große Bilder und Überschriften kommen zuerst. Der Rest lädt unauffällig nach. So wird der LCP optimiert, und Ihre Nutzer müssen nicht lange auf das Wesentliche warten.
  3. JavaScript-Optimierung und TBT:
    Total Blocking Time wird reduziert, indem unnötige JavaScript-Aufgaben entfernt und blockierende Skripte asynchron geladen werden.
  4. Real User Monitoring (RUM):
    RUM überwacht in Echtzeit, wie sich Ihre Seite bei echten Nutzern verhält. Diese Daten helfen, gezielte Optimierungen vorzunehmen und den Lighthouse Score zu verbessern.
Mehr zu AEM Edge Delivery Services

Well.

Geschwindigkeit und Zugänglichkeit sind entscheidend für den Erfolg einer Website – und die Statistiken sprechen für sich. In diesem Artikel haben wir gelernt, was genau Google mit Lighthouse misst. Mit Services wie Adobe Edge Delivery haben Sie jedoch alles an der Hand, um Ihre Seite schneller, benutzerfreundlicher und besser auffindbar zu machen. Setzen Sie diese Stellschrauben richtig ein, und einem perfekten Lighthouse Score steht nichts mehr im Weg. Unsere Experten bei eggs unimedia helfen Ihnen gerne dabei.