Was hier zu sehen ist
Das ist die vollständige Ausgabe eines echten PageSpeed-Insights/Lighthouse-Laufs, wie er bei jedem KIT-Würfel-Audit für die Dimension „Ladezeit" (Seite 5 der 48-Bausteine-Prüfspezifikation) verwendet wird. Als Beispiel dient die eigene Kandlen-IT-Website. Keine Zusammenfassung, keine Ampel — alle Rohwerte.
Gemessen über die offizielle Google-PageSpeed-API, je einmal für Mobil- und Desktop-Auslieferung. Ein Lauf ist eine Momentaufnahme — Werte schwanken je nach Tageszeit/Serverlast leicht, das ist bei Lighthouse-Messungen normal.
Komplette Rohdaten als JSON herunterladen (2 MB)Titel und Beschreibung je Audit kommen direkt von Google (offizielle Lokalisierung, per Umschalter oben Deutsch/English) — die „Warum + Lösung"-Kästen bei auffälligen Prüfungen sind unsere eigene Analyse zu kandlen-it.de, immer auf Deutsch.
Wie die Werte einzuordnen sind
Jede Zahl unten hat eine eigene Erklärung, was sie misst — bei den Metriken direkt darunter, bei den Opportunities in der Karte davor. Die Farbe folgt überall derselben Regel, wie Lighthouse selbst bewertet:
gut — Score ≥ 90 (bzw. ≥ 0,9)
verbesserungswürdig — 50–89 (0,5–0,89)
schlecht — unter 50 (0,5)
Scores — Mobil
90
Leistung
100
Barrierefreiheit
100
Best Practices
Allgemeine Web-Standards: HTTPS, keine Konsolen-Fehler, aktuelle/sichere Bibliotheken.
100
SEO
Technische Grundlagen für Suchmaschinen: Meta-Tags vorhanden, Seite crawlbar, mobilfreundlich.
Alle Metriken (komplett, ungekürzt) — mit Erklärung
|
First Contentful Paint
Wie lange es dauert, bis der erste Inhalt (Text oder Bild) überhaupt sichtbar wird — der erste Eindruck, dass „sich etwas tut".
|
2,0 s | |
|
Largest Contentful Paint
Wann das größte sichtbare Element (meist Hauptbild oder Überschrift) fertig geladen ist. Offizieller Google-Web-Vital, fließt ins Suchmaschinen-Ranking ein. Richtwert: unter 2,5 s.
|
3,0 s | |
|
Total Blocking Time
Wie lange JavaScript den Hauptthread blockiert, sodass Klicks/Eingaben nicht sofort reagieren. Je höher, desto „hakeliger" fühlt sich die Seite an. Richtwert: unter 200 ms.
|
0 ms | |
|
Cumulative Layout Shift
Wie stark sich Elemente während des Ladens ungewollt verschieben (z. B. Text springt, weil ein Bild nachträglich Platz beansprucht). Ebenfalls ein Google-Web-Vital. Richtwert: unter 0,1.
|
0,001 | |
|
Speed Index
Wie schnell sich der sichtbare Seiteninhalt über die Zeit füllt — visuelle Analyse des gesamten Ladeverlaufs, keine einzelne Marke. Richtwert: unter 3,4 s.
|
4,7 s | |
|
Time to Interactive
Ab wann die Seite zuverlässig auf Eingaben reagiert, also keine langen blockierenden Skripte mehr laufen. Richtwert: unter 3,8 s.
|
3,0 s | |
|
Kurze Erstreaktionszeit des Servers
Wie schnell der Server auf die allererste Anfrage antwortet, bevor der Browser überhaupt mit dem Rendern anfängt (Time to First Byte). Richtwert: unter 600 ms.
|
Stammdokument brauchte 10 ms |
Verbesserungsvorschläge (Opportunities)
Konkrete, von Lighthouse gefundene Stellschrauben — mit der geschätzten Zeit, die eine Behebung an Ladezeit einsparen würde. Sortiert nach Wirkung, größter Hebel zuerst.
- Mehrere Weiterleitungen auf die Seite vermeiden 780 ms
- Reduziere nicht verwendete CSS 0 ms
- JavaScript komprimieren 0 ms
- CSS komprimieren 0 ms
Alle Audits — komplett, alle 153 aus allen 4 Kategorien (Mobil)
Das ist die vollständige Rohantwort der PageSpeed-API, ungekürzt — jede einzelne Prüfung, die Lighthouse durchführt, mit Original-Beschreibung, was sie genau prüft.
Performance — 47 Audits
|
First Contentful Paint
„First Contentful Paint“ gibt an, wann der erste Text oder das erste Bild gerendert wird. Weitere Informationen zum Messwert „First Contentful Paint“.
Warum bei kandlen-it.de: 2,0 s bis zum ersten sichtbaren Inhalt, knapp über dem Richtwert von 1,8 s. Ursache: der Browser muss erst mehrere render-blockierende CSS-Dateien laden, bevor er überhaupt zu zeichnen beginnt (siehe „Ressourcen, die das Rendering blockieren" unten).
Wie lösen: Kritisches CSS für den sichtbaren Bereich inline in den Seitenkopf setzen, den Rest asynchron nachladen.
|
2,0 s teilweise
|
|
|
Largest Contentful Paint
„Largest Contentful Paint“ gibt an, wie lange das Rendern des größten Textblocks oder Bildelements dauert. Weitere Informationen zum Messwert „Largest Contentful Paint“
Warum bei kandlen-it.de: Die Serverantwort ist mit 21 ms sehr schnell — der eigentliche Verzug (4,2 s) entsteht danach: das größte Element (der Hero-Text) wartet auf das Rendering, weil vorher blockierendes CSS geladen werden muss.
Wie lösen: Render-blockierendes CSS reduzieren (siehe unten), damit der Hero-Bereich früher gezeichnet werden kann.
|
3,0 s teilweise
|
|
|
Total Blocking Time
Summe aller Zeiträume (in Millisekunden) zwischen FCP und „Zeit bis Interaktivität“, wenn die Aufgabendauer 50 ms überschreitet. Weitere Informationen zum Messwert „Gesamte Blockierzeit“.
|
0 ms bestanden
|
|
|
Cumulative Layout Shift
„Cumulative Layout Shift“ misst die Bewegung sichtbarer Elemente innerhalb des Darstellungsbereichs. Weitere Informationen zum Messwert „Cumulative Layout Shift“.
|
0,001 bestanden
|
|
|
Speed Index
Der Speed Index gibt an, wie schnell die Inhalte einer Seite sichtbar dargestellt werden. Weitere Informationen zum Messwert „Speed Index“.
Warum bei kandlen-it.de: Mit 6,7 s deutlich über dem Richtwert von 3,4 s. Hängt direkt an denselben Ursachen wie FCP/LCP — die Seite füllt sich sichtbar langsam, weil zentrale Styles blockierend nachgeladen werden.
Wie lösen: Gleiche Lösung wie First/Largest Contentful Paint: render-blockierendes CSS auflösen.
|
4,7 s teilweise
|
|
|
Effiziente Verweildauer im Cache verwenden
Eine lange Verweildauer im Cache kann wiederholte Besuche deiner Seite beschleunigen. Weitere Informationen zum Caching
Warum bei kandlen-it.de: 16 statische Dateien (CSS, Web-Fonts, JS) sind nur 7 Tage cachebar, obwohl sie über „?ver="-Parameter versioniert sind und sich zwischen Deployments nicht ändern — z. B. style.css, TitilliumWeb-400/600/700.woff2, wuerfel.js.
Wie lösen: Cache-Control max-age für versionierte, statische Assets auf ein Jahr hochsetzen (das Cache-Busting über „?ver=" macht das gefahrlos — neue Version = neue URL).
|
Geschätzte Einsparung von 10 KiB teilweise
|
|
|
Verursacher von Layout Shifts
Layout Shifts treten auf, wenn sich Elemente ohne Nutzerinteraktion bewegen. Untersuche die Ursachen von Layout Shifts, beispielsweise Elemente, die hinzugefügt oder entfernt werden oder deren Schriftart sich beim Laden der Seite ändert.
|
informativ
|
|
|
Latenz der Dokumentanfrage
Deine erste Netzwerkanfrage ist die wichtigste. Verringere ihre Latenz, indem du Weiterleitungen vermeidest, eine schnelle Serverantwort sicherstellst und die Textkomprimierung aktivierst.
Warum bei kandlen-it.de: Server antwortet schnell (21 ms) und liefert komprimiert aus — aber 1 Weiterleitung kostet zusätzlich 3,6 s, bevor überhaupt geladen wird (siehe „Mehrere Weiterleitungen" unten).
Wie lösen: Identisch mit dem Redirects-Punkt: die Weiterleitung kandlen-it.de → www.kandlen-it.de vermeiden bzw. verkürzen.
|
Geschätzte Einsparung von 1.240 ms nicht bestanden
|
|
|
DOM-Größe optimieren
Ein großes DOM kann die Dauer von Stilberechnungen und dynamischen Umbrüchen im Layout verlängern und sich so auf die Reaktionsfähigkeit der Seite auswirken. Ein großes DOM führt auch zu einer höheren Arbeitsspeichernutzung. Informationen zum Vermeiden eines zu großen DOMs
|
informativ
|
|
|
Dupliziertes JavaScript
Du kannst große, doppelt vorhandene JavaScript-Module aus Bundles entfernen, um unnötige Datenübertragungen im Netzwerk zu reduzieren.
|
bestanden
|
|
|
Schriftart-Anzeige
Du kannst font-display auf „swap“ oder „optional“ setzen, damit der Text immer sichtbar ist. „swap“ kann weiter optimiert werden, um Layout Shifts durch Überschreibungen von Messwerten zur Schriftart zu reduzieren.
|
bestanden
|
|
|
Erzwungener dynamischer Umbruch
Ein erzwungener dynamischer Umbruch tritt auf, wenn JavaScript geometrische Eigenschaften (z. B. offsetWidth) abfragt, nachdem Stile durch eine Änderung des DOM-Status ungültig geworden sind. Dies kann zu einer schlechten Leistung führen. Weitere Informationen zu erzwungenen dynamischen Umbrüchen und möglichen Abhilfemaßnahmen.
|
bestanden
|
|
|
Bildübermittlung verbessern
Wenn du die Downloadzeit von Bildern reduzierst, kannst du die wahrgenommene Ladezeit der Seite und den LCP verbessern. Weitere Informationen zur Optimierung der Bildgröße
Warum bei kandlen-it.de: Das Hero-Bild „kandlen-system.webp" wird mit 900×900 px ausgeliefert, im Layout aber nur mit 450×450 bzw. effektiv 679×679 px dargestellt — 72 KB werden durch die falsche Auflösung verschenkt, weitere 32 KB durch zu geringe Kompression.
Wie lösen: Bild in der tatsächlich benötigten Größe exportieren bzw. srcset mit passenden Zwischengrößen anbieten, Kompressionsfaktor erhöhen.
|
Geschätzte Einsparung von 88 KiB nicht bestanden
|
|
|
INP-Aufschlüsselung
Sieh dir den längsten Unterabschnitt an, um Informationen dazu zu erhalten, wie du den INP verbessern kannst.
|
nicht anwendbar
|
|
|
LCP-Aufschlüsselung
Für jeden Unterabschnitt gibt es spezifische Verbesserungsstrategien. Idealerweise sollte der Großteil der LCP-Zeit für das Laden der Ressourcen und nicht für Verzögerungen aufgewendet werden.
Warum bei kandlen-it.de: Bestätigt die LCP-Ursache im Detail: „Time to first byte" nur 21 ms, aber „Element render delay" 4.165 ms — fast die komplette Zeit geht durchs Warten auf render-blockierendes CSS drauf, nicht durch den Server.
Wie lösen: Siehe Largest Contentful Paint oben — render-blockierendes CSS auflösen.
|
nicht bestanden
|
|
|
LCP-Anfrageerkennung
Wenn du den LCP optimieren möchtest, mache das LCP-Bild im HTML-Code direkt sichtbar und vermeide Lazy Loading
|
nicht anwendbar
|
|
|
Veraltetes JavaScript
Dank Polyfills und Transformationen können ältere Browser die neuen JavaScript-Funktionen nutzen. Bei modernen Browsern hingegen sind viele davon nicht erforderlich. Du solltest den Build-Prozess deines JavaScripts so anpassen, dass Baseline-Funktionen nicht transpiliert werden, es sei denn, du weißt, dass du ältere Browser unterstützen musst. Hier erfährst du, warum die meisten Websites ES6+ Code ohne Transpilierung bereitstellen können
|
bestanden
|
|
|
Netzwerkabhängigkeitsbaum
Vermeide die Verkettung kritischer Anfragen, indem du die Ketten verkürzt, die Downloadgröße von Ressourcen reduzierst oder das Herunterladen unnötiger Ressourcen zurückstellst, um den Seitenaufbau zu beschleunigen.
Warum bei kandlen-it.de: Die Ladekette zeigt: die Startseite lädt style.css nach, das wiederum eine Web-Font-Datei nachlädt — eine verschachtelte Kette von 4,2 s für die längste Abhängigkeit. Kein Preconnect nötig, da alles von der eigenen Domain kommt.
Wie lösen: Verschachtelung verkürzen: Fonts nicht über einen Umweg durchs CSS, sondern direkt im HTML-Kopf per <link rel="preload"> ankündigen.
|
nicht bestanden
|
|
|
Anfragen zum Blockieren des Renderings
Anfragen blockieren das erste Rendering der Seite, was den LCP verzögern kann. Durch das Verschieben oder Einfügen können diese Netzwerkanfragen aus dem kritischen Pfad entfernt werden.
Warum bei kandlen-it.de: Vier CSS-Dateien blockieren das Rendering: style.css (751 ms), kit-a11y/frontend.css (151 ms), wuerfel-neu.css (451 ms) und wuerfel.css (451 ms). Auffällig: wuerfel.css und wuerfel-neu.css werden beide geladen — möglicherweise eine Altlast.
Wie lösen: Kritisches CSS inline setzen, Rest per media="print" onload-Trick oder defer nachladen. Zusätzlich prüfen, ob wuerfel.css neben wuerfel-neu.css noch gebraucht wird.
|
Geschätzte Einsparung von 830 ms nicht bestanden
|
|
|
Drittanbieter
Code von Drittanbietern kann die Ladegeschwindigkeit erheblich beeinträchtigen. Reduziere Drittanbietercode und stelle den Ladevorgang zurück, um die Inhalte deiner Seite zu priorisieren.
|
bestanden
|
|
|
Darstellungsbereich für Mobilgeräte optimieren
Bei Interaktionen durch Tippen kann es zu einer Verzögerung von bis zu 300 ms kommen, wenn der Darstellungsbereich nicht für Mobilgeräte optimiert ist.
|
bestanden
|
|
|
Time to Interactive
„Zeit bis Interaktivität“ entspricht der Zeit, die vergeht, bis die Seite vollständig interaktiv ist. Weitere Informationen zum Messwert „Zeit bis Interaktivität“.
|
3,0 s bestanden
|
|
|
Maximaler potenzieller First Input Delay
Das maximale potenzielle First Input Delay, das bei deinen Nutzern auftreten kann, entspricht der Dauer der längsten Aufgabe. Weitere Informationen zum Messwert „Maximales potenzielles First Input Delay“.
|
30 ms bestanden
|
|
|
CSS komprimieren
Durch das Reduzieren von CSS-Dateien lassen sich Netzwerknutzlasten senken. Informationen zum Reduzieren von CSS.
Warum bei kandlen-it.de: style.css: 43,5 % Einsparung möglich (8,2 von 18,9 KB), wuerfel-neu.css: 45,5 % (2,8 von 6,1 KB) — beides unkomprimierter Whitespace/Kommentare aus der Theme-Entwicklung.
Wie lösen: CSS-Minifizierung in den Build-Prozess des WordPress-Themes „kit-kandlen-theme" einbauen (z. B. beim Speichern automatisch minifizierte Version ausliefern).
|
Geschätzte Einsparung von 11 KiB teilweise
|
|
|
JavaScript komprimieren
Durch die Komprimierung von JavaScript-Dateien können Nutzlastgrößen und die Zeit zum Parsen von Skripts reduziert werden. Informationen zum Reduzieren von JavaScript.
Warum bei kandlen-it.de: wuerfel-neu.js: 44 % Einsparung möglich (2,3 von 5,3 KB) durch fehlende Minifizierung.
Wie lösen: Gleiche Build-Pipeline wie bei CSS für JavaScript-Dateien einrichten.
|
Geschätzte Einsparung von 2 KiB teilweise
|
|
|
Reduziere nicht verwendete CSS
Du kannst ungültige Regeln in Stylesheets reduzieren und CSS-Code zurückstellen, der nicht für ohne Scrollen sichtbare Inhalte („above the fold“) verwendet wird, um den Datenverbrauch durch Netzwerkaktivität zu senken. Informationen zum Reduzieren von nicht verwendetem CSS-Code.
Warum bei kandlen-it.de: style.css: 58,8 % der geladenen Regeln (10,7 von 18,3 KB) werden auf der Startseite gar nicht angewendet — Regeln für andere Seiten/Komponenten werden immer mitgeladen.
Wie lösen: CSS pro Seitentyp aufteilen oder mit einem Tool wie PurgeCSS im Theme-Build nur die tatsächlich genutzten Regeln ausliefern.
|
Geschätzte Einsparung von 10 KiB teilweise
|
|
|
Reduziere nicht verwendetes JavaScript
Um den Datenverbrauch durch Netzwerkaktivität zu senken, kannst du nicht verwendetes JavaScript reduzieren und das Laden von Skripts zurückstellen, bis sie benötigt werden. Informationen zum Reduzieren von nicht verwendetem JavaScript.
|
bestanden
|
|
|
Vermeidet sehr große Netzwerknutzlasten
Große Netzwerknutzlasten kosten Nutzer bares Geld und hängen eng mit langen Ladezeiten zusammen. Informationen zum Verringern der Nutzlastgröße.
|
Die Gesamtgröße war 303 KiB bestanden
|
|
|
Markierungen und Messungen für das Nutzertiming
Du kannst die User Timing API in deine App einbinden. Damit lässt sich die Leistung der App während wichtiger Nutzerinteraktionen in der Praxis messen. Weitere Informationen zu User Timing-Markierungen.
|
nicht anwendbar
|
|
|
JavaScript-Ausführungszeit
Versuche, die Zeit für das Parsen, Kompilieren und Ausführen von JavaScript zu reduzieren. Die Bereitstellung kleinerer JS-Nutzlasten kann dabei helfen. Informationen zum Reduzieren der JavaScript-Ausführungszeit.
|
0,0 s bestanden
|
|
|
Minimiert den Aufwand für den Hauptthread
Versuche, die Zeit für das Parsen, Kompilieren und Ausführen von JavaScript zu reduzieren. Die Bereitstellung kleinerer JS-Nutzlasten kann dabei helfen. Informationen dazu, wie sich der Aufwand für den Hauptthread minimieren lässt
|
0,3 s bestanden
|
|
|
Lange Hauptthread-Aufgaben vermeiden
Listet die längsten Aufgaben im Hauptthread auf. Das ist nützlich, um die wichtigsten Ursachen für die Eingabeverzögerungen zu ermitteln. Informationen dazu, wie sich lange Aufgaben im Hauptthread vermeiden lassen
|
1 lange Aufgabe gefunden informativ
|
|
|
Nicht zusammengesetzte Animationen vermeiden
Nicht zusammengesetzte Animationen werden eventuell nicht richtig gerendert und können den CLS-Wert erhöhen. Informationen dazu, wie sich nicht zusammengefasste Animationen vermeiden lassen
|
nicht anwendbar
|
|
|
Bildelemente haben eine explizite `width` und `height`
Lege eine explizite Breite und Höhe für Bildelemente fest, um Layoutverschiebungen zu reduzieren und den CLS-Wert zu verbessern. Informationen zum Festlegen von Bildabmessungen
|
bestanden
|
|
|
Network Requests
Lists the network requests that were made during page load.
|
informativ
|
|
|
Netzwerk-Umlaufzeit
Die Netzwerk-Umlaufzeit (Round Trip Time, RTT) hat großen Einfluss auf die Leistung. Wenn die RTT zu einem Ursprung hoch ausfällt, weist dies darauf hin, dass die Leistung mit Servern, die sich näher beim Nutzer befinden, verbessert werden kann. Weitere Informationen zur Umlaufzeit.
|
0 ms informativ
|
|
|
Server-Backend-Latenzen
Serverlatenzen können sich auf die Leistung im Web auswirken. Wenn die Serverlatenz eines Ursprungs hoch ist, weist dies darauf hin, dass der Server überlastet ist oder eine schlechte Backend-Leistung bietet. Weitere Informationen zur Serverantwortzeit.
|
0 ms informativ
|
|
|
Tasks
Lists the toplevel main thread tasks that executed during page load.
|
informativ
|
|
|
Diagnostics
Collection of useful page vitals.
|
informativ
|
|
|
Metrics
Collects all available metrics.
|
informativ
|
|
|
Screenshot Thumbnails
This is what the load of your site looked like.
|
informativ
|
|
|
Final Screenshot
The last screenshot captured of the pageload.
|
informativ
|
|
|
Script Treemap Data
Used for treemap app
|
informativ
|
|
|
Resources Summary
Aggregates all network requests and groups them by type
|
informativ
|
|
|
Mehrere Weiterleitungen auf die Seite vermeiden
Weiterleitungen führen zu zusätzlichen Verzögerungen, bevor die Seite geladen werden kann. Informationen zum Vermeiden von Seitenweiterleitungen.
Warum bei kandlen-it.de: https://kandlen-it.de/ (ohne www) leitet auf https://www.kandlen-it.de/ weiter — kostet 780 ms, bevor überhaupt mit dem Laden begonnen wird.
Wie lösen: Intern und in Marketing-Links immer direkt auf www.kandlen-it.de verweisen; die Weiterleitung serverseitig so kurz wie möglich halten (301, keine Zwischenstationen).
|
Geschätzte Einsparung von 780 ms nicht bestanden
|
|
|
Kurze Erstreaktionszeit des Servers
Achte auf eine möglichst kurze Serverantwortzeit für das Hauptdokument, weil alle anderen Anfragen davon abhängen. Weitere Informationen zum Messwert „Time to First Byte“.
|
Stammdokument brauchte 10 ms bestanden
|
|
|
Umfangreiche Layoutverschiebungen vermeiden
Dies sind die größten Layout Shifts auf der Seite. Jedes Tabellenelement stellt einen einzelnen Layout Shift dar und zeigt das Element mit der größten Verschiebung. Unter jedem Element sind mögliche Ursachen aufgeführt, die zu einem Layout Shift geführt haben. Einige dieser Layout Shifts sind aufgrund von Windowing möglicherweise nicht im CLS-Messwert enthalten. Informationen zur Verbesserung der CLS
|
1 Layout Shift gefunden informativ
|
Accessibility — 76 Audits
|
`[accesskey]`-Werte sind eindeutig
Mithilfe von Tastenkombinationen können Nutzer schnell den Fokus auf einen Bereich der Seite verschieben. Damit die Navigation richtig funktioniert, darf jede Tastenkombination nur einmal vergeben sein. Weitere Informationen zu Tastenkombinationen.
|
nicht anwendbar
|
|
|
`[aria-*]`-Attribute entsprechen ihren Rollen
Jede ARIA-
role unterstützt eine bestimmte Untergruppe von aria-*-Attributen. Wenn sie jedoch falsch zugeordnet sind, werden die aria-*-Attribute ungültig. Informationen zum Zuordnen von ARIA-Attributen zu ihren Rollen. |
bestanden
|
|
|
`button`-, `link`- und `menuitem`-Elemente haben zugängliche Namen
Wenn ein Element keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Informationen zum barrierefreieren Gestalten von Befehlselementen.
|
nicht anwendbar
|
|
|
ARIA-Attribute werden wie angegeben für die Rolle des Elements verwendet
Einige ARIA-Attribute sind nur unter bestimmten Umständen für ein Element zulässig. Weitere Informationen zu bedingten ARIA-Attributen.
|
bestanden
|
|
|
Es wurden keine verworfenen ARIA-Rollen verwendet
Verworfene ARIA-Rollen werden möglicherweise nicht richtig von Hilfstechnologien verarbeitet. Weitere Informationen zu verworfenen ARIA-Rollen.
|
bestanden
|
|
|
Elemente mit `role="dialog"` oder `role="alertdialog"` haben barrierefreie Namen.
ARIA-Dialogelemente ohne barrierefreie Namen können Nutzer von Screenreadern daran hindern, den Zweck dieser Elemente zu erkennen. Informationen zum Verbessern der Barrierefreiheit von ARIA-Dialogelementen
|
nicht anwendbar
|
|
|
`[aria-hidden="true"]` ist in dem Dokument `<body>` nicht vorhanden
Hilfstechnologien wie Screenreader funktionieren nicht richtig, wenn für den
<body> des Dokuments aria-hidden="true" festgelegt ist. Informationen zu den Auswirkungen von aria-hidden auf den Textbereich des Dokuments. |
bestanden
|
|
|
`[aria-hidden="true"]`-Elemente enthalten keine fokussierbaren Unterelemente
Fokussierbare Nachfolgerelemente in einem
[aria-hidden="true"]-Element führen dazu, dass Nutzer von Hilfstechnologien wie Screenreadern solche interaktiven Elemente nicht verwenden können. Informationen zu den Auswirkungen von aria-hidden auf fokussierbare Elemente. |
bestanden
|
|
|
ARIA-Eingabefelder haben zugängliche Namen
Wenn ein Eingabefeld keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Weitere Informationen zu Labels für Eingabefelder.
|
nicht anwendbar
|
|
|
ARIA `meter`-Elemente haben zugängliche Namen
Wenn ein Messtool-Element keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Weitere Informationen zum Benennen von
meter-Elementen |
nicht anwendbar
|
|
|
ARIA `progressbar`-Elemente haben zugängliche Namen
Wenn ein
progressbar-Element keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Informationen zum Kennzeichnen von progressbar-Elementen. |
nicht anwendbar
|
|
|
Elemente verwenden nur zulässige ARIA-Attribute
Die Verwendung von ARIA-Attributen in Rollen, für die sie nicht zulässig sind, kann bedeuten, dass wichtige Informationen nicht an Nutzer von Hilfstechnologien weitergegeben werden. Weitere Informationen zu unzulässigen ARIA-Rollen
|
bestanden
|
|
|
`[role]`-Elemente verfügen über alle erforderlichen `[aria-*]`-Attribute
Für einige ARIA-Rollen sind Attribute erforderlich, die Screenreadern den Zustand des Elements beschreiben. Weitere Informationen zu Rollen und erforderlichen Attributen.
|
bestanden
|
|
|
Die Elemente mit einer ARIA-`[role]`, deren untergeordnete Elemente eine bestimmte `[role]` enthalten müssen, haben alle erforderlichen untergeordneten Elemente.
Einige übergeordnete ARIA-Rollen müssen bestimmte untergeordnete Rollen enthalten, damit sie die beabsichtigten Hilfsfunktionen erfüllen können. Weitere Informationen zu Rollen und erforderlichen untergeordneten Elementen.
|
nicht anwendbar
|
|
|
`[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 erfüllen können. Weitere Informationen zu ARIA-Rollen und erforderlichen übergeordneten Elementen.
|
nicht anwendbar
|
|
|
`[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 zu gültigen ARIA-Rollen.
|
bestanden
|
|
|
Elemente mit dem Attribut „`role=text`“ haben keine fokussierbaren Nachfolgerelemente.
Wenn du einen Textknoten, der durch Markup aufgeteilt ist, mit
role=text auszeichnest, kann VoiceOver diesen als eine Wortgruppe behandeln. Die fokussierbaren Nachfolgerelemente des Elements werden jedoch nicht angesagt. Weitere Informationen zum Attribut role=text |
nicht anwendbar
|
|
|
ARIA-Ein/Aus-Buttons haben zugängliche Namen
Wenn ein Ein-/Aus-Button keinen barrierefreien Namen hat, wird sie von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist sie für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Weitere Informationen zu Ein-/Aus-Buttons.
|
nicht anwendbar
|
|
|
ARIA `tooltip`-Elemente haben zugängliche Namen
Wenn ein Kurzinfo-Element keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Weitere Informationen zum Benennen von
tooltip-Elementen |
nicht anwendbar
|
|
|
ARIA `treeitem`-Elemente haben zugängliche Namen
Wenn ein
treeitem-Element keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Weitere Informationen zum Kennzeichnen von treeitem-Elementen. |
nicht anwendbar
|
|
|
`[aria-*]`-Attribute weisen gültige Werte auf
Hilfstechnologien wie Screenreader können ARIA-Attribute mit ungültigen Werten nicht interpretieren. Weitere Informationen zu gültigen Werten für ARIA-Attribute.
|
bestanden
|
|
|
`[aria-*]`-Attribute sind gültig und richtig geschrieben
Hilfstechnologien wie Screenreader können ARIA-Attribute mit ungültigen Namen nicht interpretieren. Weitere Informationen zu gültigen ARIA-Attributen.
|
bestanden
|
|
|
Die Namen der Buttons sind für Screenreader zugänglich
Wenn ein Button keinen barrierefreien Namen hat, wird sie von Screenreadern nur als „Button“ angesagt. Dadurch ist sie für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Informationen zum barrierefreien Gestalten von Buttons.
|
bestanden
|
|
|
Die Seite enthält eine Überschrift, einen Link zum Überspringen oder einen Landmark-Bereich
Wenn Tastaturnutzer Inhalte umgehen können, die sich wiederholen, sorgt das für eine effizientere Navigation. Weitere Informationen zum Umgehen von Blockierungen.
|
nicht anwendbar
|
|
|
Das Kontrastverhältnis von Hintergrund- und Vordergrundfarben ist ausreichend
Text mit geringem Kontrast ist für viele Nutzer schlecht oder gar nicht lesbar. Informationen zu einem ausreichenden Farbkontrast.
|
bestanden
|
|
|
`<dl>`-Elemente enthalten ausschließlich Gruppen aus `<dt>`- und `<dd>`-Elementen sowie `<script>`-, `<template>`- oder `<div>`-Elemente, die richtig angeordnet sind.
Wenn Definitionslisten nicht korrekt mit Markup versehen sind, kann es zu verwirrenden oder ungenauen Screenreader-Ausgaben kommen. Informationen zum Strukturieren von Definitionslisten.
|
nicht anwendbar
|
|
|
Definitionslistenelemente sind in `<dl>`-Elemente eingefasst
Definitionslistenelemente (
<dt> und <dd>) müssen in ein übergeordnetes <dl>-Element eingefasst sein, damit sie von Screenreadern richtig angesagt werden können. Informationen zum Strukturieren von Definitionslisten. |
nicht anwendbar
|
|
|
Dokument enthält ein `<title>`-Element
Der Titel gibt Screenreader-Nutzern einen Überblick über die Seite. Nutzer von Suchmaschinen verlassen sich stark auf ihn, um zu entscheiden, ob eine Seite für ihre Suche relevant ist. Weitere Informationen zu Dokumenttiteln.
|
bestanden
|
|
|
ARIA-IDs sind eindeutig
Der Wert einer ARIA-ID muss eindeutig sein, damit andere Instanzen nicht von Hilfstechnologien übersehen werden. Informationen zum Korrigieren doppelter ARIA-IDs.
|
nicht anwendbar
|
|
|
Kein Formularfeld hat mehrere Labels
Formularfelder mit mehreren Labels werden von Hilfstechnologien wie Screenreadern unter Umständen missverständlich angesagt, da sie entweder das erste, das letzte oder alle Labels verwenden. Informationen zur Verwendung von Formularlabels.
|
nicht anwendbar
|
|
|
`<frame>`- oder `<iframe>`-Elemente verfügen über einen Titel
Screenreader-Nutzer sind auf Frametitel angewiesen, die die Inhalte von Frames beschreiben. Weitere Informationen zu Frametiteln.
|
nicht anwendbar
|
|
|
Überschriftenelemente werden in einer fortlaufenden absteigenden Reihenfolge angezeigt
Richtig geordnete Überschriften, die keine Ebenen überspringen, geben der Seite eine semantische Struktur. Nutzer von Hilfstechnologien können sich so leichter auf der Seite zurechtfinden und die Inhalte besser verstehen. Weitere Informationen zur Reihenfolge von Überschriften.
|
bestanden
|
|
|
`<html>`-Element hat ein `[lang]`-Attribut
Wenn für eine Seite kein
lang-Attribut angegeben ist, nehmen Screenreader an, dass sie in der Standardsprache vorliegt, die der Nutzer beim Einrichten des Screenreaders ausgewählt hat. Ist das nicht der Fall, gibt der Screenreader den Inhalt der Seite möglicherweise falsch aus. Weitere Informationen zum lang-Attribut. |
bestanden
|
|
|
Das `<html>`-Element hat einen gültigen Wert für sein `[lang]`-Attribut
Wenn ein gültiger BCP-47-Sprachcode angegeben wird, kann der Text von einem Screenreader korrekt wiedergegeben werden. Informationen zur Verwendung des Attributs
lang. |
bestanden
|
|
|
Das `<html>`-Element hat ein `[xml:lang]`-Attribut mit derselben Basissprache wie das `[lang]`-Attribut.
Wenn für die Webseite keine konsistente Sprache angegeben ist, kündigt der Screenreader den Text der Seite möglicherweise nicht richtig an. Weitere Informationen zum Attribut „
lang“ |
nicht anwendbar
|
|
|
Bildelemente verfügen über `[alt]`-Attribute
Für informative Elemente sollte ein kurzer, beschreibenden alternativer Text verwendet werden. Dekorative Elemente können mit einem leeren ALT-Attribut ignoriert werden. Weitere Informationen zum Attribut
alt. |
bestanden
|
|
|
Eingabeschaltflächen haben erkennbaren Text.
Das Hinzufügen von erkennbarem, zugänglichem Text zu Eingabebuttons hilft den Nutzern von Screenreadern möglicherweise, den Zweck des entsprechenden Buttons zu verstehen. Weitere Informationen zu Eingabebuttons
|
nicht anwendbar
|
|
|
`<input type="image">`-Elemente haben `[alt]`-Text
Wenn ein Bild als
<input>-Button verwendet wird, kann alternativer Text Screenreader-Nutzern helfen, den Zweck des Buttons besser zu verstehen. Informationen zum Alt-Text für Eingabebilder. |
nicht anwendbar
|
|
|
Formularelemente sind mit Labels verknüpft
Durch Labels wird gewährleistet, dass Steuerelemente für Formulare von Hilfstechnologien wie Screenreadern richtig angesagt werden. Weitere Informationen zu Labels für Formularelemente.
|
bestanden
|
|
|
Links sind ohne Farbe erkennbar.
Text mit geringem Kontrast ist für viele Nutzer schlecht oder gar nicht lesbar. Gut erkennbarer Linktext erhöht die Nutzerfreundlichkeit für Nutzer mit eingeschränktem Sehvermögen. Informationen dazu, wie Links gut erkennbar gemacht werden
|
bestanden
|
|
|
Links haben einen leicht erkennbaren Namen
Linktext, der erkennbar, einzigartig und fokussierbar ist, erleichtert Screenreader-Nutzern die Verwendung. Dies gilt auch für alternativen Text für Bilder, die als Links verwendet werden. Informationen zu barrierefreien Links.
|
bestanden
|
|
|
Listen enthalten nur `<li>`-Elemente und Elemente zur Skriptunterstützung (`<script>` sowie `<template>`).
Screenreader sagen Listen auf bestimmte Art und Weise an. Wenn die Liste richtig strukturiert ist, kann der Screenreader sie besser ausgeben. Weitere Informationen zum Strukturieren von Listen.
|
bestanden
|
|
|
Listenelemente (`<li>`) befinden sich in übergeordneten `<ul>`-, `<ol>`- oder `<menu>`-Elementen
Listenelemente (
<li>) müssen sich in einem übergeordneten <ul>-, <ol>- oder <menu>-Element befinden, damit sie von Screenreadern richtig angesagt werden können. Weitere Informationen zum Strukturieren von Listen. |
bestanden
|
|
|
Dieses Dokument verwendet `<meta http-equiv="refresh">` nicht
Nutzer rechnen nicht damit, dass eine Seite automatisch aktualisiert wird. Außerdem wird dadurch der Fokus wieder auf den Seitenanfang verschoben. Das kann für den Nutzer frustrierend oder irritierend sein. Weitere Informationen zum Meta-Tag „Refresh“.
|
nicht anwendbar
|
|
|
`[user-scalable="no"]` wird nicht im `<meta name="viewport">`-Element verwendet und das `[maximum-scale]`-Attribut ist nicht kleiner als 5.
Wenn du die Zoomfunktion deaktivierst, können Nutzer mit eingeschränktem Sehvermögen, die auf die Bildschirmvergrößerung angewiesen sind, den Inhalt einer Webseite nicht richtig sehen. Weitere Informationen zum Darstellungsbereich-Meta-Tag.
|
bestanden
|
|
|
`<object>`-Elemente haben alternativen Text
Screenreader können lediglich Textinhalte interpretieren. Wenn du
<object>-Elementen alternativen Text hinzufügst, können Screenreader-Nutzer besser verstehen, was diese Elemente darstellen. Weitere Informationen zum Alt-Text für object-Elemente. |
nicht anwendbar
|
|
|
select-Elemente haben zugehörige label-Elemente.
form-Elemente ohne wirkungsvolle Labels können für Nutzer von Screenreadern frustrierend sein. Weitere Informationen zum Element „
select“ |
nicht anwendbar
|
|
|
Sprunglink sind fokussierbar.
Ein Sprunglink kann Nutzern dabei helfen, zum Hauptinhalt zu springen und so Zeit zu sparen. Weitere Informationen zu Sprunglinks
|
bestanden
|
|
|
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, aber für Nutzer, die auf Hilfstechnologien angewiesen sind, häufig frustrierend. Weitere Informationen zum Attribut
tabindex. |
nicht anwendbar
|
|
|
Berührungszielbereiche haben eine ausreichende Größe und ausreichend Abstand.
Berührungszielbereiche mit ausreichender Größe und ausreichend Abstand können Nutzern, die eventuell Schwierigkeiten haben, kleine Steuerelemente zu aktivieren, die Bedienung erleichtern. Weitere Informationen zu Berührungszielbereichen
|
bestanden
|
|
|
Zellen in einem "`<table>`"-Element, die das Attribut "`[headers]`" enthalten, verweisen auf Zellen in derselben Tabelle.
Screenreader bieten Funktionen, die die Navigation in Tabellen vereinfachen. Wenn du dafür sorgst, dass
<td>-Zellen, die das Attribut [headers] verwenden, nur auf andere Zellen in derselben Tabelle verweisen, kann dies für Screenreader-Nutzer hilfreich sein. Weitere Informationen zum Attribut headers. |
nicht anwendbar
|
|
|
Für `<th>`-Elemente und Elemente mit `[role="columnheader"/"rowheader"]` sind Datenzellen vorhanden, die sie beschreiben.
Screenreader bieten Funktionen, die die Navigation in Tabellen vereinfachen. Wenn du dafür sorgst, dass Tabellenüberschriften immer auf bestimmte Zellen verweisen, kann dies für Screenreader-Nutzer hilfreich sein. Weitere Informationen zu Tabellenüberschriften.
|
nicht anwendbar
|
|
|
`[lang]`-Attribute weisen einen gültigen Wert auf
Wenn ein gültiger BCP-47-Sprachcode für Elemente angegeben wird, kann der Text besser von Screenreadern ausgesprochen werden. Informationen zur Verwendung des Attributs
lang. |
nicht anwendbar
|
|
|
`<video>`-Elemente enthalten ein `<track>`-Element mit `[kind="captions"]`
Wenn ein Video Untertitel enthält, können Menschen mit Hörbehinderung die Informationen im Video besser verstehen. Weitere Informationen zu Untertiteln in Videos.
|
nicht anwendbar
|
|
|
Dokument hat eine Hauptmarkierung.
Eine Hauptmarkierung hilft Nutzern von Screenreadern, Webseiten zu bedienen. Weitere Informationen zu Markierungen
|
bestanden
|
|
|
`autocomplete` Attribute werden korrekt verwendet
Die Werte des Attributs „
autocomplete“ müssen gültig und korrekt angewendet sein, damit Screenreader richtig funktionieren. Weitere Informationen zu gültigen Werten für die automatische Vervollständigung |
bestanden
|
|
|
Elemente mit „`role="none"`“ oder „`role="presentation"`“ stehen nicht in Konflikt
Es gibt bestimmte Fälle, in denen die semantische Rolle eines Elements mit „
role="none"“ oder „role="presentation"“ nicht in „none“ oder „presentation“ aufgelöst wird. Damit das Element aus der Baumansicht für Barrierefreiheit entfernt bleibt, solltest du dem Element keine globalen ARIA-Attribute hinzufügen und es nicht fokussierbar machen. Weitere Informationen zum Konflikt mit der Präsentationsrolle |
nicht anwendbar
|
|
|
SVG-Elemente mit der Rolle „`img`“ haben eine barrierefreie Textalternative
Achte darauf, dass SVG-Elemente mit der Rolle „
img“, „graphics-document“ oder „graphics-symbol“ eine barrierefreie Textalternative haben. Weitere Informationen zum Alt-Text für SVG-Dateien |
nicht anwendbar
|
|
|
Interactive controls are keyboard focusable
Custom interactive controls are keyboard focusable and display a focus indicator. Learn how to make custom controls focusable.
|
manuelle Prüfung nötig
|
|
|
Interactive elements indicate their purpose and state
Interactive elements, such as links and buttons, should indicate their state and be distinguishable from non-interactive elements. Learn how to decorate interactive elements with affordance hints.
|
manuelle Prüfung nötig
|
|
|
The page has a logical tab order
Tabbing through the page follows the visual layout. Users cannot focus elements that are offscreen. Learn more about logical tab ordering.
|
manuelle Prüfung nötig
|
|
|
Visual order on the page follows DOM order
DOM order matches the visual order, improving navigation for assistive technology. Learn more about DOM and visual ordering.
|
manuelle Prüfung nötig
|
|
|
User focus is not accidentally trapped in a region
A user can tab into and out of any control or region without accidentally trapping their focus. Learn how to avoid focus traps.
|
manuelle Prüfung nötig
|
|
|
The user's focus is directed to new content added to the page
If new content, such as a dialog, is added to the page, the user's focus is directed to it. Learn how to direct focus to new content.
|
manuelle Prüfung nötig
|
|
|
HTML5 landmark elements are used to improve navigation
Landmark elements (
<main>, <nav>, etc.) are used to improve the keyboard navigation of the page for assistive technology. Learn more about landmark elements. |
manuelle Prüfung nötig
|
|
|
Offscreen content is hidden from assistive technology
Offscreen content is hidden with display: none or aria-hidden=true. Learn how to properly hide offscreen content.
|
manuelle Prüfung nötig
|
|
|
Custom controls have associated labels
Custom interactive controls have associated labels, provided by aria-label or aria-labelledby. Learn more about custom controls and labels.
|
manuelle Prüfung nötig
|
|
|
Custom controls have ARIA roles
Custom interactive controls have appropriate ARIA roles. Learn how to add roles to custom controls.
|
manuelle Prüfung nötig
|
|
|
Tabellen haben unterschiedliche Inhalte im Zusammenfassungsattribut und in „`<caption>`“.
Das Zusammenfassungsattribut sollte die Tabellenstruktur beschreiben, während „
<caption>“ den Titel auf dem Bildschirm haben sollte. Korrektes Tabellen-Markup ist für Nutzer von Screenreadern hilfreich. Weitere Informationen zu Zusammenfassung und Bildunterschrift |
nicht anwendbar
|
|
|
Alle heading-Elemente haben einen Inhalt.
Eine Überschrift ohne Inhalt oder nicht zugänglicher Text verhindert, dass Nutzer von Screenreadern auf Informationen in der Seitenstruktur zugreifen. Weitere Informationen zu Überschriften
|
nicht anwendbar
|
|
|
ARIA-Rollen werden nur für kompatible Elemente verwendet
Vielen HTML-Elementen können nur bestimmte ARIA-Rollen zugewiesen werden. Die Verwendung von ARIA-Rollen für Elemente, für die sie nicht zulässig sind, kann die Barrierefreiheit der Webseite beeinträchtigen. Weitere Informationen zu ARIA-Rollen
|
nicht anwendbar
|
|
|
Bildelemente haben keine „`[alt]`“-Attribute, bei denen es sich um redundanten Text handelt.
Für informative Elemente sollte ein kurzer und beschreibender alternativer Text verwendet werden. Alternativer Text, der mit dem Text neben dem Link oder Bild identisch ist, kann für Nutzer von Screenreadern verwirrend sein, da der Text zweimal vorgelesen wird. Weitere Informationen zum Attribut „
alt“ |
nicht anwendbar
|
|
|
Identische Links haben denselben Zweck.
Links mit demselben Ziel sollten dieselbe Beschreibung haben, damit Nutzer den Zweck des Links besser verstehen und entscheiden können, ob sie ihm folgen möchten. Weitere Informationen zu identischen Links
|
nicht anwendbar
|
|
|
Elemente mit sichtbarem Textlabel haben keine passenden barrierefreien Namen.
Sichtbare Textlabels, die nicht mit dem barrierefreien Namen übereinstimmen, können für Nutzer von Screenreadern verwirrend sein. Weitere Informationen zu barrierefreien Namen
Warum bei kandlen-it.de: Die Würfel-Bausteine-Buttons (Design, Inhalt, SEO, Recht, Ladezeit, …) haben aria-label wie „1 · Design (Sichtbar)", der sichtbare Buttontext lautet aber nur „1 Design" — der sichtbare Text ist kein Teilstring des aria-label. Screenreader- und Spracheingabe-Nutzer können den Button dadurch nicht zuverlässig referenzieren.
Wie lösen: aria-label so umbauen, dass der sichtbare Text darin vorkommt (z. B. „Design – Sichtbar" statt „1 · Design (Sichtbar)"), oder ganz auf aria-label verzichten und den sichtbaren Text allein sprechen lassen.
|
nicht bestanden
|
|
|
Tabellen verwenden `<caption>` anstelle von Zellen mit dem `[colspan]`-Attribut, um Untertitel anzugeben.
Screenreader bieten Funktionen, die die Navigation in Tabellen vereinfachen. Wenn du dafür sorgst, dass Tabellen das tatsächliche Untertitelelement anstelle von Zellen mit dem
[colspan]-Attribut verwenden, kann das für Screenreader-Nutzer hilfreich sein. Weitere Informationen zu Untertiteln. |
nicht anwendbar
|
|
|
`<td>`-Elemente in einer großen `<table>` haben eine oder mehrere Tabellenüberschriften.
Screenreader bieten Funktionen, die die Navigation in Tabellen vereinfachen. Wenn du
<td>-Elementen in einer großen Tabelle (mindestens 3 Zellen in Breite und Höhe) eine entsprechende Überschrift gibst, kann das für Screenreader-Nutzer hilfreich sein. Weitere Informationen zu Tabellenüberschriften |
nicht anwendbar
|
Best Practices — 21 Audits
|
Verwendet HTTPS
Alle Websites sollten durch HTTPS geschützt werden – selbst wenn sie keine sensiblen Daten enthalten. Auch gemischte Inhalte, bei denen einige Ressourcen über HTTP geladen werden, obwohl die ursprüngliche Anfrage über HTTPS gestellt wurde, sind zu vermeiden. HTTPS verhindert, dass andere die Website manipulieren oder die Kommunikation zwischen deiner App und deinen Nutzern mitverfolgen können, und ist eine Voraussetzung für HTTP/2 und viele neue Webplattform-APIs. Weitere Informationen zu HTTPS.
|
bestanden
|
|
|
HTTP-Traffic wird auf HTTPS weitergeleitet
Achte darauf, den gesamten HTTP-Traffic zu HTTPS weiterzuleiten, damit sichere Webfunktionen für alle Nutzer aktiviert werden. Weitere Informationen.
|
nicht anwendbar
|
|
|
Fordert während des Seitenaufbaus keine Berechtigung zur Standortbestimmung an
Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to a user action instead. Learn more about the geolocation permission. Also consider using the
<geolocation> element. |
bestanden
|
|
|
Fordert während des Seitenaufbaus keine Benachrichtigungsberechtigung an
Wenn Websites die Berechtigung zum Senden von Benachrichtigungen ohne Begründung anfordern, sind Nutzer schnell misstrauisch oder irritiert. Versuche stattdessen, die Anforderung mit Touch-Gesten zu verbinden. Weitere Informationen zum verantwortungsvollen Einholen der Berechtigung zum Senden von Benachrichtigungen.
|
bestanden
|
|
|
Sicherstellen, dass CSP effektiv gegen XSS-Angriffe wirkt
Eine starke Content Security Policy (CSP) reduziert das Risiko für Cross-Site-Scripting-Angriffe (XSS-Angriffe) erheblich. Weitere Informationen
|
informativ
|
|
|
Wirkungsvolle HSTS-Richtlinie verwenden
Durch die Implementierung des HSTS-Headers wird das Risiko von Downgrades bei HTTP-Verbindungen sowie von Abhörangriffen erheblich reduziert. Wir empfehlen eine schrittweise Einführung, bei der mit einem niedrigen „max‑age“-Wert begonnen wird. Hier findest du weitere Informationen zur Verwendung einer wirkungsvollen HSTS-Richtlinie.
|
informativ
|
|
|
Mit COOP für die richtige Isolation des Ursprungs sorgen
Mit der Cross-Origin-Opener-Policy (COOP) kann das übergeordnete Fenster von anderen Dokumenten wie Pop‑ups isoliert werden. Hier findest du weitere Informationen zur Implementierung eines COOP-Headers.
|
informativ
|
|
|
Clickjacking mit XFO oder CSP abschwächen
Der
X-Frame-Options-Header (XFO) oder die frame-ancestors-Anweisung im Content-Security-Policy-Header (CSP) steuern, wo eine Seite eingebettet werden kann. Wenn das Einbetten der Seite auf einigen oder allen Websites blockiert wird, können dadurch Clickjacking-Angriffe abgeschwächt werden. Weitere Informationen |
nicht anwendbar
|
|
|
DOM-basiertes XSS-Angriffe mit vertrauenswürdigen Typen reduzieren
Die
require-trusted-types-for-Richtlinie im Content-Security-Policy-Header (CSP) weist User-Agents an, die an DOM-XSS-Senkenfunktionen übergebenen Daten zu steuern. Weitere Informationen zum Reduzieren von DOM-basierten XSS-Angriffen mit vertrauenswürdigen Typen |
informativ
|
|
|
Erlaubt Nutzern, Inhalte in Eingabefelder einzufügen
Es ist nicht nutzerfreundlich, das Einfügen von Eingaben zu verhindern. Außerdem werden dadurch Passwortmanager blockiert, was die Sicherheit beeinträchtigt.Weitere Informationen zu nutzerfreundlichen Eingabefeldern.
|
bestanden
|
|
|
Zeigt Bilder mit einem korrekten Seitenverhältnis an
Die Bildgröße sollte dem natürlichen Seitenverhältnis entsprechen. Weitere Informationen zum Seitenverhältnis von Bildern.
|
bestanden
|
|
|
Stellt Bilder mit angemessener Auflösung bereit
Die originalen Abmessungen eines Bildes sollten proportional zu der Displaygröße und dem Pixel-Verhältnis sein, damit das Bild optimal angezeigt wird. Weitere Informationen zu responsiven Bildern.
|
bestanden
|
|
|
Seite verfügt über den HTML-DOCTYPE
Wenn du einen DOCTYPE angibst, verhinderst du, dass der Browser zum Quirks-Modus wechselt. Weitere Informationen zum Deklarieren eines DOCTYPE.
|
bestanden
|
|
|
Korrekt definierter Zeichensatz
Die Zeichencodierung muss deklariert werden. Dazu kann ein
<meta>-Tag in den ersten 1024 Byte des HTML-Codes oder im HTTP-Antwortheader „Content-Type“ angegeben werden. Weitere Informationen zum Deklarieren der Zeichencodierung. |
bestanden
|
|
|
Grundlegende Funktionen
Listet die auf der Seite verwendeten Webfunktionen und ihren Baseline-Status ab dem 2026-07-15 auf. Weitere Informationen zu Baseline
|
informativ
|
|
|
JavaScript-Bibliotheken erkannt
Alle Frontend-JavaScript-Bibliotheken auf der Seite wurden erkannt. Weitere Informationen.
|
informativ
|
|
|
Vermeidet veraltete APIs
Verworfene APIs werden aus dem Browser entfernt. Weitere Informationen zu verworfenen APIs.
|
bestanden
|
|
|
Vermeidet Drittanbieter-Cookies
Drittanbieter-Cookies werden möglicherweise in bestimmten Kontexten blockiert. Weitere Informationen zur Vorbereitung auf Einschränkungen für Drittanbieter-Cookies
|
bestanden
|
|
|
Es wurden keine Browserfehler in der Konsole protokolliert
In der Konsole protokollierte Fehler weisen auf ungelöste Probleme hin. Sie können durch fehlgeschlagene Netzwerkanfragen und andere Browserprobleme verursacht werden. Weitere Informationen
|
bestanden
|
|
|
Seite hat gültige Quellzuordnungen
Quellzuordnungen übersetzen reduzierten Code in den ursprünglichen Quellcode. Dies hilft Entwicklern beim Debugging in der Produktionsphase. Zusätzlich kann Lighthouse weitere Informationen liefern. Wir empfehlen, Quellzuordnungen bereitzustellen, um diese Vorteile zu nutzen. Weitere Informationen zu Quellzuordnungen.
|
bestanden
|
|
|
Keine Probleme im `Issues`-Bereich der Chrome-Entwicklertools
Im
Issues-Bereich der Chrome-Entwicklertools wurden ungelöste Probleme protokolliert. Sie können durch fehlgeschlagene Netzwerkanfragen, unzureichende Sicherheitsmaßnahmen und andere Browser-Probleme verursacht sein. Öffne den Bereich mit den Problemen in Chrome-Entwicklertools, um weitere Details zu den einzelnen Problemen aufzurufen. |
bestanden
|
SEO — 11 Audits
|
Seite ist nicht von Indexierung ausgeschlossen
Suchmaschinen können deine Seiten nicht in die Suchergebnisse aufnehmen, wenn sie nicht berechtigt sind, sie zu crawlen. Weitere Informationen zu Crawler-Anweisungen.
|
bestanden
|
|
|
Dokument enthält ein `<title>`-Element
Der Titel gibt Screenreader-Nutzern einen Überblick über die Seite. Nutzer von Suchmaschinen verlassen sich stark auf ihn, um zu entscheiden, ob eine Seite für ihre Suche relevant ist. Weitere Informationen zu Dokumenttiteln.
|
bestanden
|
|
|
Dokument enthält eine Meta-Beschreibung
Meta-Beschreibungen können in die Suchergebnisse aufgenommen werden, um die Seiteninhalte kurz zusammenzufassen. Weitere Informationen zu Meta-Beschreibungen.
|
bestanden
|
|
|
Seite hat einen gültigen HTTP-Statuscode
Seiten mit ungültigen HTTP-Statuscodes werden möglicherweise nicht richtig indexiert. Weitere Informationen zu HTTP-Statuscodes.
|
bestanden
|
|
|
Links haben beschreibenden Text
Wenn du beschreibenden Linktext verwendest, können Suchmaschinen deine Inhalte besser verstehen. Informationen zu barrierefreien Links.
|
bestanden
|
|
|
Links können gecrawlt werden
Suchmaschinen verwenden möglicherweise
href-Attribute für Links, um Websites zu crawlen. Das href-Attribut von Anchor-Elementen muss auf ein geeignetes Ziel verweisen, damit mehr Seiten auf der Website gefunden werden können. Informationen dazu, wie Links für Crawler zugänglich gemacht werden |
bestanden
|
|
|
robots.txt ist gültig
Wenn deine robots.txt-Datei fehlerhaft ist, können Crawler möglicherweise nicht nachvollziehen, wie deine Website gecrawlt oder indexiert werden soll. Weitere Informationen zu robots.txt.
|
bestanden
|
|
|
Bildelemente verfügen über `[alt]`-Attribute
Für informative Elemente sollte ein kurzer, beschreibenden alternativer Text verwendet werden. Dekorative Elemente können mit einem leeren ALT-Attribut ignoriert werden. Weitere Informationen zum Attribut
alt. |
bestanden
|
|
|
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 zu
hreflang. |
bestanden
|
|
|
Dokument enthält ein gültiges `rel=canonical`-Element
Über kanonische Links wird angegeben, welche URL in den Suchergebnissen angezeigt werden soll. Weitere Informationen zu kanonischen Links.
|
bestanden
|
|
|
Strukturierte Daten sind gültig
Du kannst das Testtool für strukturierte Daten ausführen, um strukturierte Daten zu validieren. Weitere Informationen zu strukturierten Daten
|
manuelle Prüfung nötig
|
Scores — Desktop
98
Leistung
100
Barrierefreiheit
100
Best Practices
Allgemeine Web-Standards: HTTPS, keine Konsolen-Fehler, aktuelle/sichere Bibliotheken.
100
SEO
Technische Grundlagen für Suchmaschinen: Meta-Tags vorhanden, Seite crawlbar, mobilfreundlich.
Alle Metriken (komplett, ungekürzt) — mit Erklärung
|
First Contentful Paint
Wie lange es dauert, bis der erste Inhalt (Text oder Bild) überhaupt sichtbar wird — der erste Eindruck, dass „sich etwas tut".
|
0,5 s | |
|
Largest Contentful Paint
Wann das größte sichtbare Element (meist Hauptbild oder Überschrift) fertig geladen ist. Offizieller Google-Web-Vital, fließt ins Suchmaschinen-Ranking ein. Richtwert: unter 2,5 s.
|
0,7 s | |
|
Total Blocking Time
Wie lange JavaScript den Hauptthread blockiert, sodass Klicks/Eingaben nicht sofort reagieren. Je höher, desto „hakeliger" fühlt sich die Seite an. Richtwert: unter 200 ms.
|
0 ms | |
|
Cumulative Layout Shift
Wie stark sich Elemente während des Ladens ungewollt verschieben (z. B. Text springt, weil ein Bild nachträglich Platz beansprucht). Ebenfalls ein Google-Web-Vital. Richtwert: unter 0,1.
|
0 | |
|
Speed Index
Wie schnell sich der sichtbare Seiteninhalt über die Zeit füllt — visuelle Analyse des gesamten Ladeverlaufs, keine einzelne Marke. Richtwert: unter 3,4 s.
|
1,4 s | |
|
Time to Interactive
Ab wann die Seite zuverlässig auf Eingaben reagiert, also keine langen blockierenden Skripte mehr laufen. Richtwert: unter 3,8 s.
|
0,7 s | |
|
Kurze Erstreaktionszeit des Servers
Wie schnell der Server auf die allererste Anfrage antwortet, bevor der Browser überhaupt mit dem Rendern anfängt (Time to First Byte). Richtwert: unter 600 ms.
|
Stammdokument brauchte 40 ms |
Verbesserungsvorschläge (Opportunities)
Konkrete, von Lighthouse gefundene Stellschrauben — mit der geschätzten Zeit, die eine Behebung an Ladezeit einsparen würde. Sortiert nach Wirkung, größter Hebel zuerst.
- Mehrere Weiterleitungen auf die Seite vermeiden 230 ms
- CSS komprimieren 0 ms
- JavaScript komprimieren 0 ms
- Reduziere nicht verwendete CSS 0 ms
Alle Audits — komplett, alle 153 aus allen 4 Kategorien (Desktop)
Das ist die vollständige Rohantwort der PageSpeed-API, ungekürzt — jede einzelne Prüfung, die Lighthouse durchführt, mit Original-Beschreibung, was sie genau prüft.
Performance — 47 Audits
|
First Contentful Paint
„First Contentful Paint“ gibt an, wann der erste Text oder das erste Bild gerendert wird. Weitere Informationen zum Messwert „First Contentful Paint“.
Warum bei kandlen-it.de: 2,0 s bis zum ersten sichtbaren Inhalt, knapp über dem Richtwert von 1,8 s. Ursache: der Browser muss erst mehrere render-blockierende CSS-Dateien laden, bevor er überhaupt zu zeichnen beginnt (siehe „Ressourcen, die das Rendering blockieren" unten).
Wie lösen: Kritisches CSS für den sichtbaren Bereich inline in den Seitenkopf setzen, den Rest asynchron nachladen.
|
0,5 s bestanden
|
|
|
Largest Contentful Paint
„Largest Contentful Paint“ gibt an, wie lange das Rendern des größten Textblocks oder Bildelements dauert. Weitere Informationen zum Messwert „Largest Contentful Paint“
Warum bei kandlen-it.de: Die Serverantwort ist mit 21 ms sehr schnell — der eigentliche Verzug (4,2 s) entsteht danach: das größte Element (der Hero-Text) wartet auf das Rendering, weil vorher blockierendes CSS geladen werden muss.
Wie lösen: Render-blockierendes CSS reduzieren (siehe unten), damit der Hero-Bereich früher gezeichnet werden kann.
|
0,7 s bestanden
|
|
|
Total Blocking Time
Summe aller Zeiträume (in Millisekunden) zwischen FCP und „Zeit bis Interaktivität“, wenn die Aufgabendauer 50 ms überschreitet. Weitere Informationen zum Messwert „Gesamte Blockierzeit“.
|
0 ms bestanden
|
|
|
Cumulative Layout Shift
„Cumulative Layout Shift“ misst die Bewegung sichtbarer Elemente innerhalb des Darstellungsbereichs. Weitere Informationen zum Messwert „Cumulative Layout Shift“.
|
0 bestanden
|
|
|
Speed Index
Der Speed Index gibt an, wie schnell die Inhalte einer Seite sichtbar dargestellt werden. Weitere Informationen zum Messwert „Speed Index“.
Warum bei kandlen-it.de: Mit 6,7 s deutlich über dem Richtwert von 3,4 s. Hängt direkt an denselben Ursachen wie FCP/LCP — die Seite füllt sich sichtbar langsam, weil zentrale Styles blockierend nachgeladen werden.
Wie lösen: Gleiche Lösung wie First/Largest Contentful Paint: render-blockierendes CSS auflösen.
|
1,4 s teilweise
|
|
|
Effiziente Verweildauer im Cache verwenden
Eine lange Verweildauer im Cache kann wiederholte Besuche deiner Seite beschleunigen. Weitere Informationen zum Caching
Warum bei kandlen-it.de: 16 statische Dateien (CSS, Web-Fonts, JS) sind nur 7 Tage cachebar, obwohl sie über „?ver="-Parameter versioniert sind und sich zwischen Deployments nicht ändern — z. B. style.css, TitilliumWeb-400/600/700.woff2, wuerfel.js.
Wie lösen: Cache-Control max-age für versionierte, statische Assets auf ein Jahr hochsetzen (das Cache-Busting über „?ver=" macht das gefahrlos — neue Version = neue URL).
|
Geschätzte Einsparung von 10 KiB teilweise
|
|
|
Verursacher von Layout Shifts
Layout Shifts treten auf, wenn sich Elemente ohne Nutzerinteraktion bewegen. Untersuche die Ursachen von Layout Shifts, beispielsweise Elemente, die hinzugefügt oder entfernt werden oder deren Schriftart sich beim Laden der Seite ändert.
|
informativ
|
|
|
Latenz der Dokumentanfrage
Deine erste Netzwerkanfrage ist die wichtigste. Verringere ihre Latenz, indem du Weiterleitungen vermeidest, eine schnelle Serverantwort sicherstellst und die Textkomprimierung aktivierst.
Warum bei kandlen-it.de: Server antwortet schnell (21 ms) und liefert komprimiert aus — aber 1 Weiterleitung kostet zusätzlich 3,6 s, bevor überhaupt geladen wird (siehe „Mehrere Weiterleitungen" unten).
Wie lösen: Identisch mit dem Redirects-Punkt: die Weiterleitung kandlen-it.de → www.kandlen-it.de vermeiden bzw. verkürzen.
|
Geschätzte Einsparung von 1.430 ms nicht bestanden
|
|
|
DOM-Größe optimieren
Ein großes DOM kann die Dauer von Stilberechnungen und dynamischen Umbrüchen im Layout verlängern und sich so auf die Reaktionsfähigkeit der Seite auswirken. Ein großes DOM führt auch zu einer höheren Arbeitsspeichernutzung. Informationen zum Vermeiden eines zu großen DOMs
|
bestanden
|
|
|
Dupliziertes JavaScript
Du kannst große, doppelt vorhandene JavaScript-Module aus Bundles entfernen, um unnötige Datenübertragungen im Netzwerk zu reduzieren.
|
bestanden
|
|
|
Schriftart-Anzeige
Du kannst font-display auf „swap“ oder „optional“ setzen, damit der Text immer sichtbar ist. „swap“ kann weiter optimiert werden, um Layout Shifts durch Überschreibungen von Messwerten zur Schriftart zu reduzieren.
|
bestanden
|
|
|
Erzwungener dynamischer Umbruch
Ein erzwungener dynamischer Umbruch tritt auf, wenn JavaScript geometrische Eigenschaften (z. B. offsetWidth) abfragt, nachdem Stile durch eine Änderung des DOM-Status ungültig geworden sind. Dies kann zu einer schlechten Leistung führen. Weitere Informationen zu erzwungenen dynamischen Umbrüchen und möglichen Abhilfemaßnahmen.
|
bestanden
|
|
|
Bildübermittlung verbessern
Wenn du die Downloadzeit von Bildern reduzierst, kannst du die wahrgenommene Ladezeit der Seite und den LCP verbessern. Weitere Informationen zur Optimierung der Bildgröße
Warum bei kandlen-it.de: Das Hero-Bild „kandlen-system.webp" wird mit 900×900 px ausgeliefert, im Layout aber nur mit 450×450 bzw. effektiv 679×679 px dargestellt — 72 KB werden durch die falsche Auflösung verschenkt, weitere 32 KB durch zu geringe Kompression.
Wie lösen: Bild in der tatsächlich benötigten Größe exportieren bzw. srcset mit passenden Zwischengrößen anbieten, Kompressionsfaktor erhöhen.
|
Geschätzte Einsparung von 32 KiB nicht bestanden
|
|
|
INP-Aufschlüsselung
Sieh dir den längsten Unterabschnitt an, um Informationen dazu zu erhalten, wie du den INP verbessern kannst.
|
nicht anwendbar
|
|
|
LCP-Aufschlüsselung
Für jeden Unterabschnitt gibt es spezifische Verbesserungsstrategien. Idealerweise sollte der Großteil der LCP-Zeit für das Laden der Ressourcen und nicht für Verzögerungen aufgewendet werden.
Warum bei kandlen-it.de: Bestätigt die LCP-Ursache im Detail: „Time to first byte" nur 21 ms, aber „Element render delay" 4.165 ms — fast die komplette Zeit geht durchs Warten auf render-blockierendes CSS drauf, nicht durch den Server.
Wie lösen: Siehe Largest Contentful Paint oben — render-blockierendes CSS auflösen.
|
informativ
|
|
|
LCP-Anfrageerkennung
Wenn du den LCP optimieren möchtest, mache das LCP-Bild im HTML-Code direkt sichtbar und vermeide Lazy Loading
|
bestanden
|
|
|
Veraltetes JavaScript
Dank Polyfills und Transformationen können ältere Browser die neuen JavaScript-Funktionen nutzen. Bei modernen Browsern hingegen sind viele davon nicht erforderlich. Du solltest den Build-Prozess deines JavaScripts so anpassen, dass Baseline-Funktionen nicht transpiliert werden, es sei denn, du weißt, dass du ältere Browser unterstützen musst. Hier erfährst du, warum die meisten Websites ES6+ Code ohne Transpilierung bereitstellen können
|
bestanden
|
|
|
Netzwerkabhängigkeitsbaum
Vermeide die Verkettung kritischer Anfragen, indem du die Ketten verkürzt, die Downloadgröße von Ressourcen reduzierst oder das Herunterladen unnötiger Ressourcen zurückstellst, um den Seitenaufbau zu beschleunigen.
Warum bei kandlen-it.de: Die Ladekette zeigt: die Startseite lädt style.css nach, das wiederum eine Web-Font-Datei nachlädt — eine verschachtelte Kette von 4,2 s für die längste Abhängigkeit. Kein Preconnect nötig, da alles von der eigenen Domain kommt.
Wie lösen: Verschachtelung verkürzen: Fonts nicht über einen Umweg durchs CSS, sondern direkt im HTML-Kopf per <link rel="preload"> ankündigen.
|
nicht bestanden
|
|
|
Anfragen zum Blockieren des Renderings
Anfragen blockieren das erste Rendering der Seite, was den LCP verzögern kann. Durch das Verschieben oder Einfügen können diese Netzwerkanfragen aus dem kritischen Pfad entfernt werden.
Warum bei kandlen-it.de: Vier CSS-Dateien blockieren das Rendering: style.css (751 ms), kit-a11y/frontend.css (151 ms), wuerfel-neu.css (451 ms) und wuerfel.css (451 ms). Auffällig: wuerfel.css und wuerfel-neu.css werden beide geladen — möglicherweise eine Altlast.
Wie lösen: Kritisches CSS inline setzen, Rest per media="print" onload-Trick oder defer nachladen. Zusätzlich prüfen, ob wuerfel.css neben wuerfel-neu.css noch gebraucht wird.
|
Geschätzte Einsparung von 170 ms nicht bestanden
|
|
|
Drittanbieter
Code von Drittanbietern kann die Ladegeschwindigkeit erheblich beeinträchtigen. Reduziere Drittanbietercode und stelle den Ladevorgang zurück, um die Inhalte deiner Seite zu priorisieren.
|
bestanden
|
|
|
Darstellungsbereich für Mobilgeräte optimieren
Bei Interaktionen durch Tippen kann es zu einer Verzögerung von bis zu 300 ms kommen, wenn der Darstellungsbereich nicht für Mobilgeräte optimiert ist.
|
bestanden
|
|
|
Time to Interactive
„Zeit bis Interaktivität“ entspricht der Zeit, die vergeht, bis die Seite vollständig interaktiv ist. Weitere Informationen zum Messwert „Zeit bis Interaktivität“.
|
0,7 s bestanden
|
|
|
Maximaler potenzieller First Input Delay
Das maximale potenzielle First Input Delay, das bei deinen Nutzern auftreten kann, entspricht der Dauer der längsten Aufgabe. Weitere Informationen zum Messwert „Maximales potenzielles First Input Delay“.
|
30 ms bestanden
|
|
|
CSS komprimieren
Durch das Reduzieren von CSS-Dateien lassen sich Netzwerknutzlasten senken. Informationen zum Reduzieren von CSS.
Warum bei kandlen-it.de: style.css: 43,5 % Einsparung möglich (8,2 von 18,9 KB), wuerfel-neu.css: 45,5 % (2,8 von 6,1 KB) — beides unkomprimierter Whitespace/Kommentare aus der Theme-Entwicklung.
Wie lösen: CSS-Minifizierung in den Build-Prozess des WordPress-Themes „kit-kandlen-theme" einbauen (z. B. beim Speichern automatisch minifizierte Version ausliefern).
|
Geschätzte Einsparung von 11 KiB teilweise
|
|
|
JavaScript komprimieren
Durch die Komprimierung von JavaScript-Dateien können Nutzlastgrößen und die Zeit zum Parsen von Skripts reduziert werden. Informationen zum Reduzieren von JavaScript.
Warum bei kandlen-it.de: wuerfel-neu.js: 44 % Einsparung möglich (2,3 von 5,3 KB) durch fehlende Minifizierung.
Wie lösen: Gleiche Build-Pipeline wie bei CSS für JavaScript-Dateien einrichten.
|
Geschätzte Einsparung von 2 KiB teilweise
|
|
|
Reduziere nicht verwendete CSS
Du kannst ungültige Regeln in Stylesheets reduzieren und CSS-Code zurückstellen, der nicht für ohne Scrollen sichtbare Inhalte („above the fold“) verwendet wird, um den Datenverbrauch durch Netzwerkaktivität zu senken. Informationen zum Reduzieren von nicht verwendetem CSS-Code.
Warum bei kandlen-it.de: style.css: 58,8 % der geladenen Regeln (10,7 von 18,3 KB) werden auf der Startseite gar nicht angewendet — Regeln für andere Seiten/Komponenten werden immer mitgeladen.
Wie lösen: CSS pro Seitentyp aufteilen oder mit einem Tool wie PurgeCSS im Theme-Build nur die tatsächlich genutzten Regeln ausliefern.
|
Geschätzte Einsparung von 10 KiB teilweise
|
|
|
Reduziere nicht verwendetes JavaScript
Um den Datenverbrauch durch Netzwerkaktivität zu senken, kannst du nicht verwendetes JavaScript reduzieren und das Laden von Skripts zurückstellen, bis sie benötigt werden. Informationen zum Reduzieren von nicht verwendetem JavaScript.
|
bestanden
|
|
|
Vermeidet sehr große Netzwerknutzlasten
Große Netzwerknutzlasten kosten Nutzer bares Geld und hängen eng mit langen Ladezeiten zusammen. Informationen zum Verringern der Nutzlastgröße.
|
Die Gesamtgröße war 204 KiB bestanden
|
|
|
Markierungen und Messungen für das Nutzertiming
Du kannst die User Timing API in deine App einbinden. Damit lässt sich die Leistung der App während wichtiger Nutzerinteraktionen in der Praxis messen. Weitere Informationen zu User Timing-Markierungen.
|
nicht anwendbar
|
|
|
JavaScript-Ausführungszeit
Versuche, die Zeit für das Parsen, Kompilieren und Ausführen von JavaScript zu reduzieren. Die Bereitstellung kleinerer JS-Nutzlasten kann dabei helfen. Informationen zum Reduzieren der JavaScript-Ausführungszeit.
|
0,0 s bestanden
|
|
|
Minimiert den Aufwand für den Hauptthread
Versuche, die Zeit für das Parsen, Kompilieren und Ausführen von JavaScript zu reduzieren. Die Bereitstellung kleinerer JS-Nutzlasten kann dabei helfen. Informationen dazu, wie sich der Aufwand für den Hauptthread minimieren lässt
|
0,2 s bestanden
|
|
|
Lange Hauptthread-Aufgaben vermeiden
Listet die längsten Aufgaben im Hauptthread auf. Das ist nützlich, um die wichtigsten Ursachen für die Eingabeverzögerungen zu ermitteln. Informationen dazu, wie sich lange Aufgaben im Hauptthread vermeiden lassen
|
nicht anwendbar
|
|
|
Nicht zusammengesetzte Animationen vermeiden
Nicht zusammengesetzte Animationen werden eventuell nicht richtig gerendert und können den CLS-Wert erhöhen. Informationen dazu, wie sich nicht zusammengefasste Animationen vermeiden lassen
|
nicht anwendbar
|
|
|
Bildelemente haben eine explizite `width` und `height`
Lege eine explizite Breite und Höhe für Bildelemente fest, um Layoutverschiebungen zu reduzieren und den CLS-Wert zu verbessern. Informationen zum Festlegen von Bildabmessungen
|
bestanden
|
|
|
Network Requests
Lists the network requests that were made during page load.
|
informativ
|
|
|
Netzwerk-Umlaufzeit
Die Netzwerk-Umlaufzeit (Round Trip Time, RTT) hat großen Einfluss auf die Leistung. Wenn die RTT zu einem Ursprung hoch ausfällt, weist dies darauf hin, dass die Leistung mit Servern, die sich näher beim Nutzer befinden, verbessert werden kann. Weitere Informationen zur Umlaufzeit.
|
0 ms informativ
|
|
|
Server-Backend-Latenzen
Serverlatenzen können sich auf die Leistung im Web auswirken. Wenn die Serverlatenz eines Ursprungs hoch ist, weist dies darauf hin, dass der Server überlastet ist oder eine schlechte Backend-Leistung bietet. Weitere Informationen zur Serverantwortzeit.
|
0 ms informativ
|
|
|
Tasks
Lists the toplevel main thread tasks that executed during page load.
|
informativ
|
|
|
Diagnostics
Collection of useful page vitals.
|
informativ
|
|
|
Metrics
Collects all available metrics.
|
informativ
|
|
|
Screenshot Thumbnails
This is what the load of your site looked like.
|
informativ
|
|
|
Final Screenshot
The last screenshot captured of the pageload.
|
informativ
|
|
|
Script Treemap Data
Used for treemap app
|
informativ
|
|
|
Resources Summary
Aggregates all network requests and groups them by type
|
informativ
|
|
|
Mehrere Weiterleitungen auf die Seite vermeiden
Weiterleitungen führen zu zusätzlichen Verzögerungen, bevor die Seite geladen werden kann. Informationen zum Vermeiden von Seitenweiterleitungen.
Warum bei kandlen-it.de: https://kandlen-it.de/ (ohne www) leitet auf https://www.kandlen-it.de/ weiter — kostet 780 ms, bevor überhaupt mit dem Laden begonnen wird.
Wie lösen: Intern und in Marketing-Links immer direkt auf www.kandlen-it.de verweisen; die Weiterleitung serverseitig so kurz wie möglich halten (301, keine Zwischenstationen).
|
Geschätzte Einsparung von 230 ms nicht bestanden
|
|
|
Kurze Erstreaktionszeit des Servers
Achte auf eine möglichst kurze Serverantwortzeit für das Hauptdokument, weil alle anderen Anfragen davon abhängen. Weitere Informationen zum Messwert „Time to First Byte“.
|
Stammdokument brauchte 40 ms bestanden
|
|
|
Umfangreiche Layoutverschiebungen vermeiden
Dies sind die größten Layout Shifts auf der Seite. Jedes Tabellenelement stellt einen einzelnen Layout Shift dar und zeigt das Element mit der größten Verschiebung. Unter jedem Element sind mögliche Ursachen aufgeführt, die zu einem Layout Shift geführt haben. Einige dieser Layout Shifts sind aufgrund von Windowing möglicherweise nicht im CLS-Messwert enthalten. Informationen zur Verbesserung der CLS
|
1 Layout Shift gefunden informativ
|
Accessibility — 76 Audits
|
`[accesskey]`-Werte sind eindeutig
Mithilfe von Tastenkombinationen können Nutzer schnell den Fokus auf einen Bereich der Seite verschieben. Damit die Navigation richtig funktioniert, darf jede Tastenkombination nur einmal vergeben sein. Weitere Informationen zu Tastenkombinationen.
|
nicht anwendbar
|
|
|
`[aria-*]`-Attribute entsprechen ihren Rollen
Jede ARIA-
role unterstützt eine bestimmte Untergruppe von aria-*-Attributen. Wenn sie jedoch falsch zugeordnet sind, werden die aria-*-Attribute ungültig. Informationen zum Zuordnen von ARIA-Attributen zu ihren Rollen. |
bestanden
|
|
|
`button`-, `link`- und `menuitem`-Elemente haben zugängliche Namen
Wenn ein Element keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Informationen zum barrierefreieren Gestalten von Befehlselementen.
|
nicht anwendbar
|
|
|
ARIA-Attribute werden wie angegeben für die Rolle des Elements verwendet
Einige ARIA-Attribute sind nur unter bestimmten Umständen für ein Element zulässig. Weitere Informationen zu bedingten ARIA-Attributen.
|
bestanden
|
|
|
Es wurden keine verworfenen ARIA-Rollen verwendet
Verworfene ARIA-Rollen werden möglicherweise nicht richtig von Hilfstechnologien verarbeitet. Weitere Informationen zu verworfenen ARIA-Rollen.
|
bestanden
|
|
|
Elemente mit `role="dialog"` oder `role="alertdialog"` haben barrierefreie Namen.
ARIA-Dialogelemente ohne barrierefreie Namen können Nutzer von Screenreadern daran hindern, den Zweck dieser Elemente zu erkennen. Informationen zum Verbessern der Barrierefreiheit von ARIA-Dialogelementen
|
nicht anwendbar
|
|
|
`[aria-hidden="true"]` ist in dem Dokument `<body>` nicht vorhanden
Hilfstechnologien wie Screenreader funktionieren nicht richtig, wenn für den
<body> des Dokuments aria-hidden="true" festgelegt ist. Informationen zu den Auswirkungen von aria-hidden auf den Textbereich des Dokuments. |
bestanden
|
|
|
`[aria-hidden="true"]`-Elemente enthalten keine fokussierbaren Unterelemente
Fokussierbare Nachfolgerelemente in einem
[aria-hidden="true"]-Element führen dazu, dass Nutzer von Hilfstechnologien wie Screenreadern solche interaktiven Elemente nicht verwenden können. Informationen zu den Auswirkungen von aria-hidden auf fokussierbare Elemente. |
bestanden
|
|
|
ARIA-Eingabefelder haben zugängliche Namen
Wenn ein Eingabefeld keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Weitere Informationen zu Labels für Eingabefelder.
|
nicht anwendbar
|
|
|
ARIA `meter`-Elemente haben zugängliche Namen
Wenn ein Messtool-Element keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Weitere Informationen zum Benennen von
meter-Elementen |
nicht anwendbar
|
|
|
ARIA `progressbar`-Elemente haben zugängliche Namen
Wenn ein
progressbar-Element keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Informationen zum Kennzeichnen von progressbar-Elementen. |
nicht anwendbar
|
|
|
Elemente verwenden nur zulässige ARIA-Attribute
Die Verwendung von ARIA-Attributen in Rollen, für die sie nicht zulässig sind, kann bedeuten, dass wichtige Informationen nicht an Nutzer von Hilfstechnologien weitergegeben werden. Weitere Informationen zu unzulässigen ARIA-Rollen
|
bestanden
|
|
|
`[role]`-Elemente verfügen über alle erforderlichen `[aria-*]`-Attribute
Für einige ARIA-Rollen sind Attribute erforderlich, die Screenreadern den Zustand des Elements beschreiben. Weitere Informationen zu Rollen und erforderlichen Attributen.
|
bestanden
|
|
|
Die Elemente mit einer ARIA-`[role]`, deren untergeordnete Elemente eine bestimmte `[role]` enthalten müssen, haben alle erforderlichen untergeordneten Elemente.
Einige übergeordnete ARIA-Rollen müssen bestimmte untergeordnete Rollen enthalten, damit sie die beabsichtigten Hilfsfunktionen erfüllen können. Weitere Informationen zu Rollen und erforderlichen untergeordneten Elementen.
|
nicht anwendbar
|
|
|
`[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 erfüllen können. Weitere Informationen zu ARIA-Rollen und erforderlichen übergeordneten Elementen.
|
nicht anwendbar
|
|
|
`[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 zu gültigen ARIA-Rollen.
|
bestanden
|
|
|
Elemente mit dem Attribut „`role=text`“ haben keine fokussierbaren Nachfolgerelemente.
Wenn du einen Textknoten, der durch Markup aufgeteilt ist, mit
role=text auszeichnest, kann VoiceOver diesen als eine Wortgruppe behandeln. Die fokussierbaren Nachfolgerelemente des Elements werden jedoch nicht angesagt. Weitere Informationen zum Attribut role=text |
nicht anwendbar
|
|
|
ARIA-Ein/Aus-Buttons haben zugängliche Namen
Wenn ein Ein-/Aus-Button keinen barrierefreien Namen hat, wird sie von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist sie für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Weitere Informationen zu Ein-/Aus-Buttons.
|
nicht anwendbar
|
|
|
ARIA `tooltip`-Elemente haben zugängliche Namen
Wenn ein Kurzinfo-Element keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Weitere Informationen zum Benennen von
tooltip-Elementen |
nicht anwendbar
|
|
|
ARIA `treeitem`-Elemente haben zugängliche Namen
Wenn ein
treeitem-Element keinen barrierefreien Namen hat, wird es von Screenreadern mit einer allgemeinen Bezeichnung angesagt. Dadurch ist es für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Weitere Informationen zum Kennzeichnen von treeitem-Elementen. |
nicht anwendbar
|
|
|
`[aria-*]`-Attribute weisen gültige Werte auf
Hilfstechnologien wie Screenreader können ARIA-Attribute mit ungültigen Werten nicht interpretieren. Weitere Informationen zu gültigen Werten für ARIA-Attribute.
|
bestanden
|
|
|
`[aria-*]`-Attribute sind gültig und richtig geschrieben
Hilfstechnologien wie Screenreader können ARIA-Attribute mit ungültigen Namen nicht interpretieren. Weitere Informationen zu gültigen ARIA-Attributen.
|
bestanden
|
|
|
Die Namen der Buttons sind für Screenreader zugänglich
Wenn ein Button keinen barrierefreien Namen hat, wird sie von Screenreadern nur als „Button“ angesagt. Dadurch ist sie für Nutzer, die auf Screenreader angewiesen sind, unbrauchbar. Informationen zum barrierefreien Gestalten von Buttons.
|
bestanden
|
|
|
Die Seite enthält eine Überschrift, einen Link zum Überspringen oder einen Landmark-Bereich
Wenn Tastaturnutzer Inhalte umgehen können, die sich wiederholen, sorgt das für eine effizientere Navigation. Weitere Informationen zum Umgehen von Blockierungen.
|
nicht anwendbar
|
|
|
Das Kontrastverhältnis von Hintergrund- und Vordergrundfarben ist ausreichend
Text mit geringem Kontrast ist für viele Nutzer schlecht oder gar nicht lesbar. Informationen zu einem ausreichenden Farbkontrast.
|
bestanden
|
|
|
`<dl>`-Elemente enthalten ausschließlich Gruppen aus `<dt>`- und `<dd>`-Elementen sowie `<script>`-, `<template>`- oder `<div>`-Elemente, die richtig angeordnet sind.
Wenn Definitionslisten nicht korrekt mit Markup versehen sind, kann es zu verwirrenden oder ungenauen Screenreader-Ausgaben kommen. Informationen zum Strukturieren von Definitionslisten.
|
nicht anwendbar
|
|
|
Definitionslistenelemente sind in `<dl>`-Elemente eingefasst
Definitionslistenelemente (
<dt> und <dd>) müssen in ein übergeordnetes <dl>-Element eingefasst sein, damit sie von Screenreadern richtig angesagt werden können. Informationen zum Strukturieren von Definitionslisten. |
nicht anwendbar
|
|
|
Dokument enthält ein `<title>`-Element
Der Titel gibt Screenreader-Nutzern einen Überblick über die Seite. Nutzer von Suchmaschinen verlassen sich stark auf ihn, um zu entscheiden, ob eine Seite für ihre Suche relevant ist. Weitere Informationen zu Dokumenttiteln.
|
bestanden
|
|
|
ARIA-IDs sind eindeutig
Der Wert einer ARIA-ID muss eindeutig sein, damit andere Instanzen nicht von Hilfstechnologien übersehen werden. Informationen zum Korrigieren doppelter ARIA-IDs.
|
nicht anwendbar
|
|
|
Kein Formularfeld hat mehrere Labels
Formularfelder mit mehreren Labels werden von Hilfstechnologien wie Screenreadern unter Umständen missverständlich angesagt, da sie entweder das erste, das letzte oder alle Labels verwenden. Informationen zur Verwendung von Formularlabels.
|
nicht anwendbar
|
|
|
`<frame>`- oder `<iframe>`-Elemente verfügen über einen Titel
Screenreader-Nutzer sind auf Frametitel angewiesen, die die Inhalte von Frames beschreiben. Weitere Informationen zu Frametiteln.
|
nicht anwendbar
|
|
|
Überschriftenelemente werden in einer fortlaufenden absteigenden Reihenfolge angezeigt
Richtig geordnete Überschriften, die keine Ebenen überspringen, geben der Seite eine semantische Struktur. Nutzer von Hilfstechnologien können sich so leichter auf der Seite zurechtfinden und die Inhalte besser verstehen. Weitere Informationen zur Reihenfolge von Überschriften.
|
bestanden
|
|
|
`<html>`-Element hat ein `[lang]`-Attribut
Wenn für eine Seite kein
lang-Attribut angegeben ist, nehmen Screenreader an, dass sie in der Standardsprache vorliegt, die der Nutzer beim Einrichten des Screenreaders ausgewählt hat. Ist das nicht der Fall, gibt der Screenreader den Inhalt der Seite möglicherweise falsch aus. Weitere Informationen zum lang-Attribut. |
bestanden
|
|
|
Das `<html>`-Element hat einen gültigen Wert für sein `[lang]`-Attribut
Wenn ein gültiger BCP-47-Sprachcode angegeben wird, kann der Text von einem Screenreader korrekt wiedergegeben werden. Informationen zur Verwendung des Attributs
lang. |
bestanden
|
|
|
Das `<html>`-Element hat ein `[xml:lang]`-Attribut mit derselben Basissprache wie das `[lang]`-Attribut.
Wenn für die Webseite keine konsistente Sprache angegeben ist, kündigt der Screenreader den Text der Seite möglicherweise nicht richtig an. Weitere Informationen zum Attribut „
lang“ |
nicht anwendbar
|
|
|
Bildelemente verfügen über `[alt]`-Attribute
Für informative Elemente sollte ein kurzer, beschreibenden alternativer Text verwendet werden. Dekorative Elemente können mit einem leeren ALT-Attribut ignoriert werden. Weitere Informationen zum Attribut
alt. |
bestanden
|
|
|
Eingabeschaltflächen haben erkennbaren Text.
Das Hinzufügen von erkennbarem, zugänglichem Text zu Eingabebuttons hilft den Nutzern von Screenreadern möglicherweise, den Zweck des entsprechenden Buttons zu verstehen. Weitere Informationen zu Eingabebuttons
|
nicht anwendbar
|
|
|
`<input type="image">`-Elemente haben `[alt]`-Text
Wenn ein Bild als
<input>-Button verwendet wird, kann alternativer Text Screenreader-Nutzern helfen, den Zweck des Buttons besser zu verstehen. Informationen zum Alt-Text für Eingabebilder. |
nicht anwendbar
|
|
|
Formularelemente sind mit Labels verknüpft
Durch Labels wird gewährleistet, dass Steuerelemente für Formulare von Hilfstechnologien wie Screenreadern richtig angesagt werden. Weitere Informationen zu Labels für Formularelemente.
|
bestanden
|
|
|
Links sind ohne Farbe erkennbar.
Text mit geringem Kontrast ist für viele Nutzer schlecht oder gar nicht lesbar. Gut erkennbarer Linktext erhöht die Nutzerfreundlichkeit für Nutzer mit eingeschränktem Sehvermögen. Informationen dazu, wie Links gut erkennbar gemacht werden
|
bestanden
|
|
|
Links haben einen leicht erkennbaren Namen
Linktext, der erkennbar, einzigartig und fokussierbar ist, erleichtert Screenreader-Nutzern die Verwendung. Dies gilt auch für alternativen Text für Bilder, die als Links verwendet werden. Informationen zu barrierefreien Links.
|
bestanden
|
|
|
Listen enthalten nur `<li>`-Elemente und Elemente zur Skriptunterstützung (`<script>` sowie `<template>`).
Screenreader sagen Listen auf bestimmte Art und Weise an. Wenn die Liste richtig strukturiert ist, kann der Screenreader sie besser ausgeben. Weitere Informationen zum Strukturieren von Listen.
|
bestanden
|
|
|
Listenelemente (`<li>`) befinden sich in übergeordneten `<ul>`-, `<ol>`- oder `<menu>`-Elementen
Listenelemente (
<li>) müssen sich in einem übergeordneten <ul>-, <ol>- oder <menu>-Element befinden, damit sie von Screenreadern richtig angesagt werden können. Weitere Informationen zum Strukturieren von Listen. |
bestanden
|
|
|
Dieses Dokument verwendet `<meta http-equiv="refresh">` nicht
Nutzer rechnen nicht damit, dass eine Seite automatisch aktualisiert wird. Außerdem wird dadurch der Fokus wieder auf den Seitenanfang verschoben. Das kann für den Nutzer frustrierend oder irritierend sein. Weitere Informationen zum Meta-Tag „Refresh“.
|
nicht anwendbar
|
|
|
`[user-scalable="no"]` wird nicht im `<meta name="viewport">`-Element verwendet und das `[maximum-scale]`-Attribut ist nicht kleiner als 5.
Wenn du die Zoomfunktion deaktivierst, können Nutzer mit eingeschränktem Sehvermögen, die auf die Bildschirmvergrößerung angewiesen sind, den Inhalt einer Webseite nicht richtig sehen. Weitere Informationen zum Darstellungsbereich-Meta-Tag.
|
bestanden
|
|
|
`<object>`-Elemente haben alternativen Text
Screenreader können lediglich Textinhalte interpretieren. Wenn du
<object>-Elementen alternativen Text hinzufügst, können Screenreader-Nutzer besser verstehen, was diese Elemente darstellen. Weitere Informationen zum Alt-Text für object-Elemente. |
nicht anwendbar
|
|
|
select-Elemente haben zugehörige label-Elemente.
form-Elemente ohne wirkungsvolle Labels können für Nutzer von Screenreadern frustrierend sein. Weitere Informationen zum Element „
select“ |
nicht anwendbar
|
|
|
Sprunglink sind fokussierbar.
Ein Sprunglink kann Nutzern dabei helfen, zum Hauptinhalt zu springen und so Zeit zu sparen. Weitere Informationen zu Sprunglinks
|
bestanden
|
|
|
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, aber für Nutzer, die auf Hilfstechnologien angewiesen sind, häufig frustrierend. Weitere Informationen zum Attribut
tabindex. |
nicht anwendbar
|
|
|
Berührungszielbereiche haben eine ausreichende Größe und ausreichend Abstand.
Berührungszielbereiche mit ausreichender Größe und ausreichend Abstand können Nutzern, die eventuell Schwierigkeiten haben, kleine Steuerelemente zu aktivieren, die Bedienung erleichtern. Weitere Informationen zu Berührungszielbereichen
|
bestanden
|
|
|
Zellen in einem "`<table>`"-Element, die das Attribut "`[headers]`" enthalten, verweisen auf Zellen in derselben Tabelle.
Screenreader bieten Funktionen, die die Navigation in Tabellen vereinfachen. Wenn du dafür sorgst, dass
<td>-Zellen, die das Attribut [headers] verwenden, nur auf andere Zellen in derselben Tabelle verweisen, kann dies für Screenreader-Nutzer hilfreich sein. Weitere Informationen zum Attribut headers. |
nicht anwendbar
|
|
|
Für `<th>`-Elemente und Elemente mit `[role="columnheader"/"rowheader"]` sind Datenzellen vorhanden, die sie beschreiben.
Screenreader bieten Funktionen, die die Navigation in Tabellen vereinfachen. Wenn du dafür sorgst, dass Tabellenüberschriften immer auf bestimmte Zellen verweisen, kann dies für Screenreader-Nutzer hilfreich sein. Weitere Informationen zu Tabellenüberschriften.
|
nicht anwendbar
|
|
|
`[lang]`-Attribute weisen einen gültigen Wert auf
Wenn ein gültiger BCP-47-Sprachcode für Elemente angegeben wird, kann der Text besser von Screenreadern ausgesprochen werden. Informationen zur Verwendung des Attributs
lang. |
nicht anwendbar
|
|
|
`<video>`-Elemente enthalten ein `<track>`-Element mit `[kind="captions"]`
Wenn ein Video Untertitel enthält, können Menschen mit Hörbehinderung die Informationen im Video besser verstehen. Weitere Informationen zu Untertiteln in Videos.
|
nicht anwendbar
|
|
|
Dokument hat eine Hauptmarkierung.
Eine Hauptmarkierung hilft Nutzern von Screenreadern, Webseiten zu bedienen. Weitere Informationen zu Markierungen
|
bestanden
|
|
|
`autocomplete` Attribute werden korrekt verwendet
Die Werte des Attributs „
autocomplete“ müssen gültig und korrekt angewendet sein, damit Screenreader richtig funktionieren. Weitere Informationen zu gültigen Werten für die automatische Vervollständigung |
bestanden
|
|
|
Elemente mit „`role="none"`“ oder „`role="presentation"`“ stehen nicht in Konflikt
Es gibt bestimmte Fälle, in denen die semantische Rolle eines Elements mit „
role="none"“ oder „role="presentation"“ nicht in „none“ oder „presentation“ aufgelöst wird. Damit das Element aus der Baumansicht für Barrierefreiheit entfernt bleibt, solltest du dem Element keine globalen ARIA-Attribute hinzufügen und es nicht fokussierbar machen. Weitere Informationen zum Konflikt mit der Präsentationsrolle |
nicht anwendbar
|
|
|
SVG-Elemente mit der Rolle „`img`“ haben eine barrierefreie Textalternative
Achte darauf, dass SVG-Elemente mit der Rolle „
img“, „graphics-document“ oder „graphics-symbol“ eine barrierefreie Textalternative haben. Weitere Informationen zum Alt-Text für SVG-Dateien |
nicht anwendbar
|
|
|
Interactive controls are keyboard focusable
Custom interactive controls are keyboard focusable and display a focus indicator. Learn how to make custom controls focusable.
|
manuelle Prüfung nötig
|
|
|
Interactive elements indicate their purpose and state
Interactive elements, such as links and buttons, should indicate their state and be distinguishable from non-interactive elements. Learn how to decorate interactive elements with affordance hints.
|
manuelle Prüfung nötig
|
|
|
The page has a logical tab order
Tabbing through the page follows the visual layout. Users cannot focus elements that are offscreen. Learn more about logical tab ordering.
|
manuelle Prüfung nötig
|
|
|
Visual order on the page follows DOM order
DOM order matches the visual order, improving navigation for assistive technology. Learn more about DOM and visual ordering.
|
manuelle Prüfung nötig
|
|
|
User focus is not accidentally trapped in a region
A user can tab into and out of any control or region without accidentally trapping their focus. Learn how to avoid focus traps.
|
manuelle Prüfung nötig
|
|
|
The user's focus is directed to new content added to the page
If new content, such as a dialog, is added to the page, the user's focus is directed to it. Learn how to direct focus to new content.
|
manuelle Prüfung nötig
|
|
|
HTML5 landmark elements are used to improve navigation
Landmark elements (
<main>, <nav>, etc.) are used to improve the keyboard navigation of the page for assistive technology. Learn more about landmark elements. |
manuelle Prüfung nötig
|
|
|
Offscreen content is hidden from assistive technology
Offscreen content is hidden with display: none or aria-hidden=true. Learn how to properly hide offscreen content.
|
manuelle Prüfung nötig
|
|
|
Custom controls have associated labels
Custom interactive controls have associated labels, provided by aria-label or aria-labelledby. Learn more about custom controls and labels.
|
manuelle Prüfung nötig
|
|
|
Custom controls have ARIA roles
Custom interactive controls have appropriate ARIA roles. Learn how to add roles to custom controls.
|
manuelle Prüfung nötig
|
|
|
Tabellen haben unterschiedliche Inhalte im Zusammenfassungsattribut und in „`<caption>`“.
Das Zusammenfassungsattribut sollte die Tabellenstruktur beschreiben, während „
<caption>“ den Titel auf dem Bildschirm haben sollte. Korrektes Tabellen-Markup ist für Nutzer von Screenreadern hilfreich. Weitere Informationen zu Zusammenfassung und Bildunterschrift |
nicht anwendbar
|
|
|
Alle heading-Elemente haben einen Inhalt.
Eine Überschrift ohne Inhalt oder nicht zugänglicher Text verhindert, dass Nutzer von Screenreadern auf Informationen in der Seitenstruktur zugreifen. Weitere Informationen zu Überschriften
|
nicht anwendbar
|
|
|
ARIA-Rollen werden nur für kompatible Elemente verwendet
Vielen HTML-Elementen können nur bestimmte ARIA-Rollen zugewiesen werden. Die Verwendung von ARIA-Rollen für Elemente, für die sie nicht zulässig sind, kann die Barrierefreiheit der Webseite beeinträchtigen. Weitere Informationen zu ARIA-Rollen
|
nicht anwendbar
|
|
|
Bildelemente haben keine „`[alt]`“-Attribute, bei denen es sich um redundanten Text handelt.
Für informative Elemente sollte ein kurzer und beschreibender alternativer Text verwendet werden. Alternativer Text, der mit dem Text neben dem Link oder Bild identisch ist, kann für Nutzer von Screenreadern verwirrend sein, da der Text zweimal vorgelesen wird. Weitere Informationen zum Attribut „
alt“ |
nicht anwendbar
|
|
|
Identische Links haben denselben Zweck.
Links mit demselben Ziel sollten dieselbe Beschreibung haben, damit Nutzer den Zweck des Links besser verstehen und entscheiden können, ob sie ihm folgen möchten. Weitere Informationen zu identischen Links
|
nicht anwendbar
|
|
|
Elemente mit sichtbarem Textlabel haben keine passenden barrierefreien Namen.
Sichtbare Textlabels, die nicht mit dem barrierefreien Namen übereinstimmen, können für Nutzer von Screenreadern verwirrend sein. Weitere Informationen zu barrierefreien Namen
Warum bei kandlen-it.de: Die Würfel-Bausteine-Buttons (Design, Inhalt, SEO, Recht, Ladezeit, …) haben aria-label wie „1 · Design (Sichtbar)", der sichtbare Buttontext lautet aber nur „1 Design" — der sichtbare Text ist kein Teilstring des aria-label. Screenreader- und Spracheingabe-Nutzer können den Button dadurch nicht zuverlässig referenzieren.
Wie lösen: aria-label so umbauen, dass der sichtbare Text darin vorkommt (z. B. „Design – Sichtbar" statt „1 · Design (Sichtbar)"), oder ganz auf aria-label verzichten und den sichtbaren Text allein sprechen lassen.
|
nicht bestanden
|
|
|
Tabellen verwenden `<caption>` anstelle von Zellen mit dem `[colspan]`-Attribut, um Untertitel anzugeben.
Screenreader bieten Funktionen, die die Navigation in Tabellen vereinfachen. Wenn du dafür sorgst, dass Tabellen das tatsächliche Untertitelelement anstelle von Zellen mit dem
[colspan]-Attribut verwenden, kann das für Screenreader-Nutzer hilfreich sein. Weitere Informationen zu Untertiteln. |
nicht anwendbar
|
|
|
`<td>`-Elemente in einer großen `<table>` haben eine oder mehrere Tabellenüberschriften.
Screenreader bieten Funktionen, die die Navigation in Tabellen vereinfachen. Wenn du
<td>-Elementen in einer großen Tabelle (mindestens 3 Zellen in Breite und Höhe) eine entsprechende Überschrift gibst, kann das für Screenreader-Nutzer hilfreich sein. Weitere Informationen zu Tabellenüberschriften |
nicht anwendbar
|
Best Practices — 21 Audits
|
Verwendet HTTPS
Alle Websites sollten durch HTTPS geschützt werden – selbst wenn sie keine sensiblen Daten enthalten. Auch gemischte Inhalte, bei denen einige Ressourcen über HTTP geladen werden, obwohl die ursprüngliche Anfrage über HTTPS gestellt wurde, sind zu vermeiden. HTTPS verhindert, dass andere die Website manipulieren oder die Kommunikation zwischen deiner App und deinen Nutzern mitverfolgen können, und ist eine Voraussetzung für HTTP/2 und viele neue Webplattform-APIs. Weitere Informationen zu HTTPS.
|
bestanden
|
|
|
HTTP-Traffic wird auf HTTPS weitergeleitet
Achte darauf, den gesamten HTTP-Traffic zu HTTPS weiterzuleiten, damit sichere Webfunktionen für alle Nutzer aktiviert werden. Weitere Informationen.
|
nicht anwendbar
|
|
|
Fordert während des Seitenaufbaus keine Berechtigung zur Standortbestimmung an
Users are mistrustful of or confused by sites that request their location without context. Consider tying the request to a user action instead. Learn more about the geolocation permission. Also consider using the
<geolocation> element. |
bestanden
|
|
|
Fordert während des Seitenaufbaus keine Benachrichtigungsberechtigung an
Wenn Websites die Berechtigung zum Senden von Benachrichtigungen ohne Begründung anfordern, sind Nutzer schnell misstrauisch oder irritiert. Versuche stattdessen, die Anforderung mit Touch-Gesten zu verbinden. Weitere Informationen zum verantwortungsvollen Einholen der Berechtigung zum Senden von Benachrichtigungen.
|
bestanden
|
|
|
Sicherstellen, dass CSP effektiv gegen XSS-Angriffe wirkt
Eine starke Content Security Policy (CSP) reduziert das Risiko für Cross-Site-Scripting-Angriffe (XSS-Angriffe) erheblich. Weitere Informationen
|
informativ
|
|
|
Wirkungsvolle HSTS-Richtlinie verwenden
Durch die Implementierung des HSTS-Headers wird das Risiko von Downgrades bei HTTP-Verbindungen sowie von Abhörangriffen erheblich reduziert. Wir empfehlen eine schrittweise Einführung, bei der mit einem niedrigen „max‑age“-Wert begonnen wird. Hier findest du weitere Informationen zur Verwendung einer wirkungsvollen HSTS-Richtlinie.
|
informativ
|
|
|
Mit COOP für die richtige Isolation des Ursprungs sorgen
Mit der Cross-Origin-Opener-Policy (COOP) kann das übergeordnete Fenster von anderen Dokumenten wie Pop‑ups isoliert werden. Hier findest du weitere Informationen zur Implementierung eines COOP-Headers.
|
informativ
|
|
|
Clickjacking mit XFO oder CSP abschwächen
Der
X-Frame-Options-Header (XFO) oder die frame-ancestors-Anweisung im Content-Security-Policy-Header (CSP) steuern, wo eine Seite eingebettet werden kann. Wenn das Einbetten der Seite auf einigen oder allen Websites blockiert wird, können dadurch Clickjacking-Angriffe abgeschwächt werden. Weitere Informationen |
nicht anwendbar
|
|
|
DOM-basiertes XSS-Angriffe mit vertrauenswürdigen Typen reduzieren
Die
require-trusted-types-for-Richtlinie im Content-Security-Policy-Header (CSP) weist User-Agents an, die an DOM-XSS-Senkenfunktionen übergebenen Daten zu steuern. Weitere Informationen zum Reduzieren von DOM-basierten XSS-Angriffen mit vertrauenswürdigen Typen |
informativ
|
|
|
Erlaubt Nutzern, Inhalte in Eingabefelder einzufügen
Es ist nicht nutzerfreundlich, das Einfügen von Eingaben zu verhindern. Außerdem werden dadurch Passwortmanager blockiert, was die Sicherheit beeinträchtigt.Weitere Informationen zu nutzerfreundlichen Eingabefeldern.
|
bestanden
|
|
|
Zeigt Bilder mit einem korrekten Seitenverhältnis an
Die Bildgröße sollte dem natürlichen Seitenverhältnis entsprechen. Weitere Informationen zum Seitenverhältnis von Bildern.
|
bestanden
|
|
|
Stellt Bilder mit angemessener Auflösung bereit
Die originalen Abmessungen eines Bildes sollten proportional zu der Displaygröße und dem Pixel-Verhältnis sein, damit das Bild optimal angezeigt wird. Weitere Informationen zu responsiven Bildern.
|
bestanden
|
|
|
Seite verfügt über den HTML-DOCTYPE
Wenn du einen DOCTYPE angibst, verhinderst du, dass der Browser zum Quirks-Modus wechselt. Weitere Informationen zum Deklarieren eines DOCTYPE.
|
bestanden
|
|
|
Korrekt definierter Zeichensatz
Die Zeichencodierung muss deklariert werden. Dazu kann ein
<meta>-Tag in den ersten 1024 Byte des HTML-Codes oder im HTTP-Antwortheader „Content-Type“ angegeben werden. Weitere Informationen zum Deklarieren der Zeichencodierung. |
bestanden
|
|
|
Grundlegende Funktionen
Listet die auf der Seite verwendeten Webfunktionen und ihren Baseline-Status ab dem 2026-07-15 auf. Weitere Informationen zu Baseline
|
informativ
|
|
|
JavaScript-Bibliotheken erkannt
Alle Frontend-JavaScript-Bibliotheken auf der Seite wurden erkannt. Weitere Informationen.
|
informativ
|
|
|
Vermeidet veraltete APIs
Verworfene APIs werden aus dem Browser entfernt. Weitere Informationen zu verworfenen APIs.
|
bestanden
|
|
|
Vermeidet Drittanbieter-Cookies
Drittanbieter-Cookies werden möglicherweise in bestimmten Kontexten blockiert. Weitere Informationen zur Vorbereitung auf Einschränkungen für Drittanbieter-Cookies
|
bestanden
|
|
|
Es wurden keine Browserfehler in der Konsole protokolliert
In der Konsole protokollierte Fehler weisen auf ungelöste Probleme hin. Sie können durch fehlgeschlagene Netzwerkanfragen und andere Browserprobleme verursacht werden. Weitere Informationen
|
bestanden
|
|
|
Seite hat gültige Quellzuordnungen
Quellzuordnungen übersetzen reduzierten Code in den ursprünglichen Quellcode. Dies hilft Entwicklern beim Debugging in der Produktionsphase. Zusätzlich kann Lighthouse weitere Informationen liefern. Wir empfehlen, Quellzuordnungen bereitzustellen, um diese Vorteile zu nutzen. Weitere Informationen zu Quellzuordnungen.
|
bestanden
|
|
|
Keine Probleme im `Issues`-Bereich der Chrome-Entwicklertools
Im
Issues-Bereich der Chrome-Entwicklertools wurden ungelöste Probleme protokolliert. Sie können durch fehlgeschlagene Netzwerkanfragen, unzureichende Sicherheitsmaßnahmen und andere Browser-Probleme verursacht sein. Öffne den Bereich mit den Problemen in Chrome-Entwicklertools, um weitere Details zu den einzelnen Problemen aufzurufen. |
bestanden
|
SEO — 11 Audits
|
Seite ist nicht von Indexierung ausgeschlossen
Suchmaschinen können deine Seiten nicht in die Suchergebnisse aufnehmen, wenn sie nicht berechtigt sind, sie zu crawlen. Weitere Informationen zu Crawler-Anweisungen.
|
bestanden
|
|
|
Dokument enthält ein `<title>`-Element
Der Titel gibt Screenreader-Nutzern einen Überblick über die Seite. Nutzer von Suchmaschinen verlassen sich stark auf ihn, um zu entscheiden, ob eine Seite für ihre Suche relevant ist. Weitere Informationen zu Dokumenttiteln.
|
bestanden
|
|
|
Dokument enthält eine Meta-Beschreibung
Meta-Beschreibungen können in die Suchergebnisse aufgenommen werden, um die Seiteninhalte kurz zusammenzufassen. Weitere Informationen zu Meta-Beschreibungen.
|
bestanden
|
|
|
Seite hat einen gültigen HTTP-Statuscode
Seiten mit ungültigen HTTP-Statuscodes werden möglicherweise nicht richtig indexiert. Weitere Informationen zu HTTP-Statuscodes.
|
bestanden
|
|
|
Links haben beschreibenden Text
Wenn du beschreibenden Linktext verwendest, können Suchmaschinen deine Inhalte besser verstehen. Informationen zu barrierefreien Links.
|
bestanden
|
|
|
Links können gecrawlt werden
Suchmaschinen verwenden möglicherweise
href-Attribute für Links, um Websites zu crawlen. Das href-Attribut von Anchor-Elementen muss auf ein geeignetes Ziel verweisen, damit mehr Seiten auf der Website gefunden werden können. Informationen dazu, wie Links für Crawler zugänglich gemacht werden |
bestanden
|
|
|
robots.txt ist gültig
Wenn deine robots.txt-Datei fehlerhaft ist, können Crawler möglicherweise nicht nachvollziehen, wie deine Website gecrawlt oder indexiert werden soll. Weitere Informationen zu robots.txt.
|
bestanden
|
|
|
Bildelemente verfügen über `[alt]`-Attribute
Für informative Elemente sollte ein kurzer, beschreibenden alternativer Text verwendet werden. Dekorative Elemente können mit einem leeren ALT-Attribut ignoriert werden. Weitere Informationen zum Attribut
alt. |
bestanden
|
|
|
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 zu
hreflang. |
bestanden
|
|
|
Dokument enthält ein gültiges `rel=canonical`-Element
Über kanonische Links wird angegeben, welche URL in den Suchergebnissen angezeigt werden soll. Weitere Informationen zu kanonischen Links.
|
bestanden
|
|
|
Strukturierte Daten sind gültig
Du kannst das Testtool für strukturierte Daten ausführen, um strukturierte Daten zu validieren. Weitere Informationen zu strukturierten Daten
|
manuelle Prüfung nötig
|
Doku — wie das technisch läuft
Der Lauf nutzt engine/modules/pagespeed.py aus dem web-audit-Tool
(/var/www/audit.kandlen-it.dev/engine/) und ruft die Google-PageSpeed-Insights-API
(pagespeedonline/v5/runPagespeed) für die Kategorien Performance,
Accessibility, Best-Practices und SEO auf.
Diese Seite zeigt eine gespeicherte Momentaufnahme
(data/kandlen-lighthouse.json), keinen Live-Aufruf bei jedem
Seitenbesuch — das schont das API-Kontingent. Neu erzeugen:
cd /var/www/audit.kandlen-it.dev/engine
python3 -c "
import json, modules.pagespeed as ps
out = {s: ps.run('https://kandlen-it.de', s) for s in ['mobile','desktop']}
json.dump(out, open('/var/www/lighthouse.kandlen-it.dev/data/kandlen-lighthouse.json','w'))
"