Name: larsderidder/theredbeard-pi-agent
Author: Community

Regeln für die Webentwicklung

Leistung

Bilder sind der häufigste Grund für langsame Websites – verwende WebP/AVIF, lade Bilder „below the fold“ träge (lazy-load) und setze explizite Breite/Höhe, um Layoutverschiebungen zu vermeiden.
Rendering-blockierendes CSS verzögert die erste Darstellung – binde kritisches CSS inline im <head> ein, verschiebe den Rest.
Drittanbieter-Skripte (Analytics, Chat-Widgets) verursachen oft 500ms+ zusätzliche Ladezeit – lade sie mit async oder defer, und prüfe sie regelmäßig.
Schriftarten verursachen unsichtbaren Text-Blinker (FOIT) – verwende font-display: swap und lade kritische Schriftarten vor.
Messe mit Lighthouse im Inkognito-Modus – Erweiterungen verfälschen die Ergebnisse.

Beginne CSS mit mobilen Styles und füge Komplexität mit min-width-Media-Queries hinzu – es ist einfacher, aufzuskalieren als abzuspecken.
Touch-Ziele benötigen mindestens 44x44px – Finger sind ungenau, kleine Buttons frustrieren Nutzer.
Teste auf echten Geräten, nicht nur im Browser-DevTools – Drosselungs-Simulationen übersehen echte Ruckler.
Horizontaler Scroll ist ein kritischer Fehler – teste jede Seite mindestens bei 320px Breite.
Das viewport-Meta-Tag ist erforderlich: <meta name="viewport" content="width=device-width, initial-scale=1">

Jedes <img> benötigt alt-Text – leeres alt="" für dekorative Bilder, beschreibenden Text für bedeutungsvolle.
Farbkontrast-Verhältnis mindestens 4,5:1 für Fließtext – verwende den WebAIM-Kontrastprüfer.
Formular-Eingaben müssen mit <label>-Elementen verknüpft sein – Platzhalter allein sind nicht barrierefrei.
Tastaturnavigation muss funktionieren – teste jedes interaktive Element mit der Tabulatortaste.
Screenreader geben die Überschriften-Hierarchie aus – verwende H1-H6 in logischer Reihenfolge, überspringe niemals Ebenen.

Nur eine <h1> pro Seite – sie ist der Seitentitel, kein Gestaltungswerkzeug.
Verwende semantische Elemente: <nav>, <main>, <article>, <aside>, <footer> – sie kommunizieren die Struktur an Browser und assistive Technologien.
<button> für Aktionen, <a> für Navigation – verwende keine divs mit Klick-Handlern.
Externe Links sollten rel="noopener" haben – verhindert Sicherheitslücken bei target="_blank".
Validiere HTML – fehlerhaftes Markup führt zu unvorhersehbarem Rendering in verschiedenen Browsern.

Vermeide !important – es zerstört die Kaskade und erschwert das Debugging. Korrigiere stattdessen die Spezifität.
Verwende relative Einheiten (rem, em, %) anstelle von festen px für Text – respektiert die Schriftgrößen-Einstellungen der Nutzer.
CSS-Custom-Properties (Variablen) reduzieren Wiederholungen – definiere Farben und Abstände einmal, verwende sie überall.
Flexbox für 1D-Layouts, Grid für 2D – zwinge keines, die Arbeit des anderen zu erledigen.
Teste ohne CSS-Ladung – der Inhalt sollte auch in einfachem HTML lesbar sein.

Fehlendes Favicon verursacht 404-Spam in Server-Logs – füge immer eines hinzu, auch ein einfaches PNG.
Fehlendes <html lang="en"> beeinträchtigt die Aussprache von Screenreadern.
Hartcodierte http://-Links brechen auf HTTPS-Seiten – verwende protokollrelative // oder immer https://.
Gehe nicht davon aus, dass JavaScript verfügbar ist – Kerninhalte sollten ohne JS funktionieren (progressive Verbesserung).
Vergiss Druck-Styles nicht – füge @media print für Seiten hinzu, die Nutzer drucken könnten (Quittungen, Artikel).

Kanonische URLs müssen mit der tatsächlich vom Server ausgelieferten URL übereinstimmen – eine Abweichung (z. B. abschließender Slash vs. kein Slash) verwirrt Google und kann die Indexierung verhindern.
Jede Inhaltsseite benötigt mindestens einen internen Link, der auf sie verweist – Seiten, die nur in einer Sitemap, aber von keiner anderen Seite referenziert werden, werden von Googles Crawler priorisiert herabgestuft.
Inhaltsfilter in Vorlagen können Seiten stillschweigend aus der Navigation ausschließen – überprüfe, ob alle Seiten durch Link-Folgen von der Startseite aus erreichbar sind, nicht nur durch Prüfung der Sitemap.
„Entdeckt – derzeit nicht indexiert“ in der Search Console bedeutet meist fehlende interne Links, keinen technischen Block – behebe zuerst die Verlinkung, bevor du eine Indexierung anforderst.

Teste alle Formulare, ob sie tatsächlich absenden – defekte Kontaktformulare verlieren stillschweigend Leads.
Prüfe, ob die 404-Seite existiert und hilfreich ist – die Standard-Server-404 wirkt unprofessionell.
Überprüfe Social-Sharing-Vorschauen mit Open Graph-Tags – teste in den Facebook-/Twitter-Debugging-Tools.
Reiche die Sitemap bei der Google Search Console ein – beschleunigt die Indexierung.
Richte Uptime-Überwachung ein – erfahre von Ausfallzeiten, bevor es die Nutzer tun.