Über diese Seite

Eine kleine statische Website ist schnell gebaut, insbesondere mit der Hilfe einer netten KI. Dabei kann man ja wohl nicht so viel falsch machen, oder?

Anhand dieser Website zeige ich, was ich unter gutem Frontend verstehe: sicher, barrierefrei, schnell und ohne Ballast. Die folgenden Inhalte zeigen, welche Gedanken dahinter stecken.

Diese Website habe ich mit sehr viel Liebe zum Detail, Claude Code (Opus 5.5, Extra hoch), Astro und statichost.eu entwickelt.

Auf einen Blick

Lighthouse, alle vier Kategorien

100

MDN HTTP Observatory

A+

Erster Aufruf auf dem Handy

89 KB

Ganze Website offline

480 KB

Kontrast im Fließtext nach WCAG

AAA

Zoom ohne Verlust

400 %

Sicherheit

Die Seite ist rein statisch: keine Datenbank, kein Code auf dem Server, keine Formulare. Was es nicht gibt, kann niemand angreifen. Dazu kommen:

• Content Security Policy: Der Browser lädt nur Dateien von diesem Server und führt nur das eine Skript aus, das über seinen Hash freigegeben ist.
• Trusted Types: sperren Einfallstore für eingeschleusten Code wie innerHTML.
• HSTS und weitere Header: erzwingen HTTPS und verhindern, dass fremde Seiten diese einbetten.
• DNSSEC und CAA: Die Einträge der Domain sind signiert, Zertifikate darf nur Let’s Encrypt ausstellen.
• security.txt: sagt nach RFC 9116, wie man mir eine gefundene Lücke meldet.

Das Ergebnis in unabhängigen Tests:

Datenschutz

Keine Cookies, kein Tracking, keine Analyse-Werkzeuge, keine eingebetteten Inhalte. Schriften und Bilder liegen auf demselben Server wie die Seite, somit fragt der Browser auch keinen anderen Server an. Deshalb gibt es auch kein Cookie-Banner: Es gibt schlicht nichts, wozu man einwilligen müsste.

Gehostet wird bei statichost.eu, einem europäischen Anbieter, der keine IP-Adressen speichert. Selbst die Sprachwahl kommt ohne Cookie aus: Die deutsche und die englische Fassung haben eigene Adressen, gewechselt wird über einen normalen Link. Alles Weitere steht in der Datenschutzerklärung.

Barrierefreiheit

Ziel ist die WCAG 2.2 auf Stufe AA, an vielen Stellen mehr:

• Kontrast: Fließtexte erreichen mindestens 7:1 und damit Stufe AAA, alles andere mindestens die geforderten 4,5:1.
• Tastatur: Jedes Bedienelement ist mit der Tabulatortaste erreichbar und zeigt einen deutlichen Fokusrahmen. Klickflächen sind mindestens 24 Pixel hoch.
• Screenreader: klare Überschriften und Bereiche, Alternativtexte und Sprachangaben. Den Link „English“ liest ein Screenreader auch englisch vor.
• Eigene Einstellungen: Die Seite funktioniert mit 400 % Zoom, mit größeren Text- und Zeilenabständen, im Kontrastmodus von Windows und ohne Übergänge, wenn das System weniger Bewegung wünscht.
• Ohne JavaScript: Alles funktioniert auch, wenn es abgeschaltet ist.

Ein Prüfskript testet alle Seiten in beiden Sprachen mit axe-core und prüft Tab-Reihenfolge, Zoom, Textabstände und Kontrastmodus.

Performance

Beim ersten Aufruf auf dem Handy lädt die Startseite 8 Dateien mit zusammen rund 89 KB.

Dahinter stecken ein paar bewusste Entscheidungen:

• Kein Framework im Browser: Astro baut beim Veröffentlichen fertiges HTML. Im Browser läuft nur ein kleines Skript, vor allem für den Offline-Modus der App.
• Schriften: vier Schnitte mit zusammen rund 50 KB, weil sie nur die Zeichen enthalten, die die Seite braucht. Beim Nachladen springt nichts.
• Bilder: das Porträt als AVIF, WebP und JPEG in mehreren Größen. Der Browser nimmt das kleinste passende.
• Zwischenspeicher: CSS, Schriften und Bilder behält der Browser ein Jahr, weil sich bei jeder Änderung ihr Dateiname ändert. HTML fragt er jedes Mal neu an, Änderungen sind also sofort sichtbar.

Installierbar und offline

Die Seite lässt sich wie eine App installieren: in Chrome und Edge über „App installieren“, auf dem iPhone in Safari über „Teilen“ und „Zum Home-Bildschirm“. Sie öffnet sich dann in einem eigenen Fenster, auf Englisch, wenn sie von der englischen Fassung aus installiert wurde.

Installiert funktioniert sie auch ohne Internet. Beim ersten Start legt ein Service Worker alle Seiten in beiden Sprachen samt Schriften, Bildern und Kontaktdatei im Browser ab, zusammen rund 480 KB. Wer die Seite nur im Browser besucht, bekommt nichts davon gespeichert.

Sorgfalt im Detail

• Suchmaschinen und Vorschauen: strukturierte Daten nach schema.org, Angaben zu beiden Sprachen, eine Sitemap und eigene Vorschaubilder für LinkedIn und Messenger.
• Kontakt speichern: Die Kontaktdatei mit Foto entsteht beim Veröffentlichen aus denselben Daten wie die Seite und landet mit einem Klick im Adressbuch.
• Druck: Auf Papier wird die Startseite zur Visitenkarte in Schwarz auf Weiß, mit QR-Codes zur Website und zur Kontaktdatei.
• Für Menschen und Maschinen: Die humans.txt nennt, wer hinter der Seite steht, die llms.txt fasst sie für KI-Assistenten zusammen.
• Und ein Gruß an alle, die die Entwicklerwerkzeuge des Browsers öffnen.

Designsystem

Auch für eine kleine Website lohnt sich ein Designsystem:

• Einheitlich: Farben, Schriften, Abstände und Bausteine sind einmal festgelegt und sehen auf jeder Seite gleich aus.
• Barrierefrei von Anfang an: Kontraste, Fokusrahmen und Klickflächen sind geprüft, bevor eine neue Seite entsteht.
• Leicht zu ändern: Eine Änderung an einer Stelle gilt auf allen Seiten.

Alle Regeln mit Beispielen stehen im Designsystem.

Stand der Messwerte: Oktober 2026