So testen Sie die Geschwindigkeit Ihrer Website mit Google Lighthouse
Dieser Beitrag wurde von DeBugBear gesponsert. Die in diesem Artikel geäußerten Meinungen sind die eigenen des Sponsors.
Wir alle wollen eine Website, die schnell ist und über eine gute SEO verfügt. Aber es gibt eine lange Liste von Dingen, die überprüft werden müssen, und es ist leicht, kleine Probleme zu übersehen.
Glücklicherweise bietet Google ein eigenes Tool und einen Testbereich an, mit denen Sie herausfinden können, ob Ihre Website auf dem neuesten Stand ist.
Das Lighthouse-Tool von Google ist im Wesentlichen eine lange automatisierte Checkliste für Ihre Website.
Anstatt Ihre Website manuell zu überprüfen, erfahren Sie, wie Sie in weniger als einer Minute einen detaillierten Bericht erstellen können.
Was ist Google Lighthouse?
Lighthouse ist ein automatisiertes Website-Analysetool, das Ihre Website testet und ihr eine Bewertung in vier verschiedenen Kategorien zuweist:
- Leistung.
- Barrierefreiheit.
- Empfohlene Vorgehensweise.
- SEO.
Jede Punktzahl reicht von 0 bis 100, wobei 100 eine perfekte Punktzahl ist. Die Bewertungen bestehen aus einzelnen Checklistenelementen, die als Lighthouse-Audits bezeichnet werden.
Zusätzlich zu diesen vier Bewertungen gibt es auch einen Abschnitt zu Progressive Web App (PWA), der sich mit verschiedenen Funktionen befasst, die dafür sorgen, dass sich Ihre Website eher wie eine native mobile App verhält.
Durch die Überprüfung Ihrer Website mit Lighthouse können Sie sicherstellen, dass Ihre Website schnell ist und keine offensichtlichen Barrierefreiheits- oder SEO-Probleme aufweist.
PageSpeed Insights vs. Leuchtturm: Was ist der Unterschied?
Lighthouse ist ein kostenloses Tool, das von Google entwickelt wurde und dessen Quellcode öffentlich verfügbar ist.
PageSpeed Insights ist nur eine Möglichkeit, einen Lighthouse-Test durchzuführen, aber viele andere Produkte umfassen es auch. Sie können Lighthouse beispielsweise auch direkt auf Ihrem Computer installieren und dort ausführen.
Der normale Lighthouse-Bericht führt nur den automatisierten Geschwindigkeitstest durch und liefert keine echten Benutzermetriken. Wenn Sie jedoch PageSpeed Insights oder den DebugBear-Geschwindigkeitstest verwenden, erhalten Sie sowohl die echten Benutzerdaten als auch das Lighthouse-Testergebnis.
Hat der Lighthouse Performance Score Einfluss auf SEO?
Nein, Ihr Lighthouse-Performance-Score hat keinen direkten Einfluss auf die Suchmaschinenoptimierung.
Lighthouse bietet Ihnen jedoch Einblicke, die Ihnen dabei helfen können, die Gestaltung Ihrer Website zu beeinflussen Seitengeschwindigkeitwas ein Ranking-Signal ist.
Um diese Entscheidung zu treffen, untersucht Google drei Leistungsmetriken, die sogenannten Core Web Vitals (CWV).
Die zugrunde liegenden Daten für CWV werden im Rahmen des Chrome User Experience Report (CrUX) von echten Chrome-Benutzern gesammelt. Lighthouse hingegen ruft seine Daten etwas anders ab; Es führt seinen Leistungstest in einer simulierten Testumgebung durch.
Am Ende zählt für Google, wie echte Nutzer Ihre Website erleben. Lighthouse hilft Ihnen also dabei, wichtige Teile Ihrer Website zu verbessern, die sich bei richtiger Umsetzung im zukünftigen echten Benutzerverkehr widerspiegeln sollten.
Ein langsamer Lighthouse-Score korreliert also mit einem langsamen Erlebnis für echte Benutzer. Lighthouse kann wertvolle Möglichkeiten zur Optimierung der Seitengeschwindigkeit aufzeigen.
In der Kategorie „Lighthouse SEO“ wird auch geprüft, ob eine Seite indiziert werden kann oder ob Bild-Alt-Attribute fehlen. Die Optimierung der Lighthouse-Scores kann Ihnen also immer noch dabei helfen, bei Google einen höheren Rang zu erreichen.
Wie testen Sie Ihre Website mit Lighthouse?
Der einfachste Weg, einen Lighthouse-Test durchzuführen, ist die Verwendung eines kostenlosen Online-Tools wie Google PageSpeed Insights oder des DebugBear Speed Test.
Schritt 1: Geben Sie Ihre URL ein
Geben Sie einfach die URL Ihrer Website ein und starten Sie den Test!
Schritt 2: Erhalten Sie echte Benutzerdaten und Lighthouse-Testergebnisse
PageSpeed Insights meldet tatsächlich sowohl die oben erwähnten echten Benutzerdaten als auch das Lighthouse-Testergebnis.
Von dort aus können Sie:
- Entdecken Sie, was Ihre echten Benutzer erleben (dies bezieht sich auf die CrUX-Daten, die von Chrome-Benutzern gesammelt werden).
- Diagnostizieren Sie Leistungsprobleme (hier befinden sich die Lighthouse-Testdaten).
Echte Benutzerdaten und Lighthouse-Testergebnis auf PageSpeed Insights, September 2023
Schritt 3: Streben Sie alle grünen Punkte an
Sie finden den Lighthouse-Leistungswert und die einzelnen Seitengeschwindigkeitsmetriken oben im Lighthouse-Bericht. Der Punktestand wird grün angezeigt, wenn er 90 oder mehr beträgt.
Pro Insight: Führen Sie Lighthouse sowohl auf Mobilgeräten als auch auf Mobilgeräten aus. Desktop
Lighthouse-Tests können mit unterschiedlichen Gerätekonfigurationen durchgeführt werden.
Die Standardkonfigurationen für Mobilgeräte und Desktops unterscheiden sich nicht nur in der Bildschirmgröße oder dem Benutzeragenten, den das Gerät zur Identifizierung verwendet. Durch die Auswahl eines Geräts werden auch andere Aspekte der Testumgebung gesteuert:
- Netzwerklatenz: Wie lange dauert es, bis Daten zwischen dem Client und dem Server übertragen werden?
- Netzwerkbandbreite: Wie viele Daten können pro Sekunde zwischen Client und Server ausgetauscht werden?
- CPU-Geschwindigkeit: Wie schnell kann der Browser Code ausführen oder Aufgaben wie das Rendern von Seiteninhalten ausführen?
Lighthouse verwendet die folgenden Standardeinstellungen für Desktop- und Mobilgeräte:
| Handy, Mobiltelefon | Desktop | |
| Latenz | 150 Millisekunden | 40 Millisekunden |
| Bandbreite | 1,6 Mbit/s (200 Kilobyte pro Sekunde) | 8 Mbit/s (1 Megabyte pro Sekunde) |
| CPU geschwindigkeit | 4-fach gedrosselt | Keine Drosselung |
Wenn ein Lighthouse-Test auf einem Computer mit einer schnellen Internetverbindung ausgeführt wird, wird die Netzwerkgeschwindigkeit auf die der Testkonfiguration gedrosselt.
Die simulierte Testumgebung ist auf Mobilgeräten viel langsamer als auf Desktops, sodass die von Lighthouse gemeldeten mobilen Ergebnisse und Metriken viel schlechter sind als die von Desktop-Tests.
Wie wird der Lighthouse Performance Score berechnet?
Der Lighthouse-Performance-Score setzt sich aus fünf individuellen Website-Performance-Metriken zusammen:
| Metrisch | Score-Beitrag | Was es misst |
| Gesamtblockierungszeit | 30 % | Könnte eine große CPU-Verarbeitung auf der Seite zu langsamen Benutzerinteraktionen führen? |
| Größte inhaltsreiche Farbe | 25 % | Wie schnell wird der Inhalt der Hauptseite angezeigt? |
| Kumulative Layoutverschiebung | 25 % | Verschieben sich Seiteninhalte nach dem Erscheinen und verwirren den Benutzer? |
| Erste inhaltsreiche Farbe | 10 % | Wie schnell wird der erste Seiteninhalt angezeigt? |
| Geschwindigkeitsindex | 10 % | Wie lange dauert es, bis der Großteil des Seiteninhalts erscheint? |
Jeder Metrik wird eine Teilbewertung zugewiesen und diese Teilbewertungen werden dann unter Verwendung der Gewichtungen aus der obigen Tabelle zur Gesamtbewertung kombiniert.
Um beispielsweise eine Punktzahl von 90 für die Metrik „Größter Contentful Paint“ zu erhalten, muss der Metrikwert unter 2,5 Sekunden liegen.
Wie kann ich eine detaillierte Aufschlüsselung der Lighthouse-Leistungsbewertung anzeigen?
Sie können im Lighthouse-Bericht auf den Link „Rechner anzeigen“ klicken, um eine detaillierte Berechnung für Ihre Website anzuzeigen.
So führen Sie einen Lighthouse-Test in Chrome DevTools durch
Eine weitere Möglichkeit, einen Lighthouse-Test durchzuführen, ist die Verwendung der Entwicklertools in Google Chrome.
Dies ist besonders nützlich, wenn Sie Websites testen, die auf einem lokalen Server laufen, Seiten, die eine Anmeldung erfordern, oder um die Benutzerinteraktion im Rahmen des Geschwindigkeitstests zu testen.
Um Lighthouse in Chrome auszuführen, können Sie:
- Öffnen Sie die Website, die Sie testen möchten.
- Klicken Sie mit der rechten Maustaste auf die Seite und wählen Sie „Inspizieren“ aus dem Menü.
- Öffnen Sie die Registerkarte „Leuchtturm“.
- Klicken Sie auf „Seitenlast analysieren“.
Die Seite wird dann neu geladen und das Testergebnis liegt innerhalb einer Minute vor.
Lighthouse in DevTools bietet drei separate Modi:
- Navigation: Laden Sie die Seite neu und bewerten Sie Leistung, Zugänglichkeit und SEO.
- Zeitspanne: Sammeln Sie Daten zu einer bereits geöffneten Seite, um beispielsweise zu messen, wie lange eine Seiteninteraktion dauert.
- Schnappschuss: Analysieren Sie die Zugänglichkeit und SEO des aktuellen Seitenstatus.
Der Timespan-Modus ist besonders nützlich, da Sie damit den Test starten, mit den Seiteninhalten interagieren und dann einen Bericht über die Interaktion erstellen können. Auf diese Weise können Sie die Metrik „Interaktion mit Next Paint“ messen, die im März 2024 zu einem der Core Web Vitals von Google wird.
DevTools bietet auch eine Option zum Konfigurieren der Drosselungsmethode. Klicken Sie oben rechts auf das Zahnradsymbol, um die erweiterten Lighthouse-Einstellungen zu öffnen. Durch Auswahl der DevTools-Drosselungsoption erhalten Sie zuverlässigere Daten als bei Verwendung der standardmäßigen simulierten Drosselung.
Allerdings ist die Verwendung der DevTools-Drosselung immer noch weniger zuverlässig als die Verwendung eines speziellen Page-Speed-Tools.
Sind die Daten von Google Lighthouse zuverlässig?
Lighthouse unterstützt verschiedene Betriebsmodi und einige liefern zuverlässigere Ergebnisse als andere. Der von PageSpeed Insights verwendete Standardmodus heißt simulierte Drosselung und kann manchmal zu ungenauen Daten führen.
Beim Ausführen eines Leistungstests erfasst PageSpeed Insights keine Daten über eine langsame Verbindung. Stattdessen werden Leistungsmetriken bei einer schnellen Verbindung gemessen. Diese anfänglichen Daten werden als beobachtete Metriken bezeichnet.
Nach dem Sammeln der Daten führt Lighthouse eine Simulation durch, die abschätzt, wie schnell die Seite bei einer langsameren Netzwerkverbindung geladen worden wäre.
Auf diese Weise können Tests auch bei langsamer Gerätekonfiguration schnell durchgeführt werden. Die Simulation kann aber auch Ungenauigkeiten mit sich bringen.
Sie können die Site Speed Chrome-Erweiterung verwenden, um sowohl die simulierten Metriken als auch die ursprünglich beobachteten Daten anzuzeigen, wenn Sie einen Test auf PageSpeed Insights durchführen.
Sie werden manchmal feststellen, dass die Ladezeit der Seite schneller ist, nachdem das Netzwerk langsamer wird. Wenn dies geschieht, ist dies ein klarer Hinweis darauf, dass die Lighthouse-Simulation auf einen Randfall stößt, den sie nicht unterstützt.
Wie kann ich zuverlässigere Testergebnisse erhalten?
Um qualitativ hochwertige Daten zu erhalten, können Sie den kostenlosen DebugBear-Website-Geschwindigkeitstest verwenden. Dieser Test erfasst Metriken direkt in einer gedrosselten Umgebung und gewährleistet so zuverlässige Testergebnisse.
So verbessern Sie Ihren Lighthouse-Leistungswert
Um mit der Optimierung Ihrer Punktzahl zu beginnen, sehen Sie sich den Abschnitt „Möglichkeiten“ der Kategorie „Lighthouse-Leistung“ an.
Lighthouse identifiziert automatisch potenzielle Verbesserungen und ordnet sie nach den geschätzten Einsparungen auf Ihrem Konto Alter Ladezeit.
Auch die Betrachtung einer Wasserfall-Visualisierung, die zeigt, welche Ressourcen Ihre Website lädt und wann Inhalte angezeigt werden, bietet viele Einblicke in Ihre Kennzahlen. Dadurch können Sie nachvollziehen, was die einzelnen Kennzahlen zurückhält.
Oft können Sie bereits einige Verbesserungen erzielen, indem Sie unnötigen Code von Drittanbietern entfernen oder Ihr Website-Theme neu konfigurieren. Bei einer individuell erstellten Website benötigen Sie jedoch häufig die Hilfe Ihres Entwicklungsteams, um Korrekturen umzusetzen.
Sollten Sie sich über einen schlechten Lighthouse-Score Sorgen machen?
Solange Ihre tatsächlichen Besucherzahlen im grünen Bereich liegen, werden Sie von Google nicht abgestraft.
Möglicherweise möchten Sie Ihre Website jedoch noch weiter optimieren, um Menschen, die langsamere Mobilgeräte verwenden und über eine schlechtere Internetverbindung verfügen, ein besseres Erlebnis zu bieten.
Wenn Sie einen Labortest durchführen möchten, der typischere Einstellungen für echte Benutzer verwendet, können Sie DebugBear verwenden und beim Einrichten Ihrer Seite die Konfiguration „Mobile Fast“ auswählen.
Fehlerbehebung bei Google Lighthouse
Manchmal können die Unterschiede zwischen Lighthouse-Tests und CWV-Tests auffallend sein, also lassen Sie uns darüber sprechen, was Sie möglicherweise sehen.
Warum sind die Ergebnisse des Lighthouse-Tests schlechter als die Core Web Vitals von Google?
Wenn Sie einen Test mit PageSpeed Insights durchführen, werden Sie häufig feststellen, dass die von Lighthouse gemeldeten Metriken deutlich schlechter sind als die tatsächlichen Benutzerdaten.
Was ist für die Ergebnisdiskrepanz verantwortlich?
Die von Lighthouse verwendeten Netzwerkbedingungen sind deutlich schlechter als die, die ein typischer echter Benutzer erleben würde.
Und das führt zu niedrigeren Seitengeschwindigkeitswerten.
Beispielsweise verwendet Lighthouse eine Netzwerklatenz von 150 Millisekunden, während in den USA eine Latenzzeit von 40 Millisekunden üblicher ist. Lighthouse nutzt eine mobile Latenz von 1,6 Megabit pro Sekunde, verglichen mit einer typischen realen Benutzerbandbreite von 35 Megabit pro Sekunde.
Bei der Berechnung der tatsächlichen Nutzermetriken berücksichtigt Google das 75. Perzentil. Wenn Ihr Wert für „Größter Contentful Paint“ 3 Sekunden beträgt, bedeutet das, dass 75 % der Besucher weniger als 3 Sekunden und 25 % länger als 3 Sekunden warten.
Im Gegensatz dazu sind die von Lighthouse gemeldeten Kennzahlen repräsentativer für die langsamsten 5–10 % der Benutzererfahrungen.
Warum variiert der Lighthouse-Leistungswert zwischen den Läufen?
Wenn Sie Lighthouse zweimal auf derselben Website ausführen, werden Sie wahrscheinlich zwei unterschiedliche Leistungswerte sehen. Was verursacht diese Variation?
Jedes Lighthouse-Ergebnis liefert nur Daten zu einem einzigen Ladevorgang Ihrer Website.
Keine zwei Seitenladevorgänge sind identisch und haben genau die gleiche Ladezeit.
Dafür kann es viele Gründe geben, zum Beispiel:
- Zufällige Variation: Ihre Website lädt Dutzende oder Hunderte von Ressourcen und die beteiligten Server reagieren manchmal schnell und manchmal langsamer.
- Unterschiedlicher Inhalt: Wenn Ihre Seite Anzeigen oder sich häufig ändernde Inhalte enthält und die Seitengeschwindigkeit je nach geladenem Inhalt variiert.
- Variation in der Hintergrundaktivität: Wenn andere Websites im Hintergrund geöffnet sind oder der Computer andere Aufgaben ausführt, wirkt sich dies auf Ihr Lighthouse-Ergebnis aus.
Darüber hinaus sind Lighthouse-Scores, die in verschiedenen Umgebungen – beispielsweise auf PageSpeed Insights und auf dem eigenen Computer – erhoben wurden, nicht direkt vergleichbar. Das liegt daran, dass Ihr Computer möglicherweise eine schnellere CPU als der Google-Server hat oder Sie sich möglicherweise näher am Rechenzentrum befinden, das die Website bereitstellt.
Richten Sie eine kontinuierliche Überwachung für Lighthouse-Scores und Core Web Vitals ein
Möchten Sie Ihre Lighthouse-Scores und die allgemeine Seitengeschwindigkeit verbessern? Mit DebugBear können Sie über einmalige Tests hinausgehen und Ihre Website kontinuierlich testen.
Mit DebugBear können Sie:
- Sehen Sie, wie sich Ihre Lighthouse-Scores im Laufe der Zeit ändern.
- Greifen Sie auf eine detaillierte Analyse zu, die über den Lighthouse-Bericht hinausgeht.
- Lassen Sie sich auf Score-Regressionen aufmerksam machen und verstehen Sie diese.
- Präsentieren Sie die Verbesserungen, die Ihr Team umgesetzt hat.
- Überwachen Sie die Google CrUX-Metriken und sammeln Sie benutzerdefinierte echte Benutzerdaten.
Melden Sie sich noch heute für eine kostenlose 14-tägige Testversion an.
Neben der Erstellung täglicher Lighthouse-Berichte erstellt DebugBear auch benutzerdefinierte Berichte, die Sie bei der Optimierung Ihrer Core Web Vitals unterstützen.
Ist in Ihrem Lighthouse-Score eine Regression zu sehen? Im Vergleichsmodus können Sie genau sehen, was sich geändert hat, und die Prüfung identifizieren, die Sie korrigieren müssen.
Sind Sie bereit, mit der Optimierung Ihrer Website zu beginnen? Melden Sie sich bei DebugBear an und erhalten Sie die Daten, die Sie für die Bereitstellung großartiger Benutzererlebnisse benötigen.
Bildnachweise
Ausgewähltes Bild: Bild von DeBugBear. Mit Genehmigung verwendet.
Hi colleagues, how is the whole thing, and what you would like to
say regarding this post, in my view its actually amazing designed
for me.
Attractive part of content. I simply stumbled upon your weblog and in accession capital
to claim that I acquire actually loved account your weblog posts.
Any way I’ll be subscribing to your feeds or even I achievement you
get admission to persistently quickly.
I’m impressed, I have to admit. Seldom do I come across a blog that’s equally educative and
engaging, and let me tell you, you have hit the nail on the head.
The issue is something that not enough men and women are
speaking intelligently about. Now i’m very happy I found this during my search for something concerning this.
You should be a part of a contest for one
of the finest sites on the internet. I’m going to recommend this website!
Nice post. I learn something new and challenging on blogs I stumbleupon everyday.
It’s always exciting to read through content from other writers
and practice a little something from other sites.
Thanks for a marvelous posting! I really enjoyed reading it,
you’re a great author.I will always bookmark your blog and
may come back sometime soon. I want to encourage you continue your great job,
have a nice morning!
I pay a quick visit each day a few sites and information sites to read posts, however this weblog gives
feature based writing.
No matter if some one searches for his required thing, so he/she needs to be available
that in detail, so that thing is maintained over here.
Hello! I just wanted to ask if you ever have any problems with hackers?
My last blog (wordpress) was hacked and I ended up losing months of hard work due to no backup.
Do you have any methods to protect against hackers?
Hi there, I enjoy reading all of your post. I wanted
to write a little comment to support you.
Hello, I think your website might be having browser compatibility issues.
When I look at your website in Ie, it looks fine but when opening in Internet Explorer, it
has some overlapping. I just wanted to give you a quick
heads up! Other then that, terrific blog!
I really like what you guys are usually up too.
This kind of clever work and exposure! Keep up the terrific works guys I’ve incorporated you guys to
our blogroll.
Nice answer back in return of this issue with firm arguments and explaining everything on the
topic of that.
Excellent pieces. Keep posting such kind of info on your site.
Im really impressed by it.
Hello there, You’ve performed a fantastic job.
I’ll definitely digg it and personally recommend to my friends.
I am confident they will be benefited from this website.
You ought to be a part of a contest for one of the
best sites on the internet. I most certainly will recommend this site!
Currently it seems like Movable Type is the top blogging platform out there right now.
(from what I’ve read) Is that what you are using on your blog?
Greetings! I know this is kind of off topic but I was wondering if you knew where I could find a captcha plugin for my comment form?
I’m using the same blog platform as yours and I’m having
trouble finding one? Thanks a lot!