Die Reservierung der Bildmaße.

Maßreservierung heißt, dem Browser vor dem Laden einer Ressource mitzuteilen, wie viel Platz sie einnehmen wird — und schließt die häufigste Quelle der Layoutverschiebung in einem Schritt.

An erster Stelle der Ursachenliste der Layoutverschiebung stehen Bilder ohne Maße, und die Lösung ist deutlich billiger als die übrigen: Breite und Höhe ans Bild schreiben. Eine einzeilige Korrektur beseitigt auf den meisten Websites den Großteil der Verschiebung.

Der Grund des Überspringens ist historisch: Als das responsive Design sich verbreitete, glaubte man, feste Maße würden die Responsivität brechen, und die Attribute wurden entfernt. Damals war das teils richtig; heute ist es völlig falsch.

Moderne Browser berechnen das Verhältnis

Die heutigen Browser berechnen aus den Breiten- und Höhenattributen das Seitenverhältnis und bewahren es im responsiven Layout. Die Attribute zu schreiben heißt also nicht, dass das Bild in fester Größe erscheint — nur, dass sein Verhältnis bekannt ist.

Praktisch geschieht dies: Das Bild dehnt sich auf hundert Prozent Breite, aber seine Höhe wird proportional berechnet und der Platz vorab reserviert. Kommt die Ressource, setzt sie sich in den reservierten Platz, und nichts verschiebt sich.

Zu schreiben sind die ECHTEN Pixelmaße des Bildes — nicht die Anzeigegröße. Das Verhältnis kommt aus diesen zwei Zahlen, und die Anzeigegröße bestimmt das CSS.

Bei responsiven Bildern

Werden für verschiedene Breiten verschiedene Dateien ausgeliefert, entsteht eine Frage: Wessen Maße werden geschrieben? Die Antwort: Die Dateien sollten dasselbe Seitenverhältnis tragen — dann ergibt sich, egal welche geschrieben wird, dasselbe Verhältnis.

Sind die Verhältnisse verschieden — etwa quadratischer Zuschnitt auf Mobil, breiter am Desktop —, genügen die Attribute nicht, und im CSS muss je Umbruch ein Verhältnis definiert werden. Der typische Fall bei Bildern mit Art-Direction.

1. Ableitungen mit gleichem Verhältnis — die Breiten- und Höhenattribute genügen.
2. Zuschnitte mit verschiedenen Verhältnissen — eine Verhältnisdefinition je Umbruch ist nötig.
3. Inhalt unbekannter Größe — für den schlimmsten Fall wird eine Mindesthöhe reserviert.
4. Eingebettete Rahmen — der Container bekommt ein Verhältnis; das Attribut wirkt nicht.
5. Werbeflächen — ein Container fester Höhe; kommt die Werbung nie, bleibt eine Lücke, aber nichts verschiebt sich.

Der letzte Punkt trägt eine Abwägung, die bewusst zu treffen ist: Platz zu reservieren hinterlässt eine leere Fläche, wenn die Ressource nicht kommt. Gewählt wird zwischen Verschiebung und Lücke, und fast immer ist die Lücke besser — der Nutzer sieht die Lücke und geht weiter; die Verschiebung erleidet er.

Die Umsetzung auf dieser Website

Auf dieser Website ist die Reservierungsdisziplin je Bildtyp aufgebaut und wird gemessen. Die Maße der Vitrinenzuschnitte sind reserviert, und die Prüfsuite misst auf vier Routen, dass das Bild wirklich lädt, sein Format modern ist und seine Größe reserviert.

Bei den Live-Vorschauvideos geschieht die Reservierung mit dem Posterbild: Bevor das Video lädt, hält ein Bild gleichen Verhältnisses seinen Platz. Bei aktiver Präferenz für reduzierte Bewegung lädt das Video gar nicht, und das Poster wird dauerhaft — die Suite misst in diesem Zustand eigens, dass das Poster wirklich lädt.

Das gemessene Ergebnis: Die Layoutverschiebung dieser Website und der drei betreuten Projekte ist 0,001. Googles gute Schwelle ist 0,1; der gemessene Wert ist ein Prozent der Schwelle. Kein Optimierungserfolg, sondern die natürliche Folge einer von Anfang an gesetzten Regel.

Zwischen Verschiebung und Lücke gewinnt die Lücke — der Nutzer sieht die Lücke und geht weiter; die Verschiebung erleidet er.

Reservierung jenseits der Bilder

Der Begriff der Maßreservierung ist nicht auf Bilder begrenzt; er gilt für alles, was spät kommt oder sich spät bemisst. Werbeflächen, eingebettete Social-Boxen, Kartenkomponenten, Videoplayer und Listen, deren Länge von Nutzerdaten abhängt — alles braucht Reservierung.

Die Methode variiert je Typ. Für Inhalte mit festem Verhältnis lässt sich einem Container ein Verhältnis geben. Für Inhalte unbekannter Höhe wird eine Mindesthöhe reserviert — kommt die Ressource nie, bleibt eine Lücke, aber nichts verschiebt sich.

1. Festes Verhältnis — der Container bekommt ein Verhältnis; der Inhalt sitzt beim Ankommen exakt.
2. Unbekannte Höhe — eine Mindesthöhe wird reserviert; ein für den häufigsten Fall gemessener Wert.
3. Variable Listen — Skelettbildschirme; ein Platzhalter gleicher Höhe, bis der Inhalt kommt.
4. Werbefläche — Container fester Höhe; leer zu bleiben schlägt das Verschieben.
5. Benachrichtigungsleiste — darf nicht in den Fluss; entweder von Anfang an Platz reservieren oder als Überlagerung oben halten.

Der fünfte Punkt ist eine der zerstörerischsten Verschiebungsquellen und die am leichtesten behobene. Eine nachträglich ganz oben eingefügte Leiste drückt ALLES darunter nach unten — der Verschiebungswert fällt nahezu maximal aus. Dieselbe Leiste als Überlagerung oben verschiebt nichts.

Das allgemeine Prinzip: Später kommender Inhalt darf den Fluss des bestehenden nicht ändern. Entweder ist sein Platz von Anfang an reserviert, oder er lebt auf einer Ebene außerhalb des Flusses. Eine dritte Option gibt es nicht — und wird keine der beiden gewählt, erzeugt das Standardverhalten die Verschiebung.

Eine praktische Checkliste

Übersetzt man diese Seite in einen Prüfschritt, ist an der Maßreservierung Folgendes zu prüfen. Die Liste bleibt kurz, denn lange Listen werden nicht abgeschritten; sechs Punkte passen in eine Sitzung.

1. Trägt jedes Bild Breite und Höhe?
2. Sind die Werte die echten Pixelmaße — nicht die Anzeigegröße.
3. Teilen die responsiven Ableitungen dasselbe Verhältnis?
4. Haben die Container der eingebetteten Rahmen ein Verhältnis?
5. Geht später Inhalt in den Fluss, oder ist er eine Überlagerung?
6. Wurde im verlangsamten Netz getestet — auf schneller Verbindung zeigen sich die Verschiebungen nie.

Der letzte Punkt ist die Vorbedingung des Messens: Auf einer schnellen Maschine kommt alles fast gleichzeitig, und die Verschiebungen zeigen sich nie. In der verlangsamten Umgebung tauchen sie der Reihe nach auf, und jede Quelle lässt sich markieren.

Bei der Wahl zwischen Verschiebung und Lücke gewinnt die Lücke — der Nutzer sieht die Lücke und erleidet die Verschiebung.

Ein Rahmen zum Schluss: Die Maßreservierung ist einer der Posten mit der höchsten Rendite der Performance-Arbeit. Ihre Kosten sind fast null — meist das Schreiben zweier Attribute —, und im Gegenzug schließt sich die häufigste Quelle der Layoutverschiebung vollständig. Der einzige Grund des Überspringens ist Gewohnheit: In den frühen Jahren des responsiven Designs war das Entfernen der Attribute richtig, und die Gewohnheit überlebte, nachdem die Browser das Verhältnis zu berechnen begannen. Eine Gewohnheit ohne heutige Gültigkeit.