Zwei Worte, die man oft zusammen hört, sind mobil und Website-Geschwindigkeit. Und das ist nicht ohne Grund, denn diese beiden gehen Hand in Hand. Mobilfreundlichkeit und Website-Geschwindigkeit gehören zu den dringlichsten Angelegenheiten, mit denen wir uns befassen müssen. Die Messung der Seitengeschwindigkeit war schon immer so etwas wie eine dunkle Kunst. Mit den neuen Web Vitals-Metriken versucht Google jedoch, das Thema aus einem anderen, realistischeren Blickwinkel zu betrachten und die Seitenerfahrung mit einzubeziehen. Hier werde ich einen genaueren Blick darauf werfen, wie Sie die Geschwindigkeit Ihrer mobilen Website und SEO mit Google Lighthouse überprüfen können.

#1 Was ist Google Lighthouse?

Lighthouse ist ein von Google entwickeltes Tool für die Seitenerfahrung, das ursprünglich für die Prüfung von Progressive Web Apps (PWA) gedacht war. Das Tool führt fünf Audits für Barrierefreiheit, Leistung, SEO, Progressive Web Apps und eine erweiterte Liste von Best Practices durch. Angetrieben von den neuen Core Web Vitals geben Ihnen diese Prüfungen zusammen einen hervorragenden Überblick über die Qualität und Leistung Ihrer mobilen Website sowie Ihrer Desktop-Site oder Web-App.

Bei der Website-Geschwindigkeit geht es vor allem um die Wahrnehmung und das Nutzererlebnis. Geschwindigkeit in Zahlen bedeutet nichts, wenn sich Ihre Website langsam anfühlt. Viele Nutzer auf der ganzen Welt nutzen eher miserable Mobilfunkverbindungen mit 3G oder weniger. Selbst bei blitzschnellen 5G-Verbindungen kann sich eine Website einfach langsam und verzögert anfühlen. Und wir alle wissen, welche verheerenden Auswirkungen eine langsame Website auf Ihre Konversion haben kann. Eine Zeitersparnis von Millisekunden beim Laden Ihrer Website kann einen großen Unterschied ausmachen. Ganz zu schweigen von der Frustration, die entsteht, wenn eine langsam ladende Anzeige die Schaltfläche unterdrückt, auf die Sie gerade klicken wollten.

Während der Tests simuliert Google Lighthouse den Besuch Ihrer mobilen Website über eine schwache 3G-Verbindung auf einem leicht unterversorgten Gerät. Dabei gehen Pakete verloren, um die realen Bedingungen so authentisch wie möglich zu simulieren. Diese Erkenntnisse werden mit anderen Daten kombiniert. Nach der Durchführung des Tests erhalten Sie einen Bericht mit einem Ergebnis und Handlungsempfehlungen, die Sie in Angriff nehmen können.

#2 PageSpeed Insights vs. Google Lighthouse

PageSpeed Insights ist wahrscheinlich das am häufigsten verwendete Tool zur Analyse der Website-Geschwindigkeit. Es gibt Ihnen eine schöne Punktzahl und eine Liste möglicher Verbesserungen, und es gibt Ihnen eine Vorstellung von der wahrgenommenen Ladegeschwindigkeit Ihrer Website. Darüber hinaus gibt PageSpeed Insights Empfehlungen und zeigt Möglichkeiten zur Verbesserung der Leistung Ihrer Seite auf. Einige dieser Empfehlungen sind in der Regel schwer umzusetzen, so dass 100/100 für die meisten Websites ein Wunschtraum ist.

PageSpeed Insights und Lighthouse waren früher zwei verschiedene Tools für diese Aufgabe. Sie lieferten beide wertvolle Einblicke, waren aber schwer zu kombinieren. Mit der Einführung von Web Vitals und dem Page Experience Update verbesserte Google die Metriken auf breiter Front. Sie sind jetzt nicht nur leichter zu verstehen, sondern werden auch gemeinsam genutzt. Natürlich ist jedes Tool für eine bestimmte Teilaufgabe konzipiert und bietet spezifische Metriken. Diese Metriken stammen aus unterschiedlichen Umgebungen.
Mit Web Vitals wurden neue Möglichkeiten der Leistungsbestimmung eingeführt. Einige dieser Metriken können in einer Laborumgebung berechnet – sozusagen simuliert – werden, während andere Metriken nur dann Sinn machen, wenn sie in der Praxis getestet und erfasst werden. Darüber hinaus funktionieren einige Messgrößen in beiden Umgebungen gut. Die Google-Tools für die Seitenerfahrung verwenden eine Vielzahl von Metriken, um Ihnen die Daten zur Verfügung zu stellen, die Sie zur Verbesserung Ihrer Website benötigen.

Wenn Sie genau hinsehen, werden Sie feststellen, dass einige Metriken nur in Labor-Tools wie den Developer Tools und Lighthouse funktionieren. Die Feldmetriken erscheinen in Tools wie dem Web Vitals-Bericht in Search Console und PageSpeed Insights. Die Core Web Vitals wie LCP, FID und CLS funktionieren überall.

#3 Core Web Vitals

Die brandneuen Core Web Vitals werden in allen Google-Tools angezeigt, die die Geschwindigkeit, Leistung und Erfahrung einer Website messen – sogar im neuen Web Vitals-Bericht in Search Console. Jetzt müssen Sie nur noch drei grundlegende Metriken verstehen, um ein Gefühl dafür zu bekommen, wie Ihre Website oder bestimmte Seiten funktionieren. Diese Core Web Vitals sind:

• LCP, oder Largest Contentful Paint: Oder wie lange es dauert, bis das größte Inhaltselement, das Sie im Ansichtsfenster sehen, geladen ist.
• ID, oder First Input Delay: Oder wie lange es dauert, bis ein Browser auf eine Interaktion reagiert, die zuerst vom Benutzer ausgelöst wurde (z. B. Klicken auf eine Schaltfläche)
• CLS, oder kumulative Layout-Verschiebung: Oder, wie viel des Bildschirms wird durch die Bewegung beeinflusst – d.h. springen Dinge auf dem Bildschirm herum?

Diese neuen Web Vitals verfolgen einen viel praktischeren Ansatz und stellen die Benutzererfahrung in den Mittelpunkt. Die Tools besuchen Ihre Website über eine gedrosselte Verbindung auf einem durchschnittlichen Gerät, so dass sie nachahmen können, was ein echter Besucher in der realen Welt erleben könnte. Anstatt Ihre Website einfach nur zu laden, wie es die klassischen Geschwindigkeitstools taten, prüfen diese von Web Vitals betriebenen Tools, wie und wann sie auf Eingaben reagieren – und ob nach dem ersten Laden noch etwas passiert. Sie finden den genauen Zeitpunkt, an dem Ihre Inhalte einsatzbereit sind, so dass Sie versuchen können, diese zu optimieren, wenn sie sich zu langsam anfühlen. Außerdem können Sie Störfaktoren ausfindig machen, die ein gutes Seitenerlebnis behindern.

Denken Sie auch daran, dass Lighthouse nicht nur die Leistung misst, sondern auch SEO, verschiedene Best Practices und Barrierefreiheit überprüft. Es ist ein umfassendes Tool, das Ihnen hilft, Ihre Website ganzheitlich zu verbessern.

#4 Worauf ist bei den Ergebnissen von Lighthouse zu achten?

Das gesamte Konzept der Beschleunigung Ihrer mobilen Website ist zweigleisig: Ihre Website muss schnell sein und sich schnell anfühlen. Deshalb müssen Sie Ihre Inhalte so schnell wie möglich auf den Bildschirm bringen. Lassen Sie die Leute nicht warten. Außerdem müssen die Nutzer in der Lage sein, so schnell wie möglich mit Ihren Inhalten zu interagieren. Da Google angekündigt hat, dass die Seitengeschwindigkeit und die Seitenerfahrung Rankingfaktoren für SEO sind, müssen Sie diese Probleme beheben.

Was sollte Ihre Priorität sein? Laden Sie zuerst Ihren Inhalt. Beeindruckende Grafiken und tolle Animationen können warten. Ihre Botschaft – und das, wonach die Leute suchen – ist höchstwahrscheinlich im Inhalt enthalten. Den Rest des Inhalts können Sie im Hintergrund laden und später auf dem Bildschirm anzeigen lassen.

#5 Von Lighthouse 6.0 verwendete Leistungskennzahlen

Bei der Messung der Leistung Ihrer Website verwendet Lighthouse 6.0 die folgenden Metriken:

• First Contentful Paint: FCP misst, wie lange der Browser braucht, um das erste Stück DOM-Inhalt zu rendern, nachdem ein Benutzer zu Ihrer Seite navigiert hat. Dazu gehören Bilder, nicht-weiße <canvas>-Elemente und SVGs, aber keine Inhalte innerhalb eines iframe.
• Geschwindigkeitsindex: Der Geschwindigkeitsindex misst, wie schnell der Inhalt beim Laden der Seite visuell dargestellt wird.
• Largest Contentful Paint: Bei der LCP geht es darum, wie lange es dauert, bis das größte Inhaltsobjekt (z. B. ein Bild oder ein Textblock) geladen ist. Dies ist eine der wichtigsten neuen Metriken. Ein guter Wert bedeutet, dass die Nutzer Ihre Website als schnell ladend wahrnehmen.
• Zeit bis zur Interaktivität: Die TTI misst die Zeit, die vom Laden der Seite bis zu dem Zeitpunkt vergeht, an dem die Seite zuverlässig und schnell auf Benutzereingaben reagieren kann. Die Seite könnte schnell geladen aussehen, nur um dann festzustellen, dass das Drücken einiger Tasten noch nichts bewirkt.
• Total Blocking Time: Die TBT misst die Zeit zwischen FCP und TTI, in der es zu Blockaden kommen kann, die eine Reaktion verhindern.
• Kumulative Layout-Verschiebung: Das CLS betrachtet die Anzahl der Layoutverschiebungen, die während des gesamten Ladevorgangs der Seite stattfinden. Jedes Mal, wenn ein Element auf dem Bildschirm von Frame zu Frame springt, zählt dies als Layout-Verschiebung. Erinnern Sie sich an die lästigen Anzeigen, die im letzten Moment geladen werden?

Wie Ihre Punktzahl berechnet wird, können Sie im Lighthouse-Scoring-Rechner nachlesen.

Der Lighthouse-Bericht zeigt auch einige Möglichkeiten auf, die Geschwindigkeit Ihrer mobilen Website zu verbessern und wie viel Ladezeit sie dadurch einsparen. Dazu gehören die Reduzierung von Rendering-blockierenden Stylesheets und Skripten, die korrekte Größenbestimmung von Bildern und die Korrektur von Offscreen-Bildern.

Alles in allem bietet Ihnen Lighthouse einen enormen Einblick in die Leistung Ihrer Seite. Nutzen Sie diese Einblicke zu Ihrem Vorteil

#6 Der Leuchtturm SEO-Check

Lighthouse prüft nicht nur die Leistung, sondern bietet auch einen Barrierefreiheitstest, Vorschläge zur Verbesserung Ihrer Website auf der Grundlage von Best Practices und eine PWA-Analyse. Eine weitere coole Funktion von Lighthouse ist der grundlegende SEO-Check. Mit diesem Check können Sie eine einfache SEO-Prüfung durchführen, um grundlegende SEO-Probleme einer Website aufzudecken. Sie erhalten auch Vorschläge zur Behebung dieser Probleme. Da Lighthouse lokal in Ihrem Browser läuft, können Sie die Prüfungen auch in Ihrer Staging-Umgebung durchführen.

Derzeit prüft Lighthouse:

• Die Handyfreundlichkeit einer Seite
• Wenn die strukturierten Daten gültig sind
• Gibt es einen <meta name=“viewport“> Tag mit Breite oder Anfangsgröße
• Verfügt das Dokument über ein <title>-Element?
• Gibt es eine Meta-Beschreibung?
• Weist die Seite einen erfolgreichen HTTP-Statuscode auf?
• Haben die Links einen beschreibenden Ankertext?
• Wird in dem Dokument eine lesbare Schriftgröße verwendet?
• Ist die Seite nicht für die Indizierung gesperrt?
• Ist die robots.txt gültig?
• Haben Bilder Alt-Attribute?
• Verfügt das Dokument über eine gültige Hreflang-Implementierung?
• Verfügt das Dokument über eine gültige rel=canonical-Einstellung?
• Gibt es unerwünschte Plugins wie Java oder Flash?

Die Lighthouse-Checks sind zwar einfach, aber sie weisen Sie auf SEO-Probleme hin, die Sie beheben müssen.

#7 Implementierung von Korrekturen der Website-Geschwindigkeit

Es gibt eine Menge, was Sie tun können, um die Geschwindigkeit Ihrer Website zu verbessern. Auch wenn es den Rahmen dieses Beitrags sprengen würde, alle Lösungen zu erläutern, lassen sich viele Optimierungen im kritischen Rendering-Pfad finden. Der kritische Rendering-Pfad besteht aus Objekten – wie CSS und JavaScript -, die geladen werden müssen, bevor der Inhalt auf dem Bildschirm angezeigt werden kann. Wenn dieser Inhalt blockiert ist, wird Ihre Seite langsam oder gar nicht gerendert. Achten Sie darauf und halten Sie den Pfad frei von Hindernissen. Ilya Grigorik von Google hat einen hervorragenden Leitfaden zum Verständnis und zur Verbesserung des kritischen Rendering-Pfads verfasst. Und bitte, optimieren Sie Ihre Bilder! Zu guter Letzt sollten Sie nicht vergessen, sich über die neuen Web Vitals von Google zu informieren

Alles in allem empfiehlt Mobiteam immer, die Google-Richtlinien zu befolgen und organische Wachstumsmethoden auf Ihrer Website zu implementieren. Dies ist in der Tat eine gesunde Alternative zu Anzeigen und PPC. Außerdem verleiht organisches Wachstum Ihnen mehr Glaubwürdigkeit und erhöht somit die Konversionsrate.