Mit Lighthouse offenbart Google Webseitenbetreibern Optimierungsvorschläge, um die generelle Leistungsfähigkeit zu erhöhen.
Lighthouse wird von Google als Nachfolger des Pagespeed-Scores kommuniziert und spielt deshalb schon jetzt eine immense Rolle bei der Suchmaschinenplatzierung.
Der Lighthouse-Bericht kann in einem von Googe bereitgestellten Viewer abgerufen werden. Dort sind dann alle erfassten Details sichtbar.
Rote Icons kennzeichnen Optimierungsschritte, die noch nicht optimal ausgenutzt worden sind.
-
done_all
Uses HTTPS
All sites should be protected with HTTPS, even ones that don't handle sensitive data. HTTPS prevents intruders from tampering with or passively listening in on the communications between your app and your users, and is a prerequisite for HTTP/2 and many new web platform APIs. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/https).
-
done_all
Redirects HTTP traffic to HTTPS
If you've already set up HTTPS, make sure that you redirect all HTTP traffic to HTTPS. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http-redirects-to-https).
-
done_all
Has a `<meta name="viewport">` tag with `width` or `initial-scale`
Add a viewport meta tag to optimize your app for mobile screens. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/has-viewport-meta-tag).
-
done_all
Contains some content when JavaScript is not available
Your app should display some content when JavaScript is disabled, even if it's just a warning to the user that JavaScript is required to use the app. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/no-js).
-
error
Erste Inhalte gezeichnet
"Erste Inhalte gezeichnet" gibt an, wann der erste Text oder das erste Bild gezeichnet wird. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/first-contentful-paint).
-
error
Inhalte weitgehend gezeichnet
"Inhalte weitgehend gezeichnet" gibt an, wann die Hauptinhalte einer Seite sichtbar sind. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint).
-
error
Geschwindigkeitsindex
Der Geschwindigkeitsindex zeigt an, wie schnell die Inhalte einer Seite sichtbar dargestellt werden. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/speed-index).
-
error
Geschätzte Eingabelatenz
Bei der geschätzten Eingabelatenz handelt es sich um eine Schätzung dessen, wie viele Millisekunden Ihre App benötigt, um während des 5-s-Fensters mit der stärksten Auslastung beim Seitenaufbau auf Nutzereingaben zu reagieren. Wenn die Latenz bei Ihnen über 50 ms liegt, empfinden Nutzer Ihre App möglicherweise als langsam. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/estimated-input-latency).
-
error
Maximale potenzielle erste Eingabelatenz
Die erste Eingabelatenz, die bei Ihren Nutzern auftreten kann, entspricht der Dauer der längsten Aufgabe in Millisekunden.
-
done_all
Serverantwortzeiten sind niedrig (TTFB)
TTFB (Time To First Byte) erkennt den Zeitpunkt, an dem Ihr Server eine Antwort sendet. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/ttfb).
-
error
Erster CPU-Leerlauf
"Erster CPU-Leerlauf" gibt den Zeitpunkt an, an dem die Aktivität des Hauptthreads der Seite das erste Mal gering genug ist, um Eingaben zu verarbeiten. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/first-interactive).
-
error
Zeit bis Interaktivität
Die Zeit bis Interaktivität entspricht der Zeit, die vergeht, bis die Seite vollständig interaktiv ist. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/consistently-interactive).
-
done_all
Mehrere Weiterleitungen auf die Seite vermeiden
Weiterleitungen führen zu zusätzlichen Verzögerungen, bevor die Seite geladen werden kann. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/redirects).
-
done_all
Web app manifest meets the installability requirements
Browsers can proactively prompt users to add your app to their homescreen, which can lead to higher engagement. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/install-prompt).
-
done_all
Provides a valid `apple-touch-icon`
For ideal appearance on iOS when users add to the home screen, define an apple-touch-icon. It must point to a non-transparent 192px (or 180px) square PNG. [Learn More](https://developers.google.com/web/fundamentals/design-and-ux/browser-customization/).
-
done_all
Displays images with correct aspect ratio
Image display dimensions should match natural aspect ratio. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/aspect-ratio).
-
done_all
Avoids deprecated APIs
Deprecated APIs will eventually be removed from the browser. [Learn more](https://www.chromestatus.com/features#deprecated).
-
error
Aufwand für Hauptthread minimieren
Versuchen Sie, die Zeit für das Parsen, Kompilieren und Ausführen von JS zu reduzieren. Die Bereitstellung kleinerer JS-Nutzlasten kann dabei helfen.
-
error
Ausführungszeit von JavaScript reduzieren
Versuchen Sie, die Zeit für das Parsen, Kompilieren und Ausführen von JS zu reduzieren. Die Bereitstellung kleinerer JS-Nutzlasten kann dabei helfen. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/bootup).
-
done_all
Wichtige Anforderungen vorab laden
Mit <link rel=preload> können Sie das Abrufen von Ressourcen priorisieren, die aktuell später beim Seitenaufbau angefordert werden. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/preload).
-
done
Vorverbindung zu erforderlichen Ursprüngen aufbauen
Versuchen Sie, Hinweise auf Ressourcen für eine Vorverbindung oder einen DNS-Vorabruf hinzuzufügen, damit möglichst frühzeitig eine Verbindung zu wichtigen Drittanbieterursprüngen hergestellt wird. [Weitere Informationen](https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect).
-
done_all
Der gesamte Text bleibt während der Webfont-Ladevorgänge sichtbar
Sie können Gebrauch von der CSS-Funktion "font-display" machen, um sicherzugehen, dass der Text für Nutzer sichtbar ist, während Webfonts geladen werden. [Weitere Informationen](https://developers.google.com/web/updates/2016/02/font-display).
-
done_all
[aria-*]-Attribute entsprechen ihren Rollen
Jede ARIA-Rolle unterstützt eine bestimmte Auswahl an "aria-*"-Attributen. Im Falle einer fehlerhaften Zuordnung werden die "aria-*"-Attribute ungültig. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/aria-allowed-attr?application=lighthouse).
-
done_all
[role]-Elemente weisen alle erforderlichen [aria-*]-Attribute auf
Für einige ARIA-Rollen sind Attribute erforderlich, die Screenreadern den Zustand des Elements beschreiben. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/aria-required-attr?application=lighthouse).
-
done_all
Elemente mit "[role]", die bestimmte untergeordnete Rollen erfordern, sind vorhanden
Einige übergeordnete ARIA-Rollen müssen bestimmte untergeordnete Rollen enthalten, damit sie die beabsichtigten Hilfsfunktionen erfüllen können. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/aria-required-children?application=lighthouse).
-
done_all
[role]-Elemente sind ihren jeweils erforderlichen übergeordneten Elementen untergeordnet
Einige untergeordnete ARIA-Rollen müssen in bestimmten übergeordneten Rollen enthalten sein, damit sie die beabsichtigten Hilfsfunktionen wie vorgesehen erfüllen können. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/aria-required-parent?application=lighthouse).
-
done_all
[role]-Werte sind gültig
Für ARIA-Rollen müssen gültige Werte angegeben sein, damit sie die beabsichtigten Hilfsfunktionen erfüllen können. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/aria-roles?application=lighthouse).
-
done_all
Für [aria-*]`-Attribute sind gültige Werte angegeben
Hilfstechnologien wie Screenreader können ARIA-Attribute mit ungültigen Werten nicht interpretieren. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/aria-valid-attr-value?application=lighthouse).
-
done_all
[aria-*]-Attribute sind gültig und nicht falsch geschrieben
Hilfstechnologien wie Screenreader können ARIA-Attribute mit ungültigen Namen nicht interpretieren. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/aria-valid-attr?application=lighthouse).
-
done_all
Die Namen der Schaltflächen sind für Screenreader zugänglich
Wenn eine Schaltfläche keinen zugänglichen Namen hat, wird sie von Screenreadern als "Schaltfläche" angesagt, was sie für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar macht. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/button-name?application=lighthouse).
-
done_all
Die Seite enthält eine Überschrift, einen Link zum Überspringen oder einen Landmark-Bereich
Wenn Tastaturnutzer sich wiederholende Inhalte überspringen können, sorgt das für eine effizientere Navigation. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/bypass?application=lighthouse).
-
done_all
Das Kontrastverhältnis von Hintergrund- und Vordergrundfarben ist ausreichend
Text mit geringem Kontrast ist für viele Nutzer schlecht oder gar nicht lesbar. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/color-contrast?application=lighthouse).
-
done_all
Dokument verfügt über ein <title>-Element
Anhand des Titels wissen Screenreader-Nutzer, worum es auf der Seite geht, während Nutzer von Suchmaschinen auf der Grundlage des Titels entscheiden, ob eine Seite für ihre Suche relevant ist. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/title).
-
done_all
[id]-Attribute auf der Seite sind eindeutig
Der Wert eines ID-Attributs muss eindeutig sein, damit andere Instanzen nicht von Hilfstechnologien übersehen werden. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/duplicate-id?application=lighthouse).
-
done_all
Für <frame>- oder <iframe>-Elemente ist ein Titel vorhanden
Nutzer von Screenreadern sind auf Frametitel angewiesen, die die Frameinhalte beschreiben. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/frame-title?application=lighthouse).
-
done_all
Für das <html>-Element ist ein [lang]-Attribut angegeben
Wenn auf einer Seite kein "lang"-Attribut angegeben ist, nimmt ein Screenreader an, dass der Text darauf in der Standardsprache ist, die der Nutzer beim Einrichten des Screenreaders ausgewählt hat. Wenn die Sprache aber nicht der Standardsprache entspricht, gibt der Screenreader den Inhalt der Seite möglicherweise falsch aus. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/html-has-lang?application=lighthouse).
-
done_all
Für das [lang]-Attribut des <html>-Elements ist ein gültiger Wert angegeben
Durch Angabe einer gültigen [Sprache gemäß BCP 47](https://www.w3.org/International/questions/qa-choosing-language-tags#question) kann der Text von einem Screenreader korrekt wiedergegeben werden. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/valid-lang?application=lighthouse).
-
done_all
Für Bildelemente sind [alt]-Attribute vorhanden
Informative Elemente sollten einen kurzen, beschreibenden alternativen Text haben. Dekorative Elemente können mit einem leeren ALT-Attribut ignoriert werden. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/image-alt?application=lighthouse).
-
done_all
Listen enthalten nur <li>-Elemente und Elemente zur Skriptunterstützung ("<script>" und "<template>").
Screenreader sagen Listen auf bestimmte Art und Weise an. Eine korrekte Listenstruktur gewährleistet, dass der Screenreader sie richtig ausgibt. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/list?application=lighthouse).
-
done_all
Listenelemente (<li>) befinden sich in übergeordneten <ul>- oder <ol>-Elementen
Listenelemente (<li>) müssen sich in einem übergeordneten <ul>- oder <ol>-Element befinden, damit Screenreader sie richtig ansagen können. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/listitem?application=lighthouse).
-
done_all
"[user-scalable="no"]" wird nicht im <meta name="viewport">-Element verwendet und das [maximum-scale]-Attribut ist nicht kleiner als 5.
Wenn Sie die Zoomfunktion deaktivieren, haben Nutzer mit eingeschränktem Sehvermögen, die auf die Bildschirmvergrößerung angewiesen sind, möglicherweise Probleme dabei, den Inhalt einer Webseite zu sehen. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/meta-viewport?application=lighthouse).
-
done_all
Kein Element hat einen [tabindex]-Wert größer als 0
Ein Wert größer als 0 impliziert eine explizite Navigationsanordnung. Das ist zwar technisch möglich, für Nutzer, die auf Hilfstechnologien angewiesen sind, ist dies jedoch häufig frustrierend. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/tabindex?application=lighthouse).
-
done_all
<video>-Elemente enthalten ein <track>-Element mit "[kind="captions"]"
Bei einem Video mit Untertitel können gehörlose und hörgeschädigte Nutzer einfacher auf die zugehörigen Informationen zugreifen. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/video-caption?application=lighthouse).
-
done_all
<video>-Elemente enthalten ein <track>-Element mit "[kind="description"]"
Audiobeschreibungen enthalten relevante Informationen für Videos, die aus dem Dialog nicht ersichtlich sind, zum Beispiel Gesichtsausdrücke und Schauplätze. [Weitere Informationen](https://dequeuniversity.com/rules/axe/3.1/video-description?application=lighthouse).
-
error
Statische Inhalte mit einer effizienten Cache-Richtlinie bereitstellen
Eine lange Lebensdauer des Cache kann wiederholte Besuche Ihrer Seite beschleunigen. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/cache-policy).
-
error
Sehr große Netzwerknutzlasten vermeiden
Große Netzwerknutzlasten kosten Nutzer bares Geld und hängen eng mit langen Ladezeiten zusammen. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/network-payloads).
-
error
Nicht sichtbare Bilder aufschieben
Versuchen Sie, nicht sichtbare und versteckte Bilder erst laden zu lassen, nachdem wichtige Ressourcen geladen wurden, um die Zeit bis zur Interaktivität zu reduzieren. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/offscreen-images).
-
error
Ressourcen beseitigen, die das Rendering blockieren
Ressourcen blockieren das erste Zeichnen Ihrer Seite. Versuchen Sie, wichtiges JS und wichtige CSS inline bereitzustellen und alle nicht kritischen JS und Stile aufzuschieben. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/blocking-resources).
-
done_all
CSS komprimieren
Durch die Komprimierung von CSS-Dateien kann die Größe von Netzwerknutzlasten reduziert werden. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/minify-css).
-
done_all
JavaScript komprimieren
Durch die Komprimierung von JavaScript-Dateien können Nutzlastgrößen und die Zeit zum Parsen von Skripts reduziert werden. [Weitere Informationen](https://developers.google.com/speed/docs/insights/MinifyResources).
-
error
Nicht verwendete CSS entfernen
Sie können ungültige Regeln aus Stylesheets entfernen und das Laden von CSS aufschieben, die nicht für ohne Scrollen sichtbare Inhalte verwendet werden, um unnötigen Datenverbrauch durch Netzwerkaktivität zu vermeiden. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/unused-css).
-
done
Bilder in modernen Formaten bereitstellen
Bildformate wie JPEG 2000, JPEG XR und WebP bieten oft eine bessere Komprimierung als PNG oder JPEG, was schnellere Downloads und einen geringeren Datenverbrauch ermöglicht. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/webp).
-
done_all
Bilder effizient codieren
Optimierte Bilder werden schneller geladen und verbrauchen weniger mobile Daten. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/optimize-images).
-
done_all
Textkomprimierung aktivieren
Textbasierte Ressourcen sollten mit Komprimierung (gzip, Deflate oder Brotli) bereitgestellt werden, um die Datenmenge im Netzwerk insgesamt zu minimieren. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/text-compression)
-
done_all
Bilder richtig dimensionieren
Stellen Sie Bilder bereit, die eine angemessene Größe haben, um mobile Daten zu sparen und die Ladezeit zu verbessern. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/oversized-images)
-
done_all
Videoformate für animierte Inhalte verwenden
Große GIF-Dateien sind nur bedingt für die Bereitstellung animierter Inhalte geeignet. Sie können statt GIF MPEG4- oder WebM-Videos für Animationen und PNG oder WebP für statische Bilder verwenden und so die Netzwerk-Datenmenge reduzieren. [Weitere Informationen](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/replace-animated-gifs-with-video/)
-
done_all
Avoids Application Cache
Application Cache is deprecated. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/appcache).
-
done_all
Page has the HTML doctype
Specifying a doctype prevents the browser from switching to quirks-mode.Read more on the [MDN Web Docs page](https://developer.mozilla.org/en-US/docs/Glossary/Doctype)
-
error
Übermäßige DOM-Größe vermeiden
Laut der Empfehlung von Browserentwicklern sollten Seiten nicht mehr als ungefähr 1.500 DOM-Elemente enthalten. Die ideale Strukturtiefe liegt bei unter 32 Elementen und weniger als 60 unter- und übergeordneten Elementen. Ein großes DOM kann zu hohem Speicherverbrauch, langwierigen [Stilberechnungen](https://developers.google.com/web/fundamentals/performance/rendering/reduce-the-scope-and-complexity-of-style-calculations) und kostspieligen [dynamischen Umbrüchen im Layout](https://developers.google.com/speed/articles/reflow) führen. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/dom-size).
-
done_all
Avoids requesting the geolocation permission on page load
Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to user gestures instead. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/geolocation-on-load).
-
done_all
Avoids `document.write()`
For users on slow connections, external scripts dynamically injected via `document.write()` can delay page load by tens of seconds. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/document-write).
-
done_all
Avoids front-end JavaScript libraries with known security vulnerabilities
Some third-party scripts may contain known security vulnerabilities that are easily identified and exploited by attackers. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/vulnerabilities).
-
done_all
Detected JavaScript libraries
All front-end JavaScript libraries detected on the page.
-
done_all
Avoids requesting the notification permission on page load
Users are mistrustful of or confused by sites that request to send notifications without context. Consider tying the request to user gestures instead. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/notifications-on-load).
-
done_all
Allows users to paste into password fields
Preventing password pasting undermines good security policy. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/password-pasting).
-
done_all
Uses HTTP/2 for its own resources
HTTP/2 offers many benefits over HTTP/1.1, including binary headers, multiplexing, and server push. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/http2).
-
done_all
Uses passive listeners to improve scrolling performance
Consider marking your touch and wheel event listeners as `passive` to improve your page's scroll performance. [Learn more](https://developers.google.com/web/tools/lighthouse/audits/passive-event-listeners).
-
done_all
Dokument enthält eine Meta-Beschreibung
Meta-Beschreibungen können in die Suchergebnisse aufgenommen werden, um die Seiteninhalte kurz zusammenzufassen. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/description).
-
done_all
Seite hat einen gültigen HTTP-Statuscode
Seiten mit ungültigen HTTP-Statuscodes werden möglicherweise nicht richtig indexiert. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/successful-http-code).
-
done_all
Dokument enthält gut lesbare Schriftgrößen
Schriftgrößen von weniger als 12 px sind zu klein und deshalb nicht gut lesbar, sodass Nutzer von Mobilgeräten den Text per Fingerbewegung heranzoomen müssen. Mindestens 60 % des Texts auf der Seite sollten deshalb eine Schriftgröße von mindestens 12 px haben. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/font-sizes).
-
done_all
Links haben beschreibenden Text
Mit beschreibendem Linktext können Suchmaschinen Ihre Inhalte besser verstehen. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text).
-
done_all
Seite ist nicht von Indexierung ausgeschlossen
Suchmaschinen können Ihre Seiten nicht in die Suchergebnisse aufnehmen, wenn sie nicht dazu berechtigt sind, sie zu crawlen. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/indexing).
-
done_all
robots.txt ist gültig
Wenn Ihre robots.txt-Datei fehlerhaft ist, können Crawler möglicherweise nicht nachvollziehen, wie Ihre Website gecrawlt oder indexiert werden soll.
-
done_all
Größe von Tippzielen ist richtig eingestellt
Interaktive Elemente wie Schaltflächen und Links sollten groß genug sein (48 x 48 px) und genügend Platz um sich herum haben, um einfach angetippt werden zu können. Dabei sollten sie sich aber nicht mit anderen Elementen überschneiden. [Weitere Informationen](https://developers.google.com/web/fundamentals/accessibility/accessible-styles#multi-device_responsive_design).
-
done_all
Dokument enthält ein gültiges "hreflang"-Element
Anhand von "hreflang"-Links können Suchmaschinen ermitteln, welche Version einer Seite sie in den Suchergebnissen für eine bestimmte Sprache oder Region anzeigen sollen. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/hreflang).
-
done_all
Dokument verwendet keine Plug-ins
Suchmaschinen können keine Plug-in-Inhalte indexieren und auf vielen Geräten werden Plug-ins eingeschränkt oder nicht unterstützt. [Weitere Informationen](https://developers.google.com/web/tools/lighthouse/audits/plugins).
