Nein. Teuer sind selten die Gestaltungsideen, sondern die bequemen Umsetzungen: vier Schriftschnitte statt zwei, ein Hintergrundvideo statt eines optimierten Standbilds, eine Animationsbibliothek für einen Einblendeffekt, ein Slider für drei Aussagen. Wer ein Gewichtsbudget in Kilobyte vereinbart und es zur Abnahmebedingung macht, behält beides — Ausdruck und Tempo.
Welche Gestaltungsentscheidungen kosten wirklich Ladezeit?
Ein Blick auf typische Startseiten zeigt schnell, wo das Gewicht sitzt. Es sind fast immer dieselben fünf Posten, und nur einer davon ist wirklich unverzichtbar.
- Webschriften: mehrere Familien mit je vier Schnitten summieren sich leicht auf mehrere hundert Kilobyte.
- Hintergrundvideo im oberen Seitenbereich: oft der mit Abstand größte Einzelposten der Seite.
- Animations- und Scroll-Bibliotheken: liefern für einen Einblendeffekt ein vollständiges Framework mit.
- Slider und Karussells: bringen Bedienlogik, Berührungsgesten und mehrere Bilder gleichzeitig mit.
- Unkomprimierte Grafiken und Illustrationen: einzelne Bilder im Megabyte-Bereich sind keine Seltenheit.
Bilder verdienen dabei eine eigene Zeile in der Rechnung, weil sie in fast jedem Projekt der größte Posten sind und zugleich am leichtesten zu entschärfen. Moderne Formate wie AVIF und WebP, mehrere Größenvarianten über das Attribut srcset, feste Breiten- und Höhenangaben gegen das Nachrutschen des Layouts und verzögertes Laden für alles unterhalb des ersten Bildschirms — das ist Handwerk, keine gestalterische Einschränkung.
Auffällig ist, was auf dieser Liste fehlt: Weißraum, Typografie-Hierarchie, Farbklima, Rasterdisziplin, Gestaltung von Zuständen. Die Mittel, die einer Seite Haltung geben, wiegen nichts. Was wiegt, sind Effekte — und Effekte sind austauschbarer, als es in der Präsentation wirkt.
Wie viel Wirkung steckt tatsächlich in der Hausschrift?
Eine eigene Schrift trägt Markencharakter, das ist unbestritten. Nur wird sie meist zu großzügig eingekauft. Zwei Schnitte — ein Buchschnitt und ein kräftiger Schnitt — decken den weit überwiegenden Teil aller Anwendungsfälle ab. Kursive Varianten und Zwischenstärken werden bestellt, aber selten verwendet.
Drei technische Hebel gibt es zusätzlich. Selbsthosting im Format WOFF2 spart gegenüber älteren Formaten deutlich. Eine Zeichensatzbeschränkung auf Lateinisch entfernt Zeichenvorräte, die eine deutschsprachige Website nie braucht. Und die Eigenschaft font-display mit dem Wert swap sorgt dafür, dass der Text sofort in der Systemschrift erscheint und nicht unsichtbar auf die Webschrift wartet.
Der Systemschrift-Fallback verdient dabei mehr Sorgfalt, als er üblicherweise bekommt. Wenn Ersatzschrift und Hausschrift ähnliche Proportionen haben und Sie die Ersatzschrift über die Eigenschaften size-adjust und ascent-override angleichen, ist der Wechsel kaum wahrnehmbar. Ohne diese Angleichung springt das ganze Layout, sobald die Schrift eintrifft.
Rechnen Sie den Posten einmal konkret nach, statt ihn zu schätzen. Vier Schnitte einer Familie mit vollem Zeichenvorrat kommen leicht auf mehrere hundert Kilobyte; dieselbe Familie auf zwei Schnitte reduziert und auf den lateinischen Zeichenbereich beschränkt landet bei einem Bruchteil. Diese Zahl in einer Entwurfsbesprechung zu nennen, verändert das Gespräch sofort.
Hero-Video oder Standbild: Was trägt die Startseite?
Ein Hintergrundvideo im ersten Bildschirmbereich ist die kostspieligste verbreitete Gestaltungsentscheidung überhaupt. Es lädt sofort, oft in voller Auflösung, wird auf vielen Geräten nicht automatisch abgespielt, hat keinen Ton und dauert dennoch mehrere Megabyte. Der Nutzen: eine Bewegung, die die meisten Besucher nach zwei Sekunden weggescrollt haben.
Ein Hersteller von Medizintechnik, der seinen Reinraum zeigen will, erreicht mit einem präzise gewählten Standbild und einer klaren Aussage denselben Eindruck bei einem Bruchteil des Gewichts. Wenn Bewegung inhaltlich notwendig ist, gehört sie weiter unten auf die Seite, hinter ein Vorschaubild und erst auf Klick geladen. Diese Reihenfolge ist Progressive Enhancement in seiner einfachsten Form: Die Seite funktioniert vollständig, das Video ist ein Zusatz.
Bewegung im ersten Bildschirmbereich ist eine Anzahlung, die der Besucher leistet, bevor er weiß, ob sich der Besuch lohnt.
Dasselbe gilt für den Slider auf der Startseite. Er transportiert drei Aussagen nacheinander, bringt dafür Bedienlogik, Berührungsgesten und mehrere Bilder mit — und die zweite und dritte Aussage erreichen nur einen Bruchteil der Besucher. Drei untereinander gesetzte Abschnitte wiegen weniger, sind vollständig sichtbar und lassen sich obendrein einzeln verlinken.
Braucht Bewegung wirklich eine Animationsbibliothek?
Für Einblenden beim Scrollen, sanfte Übergänge, Hover-Zustände und Ausklappen braucht es keine Bibliothek. Der Intersection Observer im Browser meldet, wann ein Element sichtbar wird, und der Rest sind wenige Zeilen CSS. Was früher ein externes Werkzeug erforderte, liegt heute in jedem Browser bereit.
Bibliotheken lohnen sich erst bei aufwendigen, zeitlich verketteten Abläufen — verschachtelten Zeitleisten, Bewegungspfaden, physikalisch anmutenden Übergängen. Solche Abläufe kommen auf Unternehmenswebsites vor, aber selten, und dann meist auf genau einer Seite. Dort kann die Bibliothek gezielt nachgeladen werden, statt auf jeder Unterseite mitzureisen.
Ein Detail, das gern vergessen wird: Die Medienabfrage prefers-reduced-motion signalisiert, dass jemand Bewegung im Betriebssystem reduziert hat. Diese Einstellung zu respektieren kostet drei Zeilen und ist zugleich ein Zugänglichkeitsgewinn und eine Entlastung für schwache Geräte.
Was heißt Progressive Enhancement für die Gestaltung?
Progressive Enhancement bedeutet, eine Seite so aufzubauen, dass sie in ihrer schlichtesten Form vollständig funktioniert und Zusätze erst greifen, wenn Gerät und Verbindung sie tragen. Übersetzt in Gestaltungssprache: Der Inhalt steht zuerst, der Effekt kommt danach — und nicht umgekehrt.
Praktisch sieht das unspektakulär aus. Eine Bildstrecke zeigt zunächst untereinander gesetzte Bilder und wird auf breiteren Bildschirmen zum Raster. Eine aufklappbare Liste ist offen, bevor das Skript sie schließt. Ein Diagramm existiert als Tabelle, die erst anschließend visualisiert wird.
Der Nebeneffekt ist bemerkenswert: Seiten, die nach diesem Prinzip entstehen, sind meist auch die zugänglicheren und die besser wartbaren. Robustheit, Tempo und Bedienbarkeit fallen an derselben Stelle an, weil sie dieselbe Ursache haben.
Wie legt man ein Performance-Budget fest, das hält?
Ein Budget wirkt nur, wenn es in einer Einheit formuliert ist, die im Entwurf zählbar bleibt. Kilobyte pro Seitentyp funktioniert dafür besser als abstrakte Kennzahlen. Ein brauchbarer Ausgangspunkt für eine Unternehmensseite: eine feste Obergrenze für die Startseite, eine niedrigere für Inhaltsseiten, jeweils getrennt nach Bildern, Schriften, Skripten und Stilen.
Der Wert dieser Aufteilung liegt in der Verhandlung. Wenn ein zusätzlicher Schriftschnitt gewünscht wird, ist die Frage nicht mehr, ob er schön ist, sondern woher die Kilobyte kommen. Ein Budget verwandelt eine Geschmacksdiskussion in eine Tauschentscheidung — und Tauschentscheidungen lassen sich sachlich treffen.
Verankern Sie das Budget in der Definition of Done. Eine Seite gilt erst als fertig, wenn sie das Gewichtslimit einhält, und eine automatische Prüfung im Auslieferungsprozess meldet Überschreitungen, bevor jemand sie live sieht. Ohne diese Verankerung wird das Budget im Projektstress zur Absichtserklärung.
Ein Budget braucht außerdem eine Ausnahmeregel, sonst wird es umgangen statt eingehalten. Legen Sie fest, wer eine Überschreitung genehmigen darf und wogegen sie aufgerechnet wird. Eine bewusst genehmigte Überschreitung mit Gegenfinanzierung an anderer Stelle ist etwas völlig anderes als ein unbemerktes Anwachsen über zwölf Monate Redaktionsarbeit.
Wer entscheidet den Zielkonflikt im Projekt?
Die Entscheidung fällt viel früher, als die meisten Teams annehmen — nämlich in der Entwurfsphase, nicht in der Optimierung am Projektende. Ein Entwurf mit Vollbildvideo, drei Schriftfamilien und aufwendigen Scroll-Abläufen ist eine Festlegung, auch wenn das Wort Performance in der Präsentation nicht fällt. Nachträglich lässt sich daraus höchstens Ballast entfernen, nicht die Struktur ändern.
Deshalb gehört die Frage nach dem Gewicht in die Entwurfsbesprechung. Zu jedem Vorschlag mit spürbarem Gewicht sollte eine leichtere Variante gezeigt werden, damit der Vergleich sichtbar wird statt theoretisch zu bleiben. Ein Immobilienunternehmen, das den Unterschied zwischen einem Objektvideo und einer gut geschnittenen Bildstrecke nebeneinander sieht, entscheidet innerhalb einer Minute — und meist anders als erwartet.
Nach unserer Projekterfahrung hilft eine einfache Regel bei der Zuständigkeit: Die Gestaltung schlägt vor, die Technik beziffert die Kosten in Kilobyte und Millisekunden, die Fachseite entscheidet mit Blick auf das Ziel der Seite. Kein Gremium, keine Grundsatzdebatte, sondern ein kurzer Dreischritt pro strittigem Element. Nebenbei bleiben so auch Kennzahlen wie LCP und CLS im grünen Bereich, ohne dass sie das Gesprächsthema sein müssen.