Annika Vollmer ist im dritten Lehrjahr und hat für einen Fahrradladen in Freiburg die Seite mit den Öffnungszeiten und dem Reparaturformular gebaut. Auf dem Telefon dauert es 4,8 Sekunden, bis die Öffnungszeiten dastehen. Der Server ist nach 120 Millisekunden fertig.
Alles zwischen diesen beiden Zahlen passiert, nachdem die Antwort schon angekommen ist, und der Server hat darauf keinen Einfluss mehr. Dieses Thema ist zuerst für diesen Abstand da.
Der zweite Abstand ist deutsch. Von den 41 Dateien, die diese Seite anfordert, gehen zwei an einen Server in den Vereinigten Staaten, und dafür gibt es hier ein Urteil.
41 Anfragen, und zwei davon verlassen das Land
Ein Telefon hat eine Seite angefordert. Es hat die Adresse aufgelöst, eine Verbindung geöffnet und gesichert, eine Zeile geschickt und eine Datei mit Auszeichnung zurückbekommen. Diese Datei ist nicht die Seite. Sie ist eine Liste, die alles benennt, was die Seite sonst noch braucht, denn der Browser stellt eine Anfrage für das HTML und eine für jede Datei, die es nennt. Bei Annika sind das 41: ein Stylesheet, zwei Schriftschnitte, ein Skript für die Karte und siebenunddreißig Fotos von Rädern.
In Deutschland ist diese Liste zweimal interessant. Einmal, weil jede Zeile Zeit kostet. Und einmal, weil zwei der Zeilen auf einen fremden Server zeigen: Die Schriftschnitte kommen von Google Fonts, eingebunden mit der Zeile, die in jeder Anleitung steht.
Eine Schrift von einem fremden Server überträgt die IP-Adresse des Besuchers. Das Landgericht München I hat dafür am 20. Januar 2022 einen Seitenbetreiber zu Unterlassung und 100 € Schadensersatz verurteilt, weil die Adresse ohne Einwilligung in die Vereinigten Staaten gegangen ist. Danach sind Tausende von Abmahnungen verschickt worden. Das Urteil ist eine erste Instanz und kein Grundgesetz, und die Rechnung darunter ändert es trotzdem.
Dazu kommt §25 TDDDG verlangt die Einwilligung, bevor etwas auf dem Gerät gelesen wird, und die Karte im Formular setzt genau so etwas. Für die Schrift ist die Antwort einfach und macht die Seite nebenbei schneller: Die Datei wird auf den eigenen Server gelegt und aus dem eigenen Stylesheet geladen. Zwei Anfragen an eine fremde Adresse werden zu null, die Verbindungsaufnahme dorthin entfällt, und die juristische Frage stellt sich nicht mehr.
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-display: swap; }
font-display: swap ist die zweite Hälfte davon: Der Text erscheint sofort in der Systemschrift und wechselt, sobald die eigene Datei da ist. Ohne diese Zeile wartet der Browser auf die Schrift und zeigt nichts.
Der Server ist fertig, die Seite nicht
Deshalb sind Serverzeit und Seitenzeit zwei Zahlen mit zwei Verantwortlichen. Time to First Byte ist der Server, Largest Contentful Paint alles danach. Annikas Time to First Byte liegt bei 120 Millisekunden und ist gut. Ihr Largest Contentful Paint liegt bei 4,8 Sekunden, und keine Arbeit am Server verschiebt das, weil der Server längst fertig ist.
Von den 41 Anfragen dürfen die meisten kommen, wann sie wollen. Eine nicht. Ein Stylesheet im head hält die Seite weiß, bis es angekommen ist. Der Browser zeichnet keinen Text, den er womöglich in einer anderen Schrift und Größe neu zeichnen müsste, also wartet er. Annikas Stylesheet ist eine Datei mit 180 kB und enthält die Regeln für die ganze Seite; die Öffnungszeiten brauchen davon etwa ein Zehntel.
Die Abhilfe ist kein Framework. Die Regeln für den ersten Bildschirm stehen in der Auszeichnung selbst, der Rest kommt später, und aus vier Sekunden Weiß werden Text nach 400 Millisekunden und Fotos, die dahinter nachlaufen. Welche Abwägungen daran hängen, steht unter Ladezeit.
Ein zweiter Satz gehört dazu, weil er eine Zeile Konfiguration ist. Ein 301 ist dauerhaft, ein 302 nicht, und der Browser merkt sich den 301. Die alte Adresse des Fahrradladens antwortete mit einem 302, das jemand 2021 zum Ausprobieren gesetzt hatte, und jedes wiederkehrende Telefon bezahlte dafür einen zusätzlichen Umweg. Bei einem 301 wird der Umweg einmal je Browser bezahlt und verschwindet.
Die Reihenfolge, die seit Juni 2025 im Gesetz steht
Die Reihenfolge, die trägt, ist die des Browsers: erst HTML, weil alles andere daran hängt und weil ein richtig ausgezeichnetes Dokument bereits lesbar, auffindbar und vorlesbar ist. Dann CSS, das größte einzelne Fach dieses Themas. Erst danach Frontend-Frameworks.
Rückwärts genommen sieht das Ergebnis lange nach Fortschritt aus. Jemand baut Oberflächen, kann aber nicht sagen, was ein Element ist oder warum die Seite keine Überschriften hat. Weder das Framework noch die Anleitung erwähnt es.
In Deutschland hat dieser Fehler seit einem Jahr einen Preis. Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz für Online-Shops und für eine Reihe weiterer Dienste an Verbraucher, mit einer Ausnahme für Kleinstunternehmen. Verlangt wird das, was aus richtiger Auszeichnung ohnehin folgt: Überschriften in einer Ordnung, Formularfelder mit einem verknüpften Label, ausreichender Kontrast, Bedienbarkeit mit der Tastatur. Der Fahrradladen verkauft online Schläuche, also gilt es für ihn, und die Reparaturanfrage ist ein Formular mit vier Feldern, von denen zwei kein Label hatten.
Der Aufbau
Was halten muss, damit die Schicht darüber überhaupt etwas bedeutet
Von oben nach unten zu lesen. Jede Schicht ruht auf der darunter, und ein Fehler unten fällt durch alles darüber hindurch.
- Das Komponenten-FrameworkWo die meisten anfangen, und die Schicht mit dem kürzesten Gedächtnis
- Die GestaltungAnordnung und Aussehen, das größte Fach dieses Themas
- Die AuszeichnungStruktur, Bedeutung, und seit Juni 2025 auch die Schicht, die das Gesetz liest
- Der Vertrag über die LeitungAnfragen, Statuscodes und Zwischenspeicher, die alle drei darüber erben
Über den Umfang sagt die Pyramide nichts. Die unteren beiden Schichten sind am wenigsten Code und am teuersten falsch, weil alles darüber voraussetzt, dass sie erledigt wurden.
Der Stillstand: die fertige Seite, die nicht online geht
Hier bleiben deutsche Lernende stehen, und es ist nicht der Punkt, an dem etwas kaputtgeht. Es ist der Punkt, an dem alles funktioniert. Sobald das Formular sich etwas merken soll, gibt es einen Server, eine Datenbank und eine Ablage, und damit fangen Fragen an, die kein Kurs stellt: Wo stehen die Daten, wer ist der Auftragsverarbeiter, was steht in der Datenschutzerklärung, wer steht im Impressum nach §5 DDG.
Die Antwort auf all das ist kurz und wird selten ausgesprochen, deshalb hier: Für ein Reparaturformular ist es ein Vertrag zur Auftragsverarbeitung mit dem Anbieter, zwei Absätze in der Datenschutzerklärung und ein Impressum, das der Ladeninhaber ohnehin hat. Es ist ein Nachmittag, kein Projekt.
Gefährlich ist die andere Reaktion, und sie ist die häufigere: Die Seite bleibt auf dem eigenen Rechner, weil Nichtveröffentlichen sich sicher anfühlt. Damit fehlt genau der Schritt, an dem sich zeigt, ob etwas funktioniert. Was hinter dem Formular liegt, ist ohnehin ein anderes Fach mit demselben Berufsbild und steht unter Backend; was an einem öffentlich erreichbaren Formular sofort angegriffen wird, unter Websicherheit.
Werkzeuge: der Reiter, den fast niemand öffnet
Der Netzwerk-Reiter in den Entwicklerwerkzeugen des Browsers ist das nützlichste Werkzeug auf dieser Seite, und in Deutschland beantwortet er zwei Fragen statt einer. Er listet alle 41 Anfragen in ihrer Reihenfolge auf, mit dem, was worauf gewartet hat, und er ersetzt das Raten, welche Datei langsam war. Nach Fremd-Anbieter sortiert, listet derselbe Reiter jede Adresse auf, die dieser Seitenaufruf kontaktiert hat, und das ist genau die Liste, die eine Datenschutzerklärung beschreiben muss. Er ist kostenlos und in jedem Browser schon installiert.
Lighthouse, im selben Fenster, gibt den Zahlen einen Namen und eine Zielmarke und hat aus Ladezeit eine Messung statt einer Meinung gemacht. Seine Bewertung ist eine Zusammenfassung und keine Diagnose: Sie nennt Annika 4,8 Sekunden und sagt ihr nicht, dass ein einziges Stylesheet die Ursache ist. Die Barrierefreiheitsprüfung darin findet ungefähr ein Drittel der Punkte, die das Gesetz meint, und die beiden fehlenden Labels findet sie.
Ein Assistent im Editor schreibt die Einbindung von Google Fonts hin, sobald eine Schrift erwähnt wird, weil sie in seinen Beispielen millionenfach so dasteht. Er wird nicht dazuschreiben, dass diese eine Zeile in Deutschland die teuerste der Datei ist.
Bleibt die Frage, was passiert, wenn auf beiden Seiten kein Mensch mehr wartet, sondern zwei Programme miteinander reden. Das ist ein anderer Vertrag mit anderen Regeln und steht unter APIs. Wie eine solche Seite auf ein Gerät kommt, das jemand in der Hand hält, ist wiederum App-Entwicklung.