Zwei Wörter, die man oft zusammen hört, sind Mobilität und Webseiten-Geschwindigkeit. Und das nicht ohne Grund, denn diese beiden gehen Hand in Hand. Mobil-Freundlichkeit und Seitengeschwindigkeit gehören zu den dringendsten Themen, mit denen wir uns befassen müssen. Die Messung der Seitengeschwindigkeit war schon immer so etwas wie eine dunkle Kunst. Die Tools zur Messung der Website-Geschwindigkeit, die wir heute verwenden, sind ziemlich angemessen, aber mit den neuen Web Vitals-Metriken versucht Google, sie aus einem anderen, realistischeren Blickwinkel zu betrachten und dabei die Erfahrungen auf der Webseite zu berücksichtigen. Im Folgenden werden wir näher darauf eingehen, wie Sie die Geschwindigkeit Ihrer Website und ihre SEO-Optimierung mit Google Lighthouse überprüfen können.
Geschwindigkeit und SEO von mobilen Websites mit Google Lighthouse überprüfen
Was ist Google Lighthouse?
Lighthouse ist ein von Google entwickeltes Tool, das ursprünglich für die Prüfung von Progressive Web Apps (PWA) gedacht war. Das Tool führt fünf Audits für Zugänglichkeit, Leistung, SEO, Progressive Web Apps und eine erweiterte Liste von Best Practices durch. Diese Audits, die auf den neuen Core Web Vitals basieren, geben Ihnen zusammen einen hervorragenden Überblick über die Qualität und Leistung Ihrer mobilen Website sowie Ihrer Desktop-Site oder Webanwendung.
Bei der Geschwindigkeit der Website geht es um Wahrnehmung und Benutzererfahrung. Geschwindigkeit in Zahlen bedeutet nichts, wenn sich Ihre Website immer noch langsam anfühlt. Viele Benutzer auf der ganzen Welt nutzen ziemlich schlechte mobile Verbindungen mit 3G oder weniger. Selbst mit blitzschnellen 5G-Verbindungen kann sich eine Website einfach nur verzögert und langsam anfühlen. Und wir alle wissen, wie verheerend sich eine langsame Website auf Ihre Konversion auswirken kann. Die Einsparung von Millisekunden der Zeit, die zum Laden Ihrer Website benötigt wird, könnte einen gewaltigen Unterschied machen. Ganz zu schweigen von der Frustration, die entsteht, wenn eine langsam ladende Anzeige den Knopf verschiebt oder überdeckt, auf den Sie gerade klicken wollten.
Während der Tests simuliert Google Lighthouse den Besuch Ihrer mobilen Website über eine unzuverlässige 3G-Verbindung auf einem Gerät mit etwas zu geringer Leistung. Bei dem Versuch, die Bedingungen der realen Welt so authentisch wie möglich zu simulieren, gehen Pakete verloren. Diese Erkenntnisse werden mit anderen Daten kombiniert. Nach der Durchführung des Tests erhalten Sie einen Bericht mit einem Ergebnis und umsetzbare Ratschläge mit Problemen, die es anzugehen gilt.
PageSpeed Insights vs. Google Lighthouse
PageSpeed Insights ist wahrscheinlich das meistgenutzte Tool zur Analyse der Website-Geschwindigkeit. Es liefert Ihnen eine gute Bewertung und eine Liste möglicher Verbesserungen und gibt Ihnen eine Vorstellung von der wahrgenommenen Ladegeschwindigkeit Ihrer Website. Außerdem 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 ein 100/100-Wert für die meisten Websites ein Wunschtraum ist.
PageSpeed Insights und Lighthouse waren früher zwei verschiedene Werkzeuge für diese Aufgabe. Beide lieferten wertvolle Einblicke, waren aber schwer zu kombinieren. Mit dem Aufkommen von Web Vitals und der Aktualisierung der Seitenerfahrungen verbesserte Google die Metriken auf breiter Front. Sie wurden nicht nur leichter verständlich, sondern auch zu gemeinsamen Metriken. Natürlich ist jedes Tool für eine bestimmte Teilaufgabe konzipiert und bietet spezifische Metriken. Diese Metriken stammen aus unterschiedlichen Umgebungen.
Core Web Vitals
Die brandneuen Core Web Vitals werden in allen Google-Tools zur Messung der Website-Geschwindigkeit, -Performance und -Erfahrung angezeigt – sogar im neuen Web Vitals-Bericht in der Suchkonsole. 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. Das sind die wichtigsten Webvitale:
- LCP, oder Largest Contentful Paint:
Oder wie lange es dauert, bis das größte Inhaltselement, das Sie im Ansichtsfenster sehen, geladen ist. - FID, 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. auf eine Schaltfläche klicken). - CLS oder Cumulative Layout Shift:
Oder wie viel des Bildschirms von der Bewegung betroffen ist – 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 emulieren können, was ein echter Besucher in der realen Welt erleben könnte. Anstatt Ihre Website einfach nur zu laden, wie es die klassischen Geschwindigkeits-Tools früher taten, prüfen diese von Web Vitals angetriebenen Tools, wie und wann sie auf Eingaben reagiert – und ob nach dem anfänglichen Laden etwas passiert. Sie finden den genauen Zeitpunkt, an dem Ihr Inhalt einsatzbereit ist, so dass Sie versuchen können, ihn zu optimieren, wenn er sich zu langsam anfühlt. Außerdem können Sie Ärgernisse finden, die ein gutes Seitenerlebnis behindern.
Denken Sie auch daran, dass Lighthouse nicht nur die Leistung misst, sondern auch SEO, verschiedene Best Practices und die Zugänglichkeit überprüft. Es ist ein umfassendes Tool, das Ihnen hilft, Ihre Website ganzheitlich zu verbessern.
Was Sie bei den Lighthouse-Ergebnissen beachten sollten
Das gesamte Konzept zur Beschleunigung Ihrer mobilen Website ist zweigleisig: Ihre Website muss schnell sein, und sie muss sich schnell anfühlen. Daher 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 Benutzer in der Lage sein, so schnell wie möglich mit Ihren Inhalten zu interagieren. Da Google angekündigt hat, dass Seitengeschwindigkeit und Seitenerfahrung Ranking-Faktoren für SEO sind, müssen Sie diese Probleme beheben.
Was sollte Ihre Priorität sein? Laden Sie zuerst Ihren Content. Fantastische Grafiken und Killer-Animationen können warten. Ihre Botschaft – und das, wonach die Leute suchen – ist höchstwahrscheinlich im Inhalt enthalten. Sie können den Rest des Inhalts im Hintergrund laden und ihn später auf dem Bildschirm anzeigen.
Von Lighthouse 6.0 verwendete Leistungskennzahlen
Bei der Messung der Performance Ihrer Website verwendet Lighthouse 6.0 die folgenden Metriken:
First Contentful Paint:
FCP misst, wie lange der Browser braucht, um den ersten Teil des DOM-Inhalts zu rendern, nachdem ein Benutzer zu Ihrer Seite navigiert hat. Dies schließt Bilder, nicht-weiße <Leinwand>-Elemente und SVGs ein, schließt aber Dinge innerhalb eines Iframes aus.
Speed Index:
Der Geschwindigkeitsindex misst, wie schnell der Inhalt beim Laden der Seite visuell angezeigt wird.
Largest Contentful Paint:
Beim 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. Hier bedeutet eine gute Bewertung, dass die Benutzer Ihre Website als schnell ladend wahrnehmen.
Time to Interactive:
TTI misst die Zeit, die vom Laden der Seite bis zu dem Zeitpunkt vergeht, an dem sie zuverlässig und schnell auf Benutzereingaben reagieren kann. Es kann sein, dass die Seite schnell zu laden aussieht, nur um festzustellen, dass das Drücken einiger Knöpfe noch nichts bewirkt.
Total Blocking Time:
TBT misst die Zeit zwischen dem FCP und dem TTI, in der Blockaden auftreten können, die die Reaktionsfähigkeit verhindern.
Cumulative Layout Shift:
Der CLS misst die Anzahl der Layoutverschiebungen, die während des vollständigen Ladevorgangs der Seite auftreten können. Jedes Mal, wenn ein Element auf dem Bildschirm von Rahmen zu Rahmen springt, zählt dies als eine Layoutverschiebung. Erinnern Sie sich an die unangenehmen Anzeigen, die im letzten Moment geladen werden?
Der Lighthouse-Bericht enthält auch einige Möglichkeiten zur Verbesserung der Geschwindigkeit Ihrer mobilen Website, einschließlich der Einsparung von Ladezeit. Dazu gehören die Reduzierung von render-blocking stylesheets, render-blocking scripts, die korrekte Größenanpassung von Bildern und die Fixierung von Bildern außerhalb des Bildschirms.
Alles in allem gibt Ihnen Lighthouse einen enormen Einblick in die Performance Ihrer Seite. Nutzen Sie diese Einblicke zu Ihrem Vorteil.
Der Leuchtturm-SEO-Check
Lighthouse bietet nicht nur Leistung, sondern auch einen Zugänglichkeitstest, Vorschläge zur Verbesserung Ihrer Website auf der Grundlage bewährter Verfahren und eine PWA-Analyse. Eine weitere coole Funktion von Lighthouse ist der grundlegende SEO-Check. Mit diesem Check können Sie ein einfaches SEO-Audit durchführen, um grundlegende SEO-Probleme aufzudecken, die eine Website haben kann. Es gibt Ihnen auch Vorschläge, wie Sie diese beheben können. Da Lighthouse lokal in Ihrem Browser läuft, können Sie die Prüfungen auch in Ihrer Staging-Umgebung durchführen.
Derzeit führt Lighthouse diese Prüfungen durch:
- Die Mobil-Freundlichkeit einer Seite
- Falls verwendet, ob die strukturierten Daten gültig sind
- Hat es ein <meta name=“viewport“> Tag mit Breite oder Anfangsskala
- Hat das Dokument ein Element <title>?
- Gibt es eine Meta-Beschreibung?
- Verfügt die Seite über einen erfolgreichen HTTP-Statuscode?
- Haben die Links einen beschreibenden Anker-Text?
- Verwendet das Dokument lesbare Schriftgrößen?
- Ist die Seite nicht für die Indizierung gesperrt?
- Ist die robots.txt gültig?
- Haben Bilder Alt-Attribute?
- Hat das Dokument eine gültige hreflang-Implementierung?
- Verfügt das Dokument über eine gültige rel=canonical-Implementierung?
- Gibt es unerwünschte Plugins wie Java oder Flash?
Obwohl die Lighthouse-Prüfungen grundlegend sind, werden Sie dadurch auf alle SEO-Probleme aufmerksam gemacht, die es zu beheben gilt.
Wie man Google Lighthouse
installiert
Der Einstieg in Google Lighthouse ist sehr einfach, da es in das Audit-Panel der Entwicklertools von Chrome integriert ist (Mac: Umschalt+Cmd+I. Win: Strg+Umschalt+J oder F12). Von dort aus können Sie den Test ausführen und den vollständigen Bericht abrufen. Darüber hinaus gibt es ein separates Chrome-Add-On für Lighthouse, das Ihrer Symbolleiste eine Schaltfläche hinzufügt, deren Verwendung jedoch mit einigen Einschränkungen gleich bleibt: Sie können Websites auf Ihrem lokalen Server nicht validieren, und authentifizierte Seiten funktionieren ebenfalls nicht.
Sie können Lighthouse auch als Node-Paket ausführen. Auf diese Weise können Sie den Test in Ihren Build-Prozess integrieren. Wenn Sie das Knoten-Paket verwenden, werden Sie auch sehen, dass es einige Prüfungen gibt, die nur in einer Knoten-Umgebung und nicht im Audits-Panel der DevTools funktionieren.
Um Lighthouse global von der Befehlszeile aus zu installieren, verwenden Sie
npm install -g lighthouse
Wenn Sie einen Test für https://w2media.online durchführen möchten, verwenden Sie
lighthouse https://w2media.online
Die vollständigen Ergebnisse des Audits werden im Terminal, aber auch in einer separaten HTML-Datei zur Verfügung gestellt.
Implementierung
von
Geschwindigkeitskorrekturen
für die Website
Es gibt viel, was Sie tun können, um die Geschwindigkeit Ihrer Website zu verbessern. Obwohl es den Rahmen dieses Beitrags sprengen würde, alle Korrekturen zu erklären, können viele Optimierungen im kritischen Rendering-Pfad gefunden werden. Der kritische Rendering-Pfad wird durch Objekte – wie CSS und JavaScript – gebildet, die erst geladen werden müssen, bevor der Inhalt auf dem Bildschirm angezeigt werden kann. Wenn dieser Inhalt blockiert ist, wird Ihre Seite nur langsam oder gar nicht gerendert. Und bitte, optimieren Sie Ihre Bilder! Nicht zuletzt sollten Sie nicht vergessen, sich über Googles neue Web Vitals zu informieren.
Versuchen Sie es!
Google Lighthouse ist nicht das einzige Geschwindigkeits-Tool, mit dem sich alle Websites beherrschen lassen, aber es ist eine sehr wertvolle Ergänzung Ihres Toolkits. Die SEO-Prüfungen sind einfach, aber dennoch willkommen. Lighthouse ist feinkörniger und gibt Ihnen sofortiges Feedback auf der Grundlage der realen Nutzung. Sie sollten es auf jeden Fall zusammen mit Ihren anderen Tools zum Testen der Seitengeschwindigkeit verwenden.
Benutzen Sie Google Lighthouse? Wie finden Sie es? Teilen Sie Ihre Erfahrungen und Tipps in den Kommentaren mit. Wir würden uns freuen, von Ihnen zu hören!
Brauchen Sie Unterstützung bei der Überarbeitung Ihrer Webseite? Das Web-Team vom ERP-Hero steht für Sie bereit.
