Was ist ein Skeleton Screen?
Du öffnest eine App. Statt eines Lade-Kringels siehst du graue Balken und Kästen, genau dort, wo gleich Text und Bilder stehen. Das ist ein Skeleton Screen, wörtlich: ein Skelett-Bildschirm.
Die Nielsen Norman Group beschreibt ihn als drahtmodellartige Vorschau, die das Layout der fertigen Seite nachbildet. Der Besucher sieht also früh, was ihn erwartet. Luke Wroblewski prägte die Idee 2013: eine leere Vorlage, die sich nach und nach mit Inhalt füllt.
NN/g unterscheidet drei Bauarten:
- Statisch: graue Boxen, am gebräuchlichsten.
- Animiert: ein Puls oder Verlauf, der aber ablenken kann.
- Frame-Display: nur Kopf, Fuß und Hintergrund. Das empfiehlt NN/g nicht, weil es kaum mehr leistet als ein Spinner.
Wann passt welcher Ladezustand?
Die wichtigste Frage ist die Wartezeit. NN/g gibt dafür eine klare Orientierung:
Ladezeit
Empfehlung
unter 1 s
gar kein Ladezustand
2–10 s
Skeleton für ganze Seiten, Spinner für einzelne Module
über 10 s
Fortschrittsbalken
Dahinter stehen die bekannten Grenzen von Jakob Nielsen: 0,1 Sekunden wirken unmittelbar, 1 Sekunde lässt den Gedankenfluss ungestört, nach 10 Sekunden ist die Aufmerksamkeit weg.
Was bringt er wirklich?
Überall liest du, Skeletons verkürzen die gefühlte Wartezeit. Die Belege dafür sind dünn. Ein Test der Agentur Viget mit 136 Personen, simuliert auf dem Handy, sah das 2017 sogar umgekehrt:
Variante
Gefühlte Wartezeit
Skeleton Screen
2,82 s
Spinner
2,41 s
Leerer Bildschirm
2,29 s
Das ist eine kleine, simulierte Studie, kein Urteil. Du solltest daraus aber eins mitnehmen: Ein pauschaler Gewinn ist nicht belegt. Der Nutzen liegt woanders. Der Besucher sieht früh die Struktur, und du kannst Platz für späteren Inhalt reservieren.
Genau dieser Platz zählt für die Layout-Stabilität. web.dev empfiehlt, Raum für später geladene Inhalte per min-height oder aspect-ratio freizuhalten. Dafür ist ein gutes Skeleton ein mögliches Mittel. Der Grenzwert für den Cumulative Layout Shift liegt bei 0,1 für „gut“. Einen automatischen Gewinn gibt es aber nicht: Es kommt darauf an, wie sauber die Maße stimmen.
Häufige Fehler
Fehler 1 · Skeleton statt Optimierung
Ein Skeleton macht nichts schneller. Tim Kadlec maß 2020 bei YouTube auf dem Desktop 6,9 Sekunden lang nur graue Boxen. Kannst du Inhalt sofort zeigen, zeig ihn.
Fehler 2 · Das Gerüst passt nicht zum Inhalt
Sieht der Platzhalter anders aus als die fertige Seite, verwirrt das. Bau ihn in denselben Maßen wie den echten Inhalt und lass den reservierten Platz nicht wieder zusammenfallen.
Fehler 3 · Unter einer Sekunde aufblitzen lassen
Lädt die Seite in unter einer Sekunde, ist laut NN/g kein Ladezustand nötig. Ein kurz aufflackerndes Gerüst wirkt nur unruhig.
Fehler 4 · Barrierefreiheit vergessen
Graue Boxen sagen einem Screenreader nichts. Adrian Roselli rät: Formen mit aria-hidden verbergen und den Ladezustand als versteckten Text mitgeben. Auf aria-busy allein solltest du dich nicht verlassen, denn in seinem Test von 2020 beachtete das kaum ein Screenreader. Animation nur, wenn der Besucher keine reduzierte Bewegung eingestellt hat.
So setzt du ihn sinnvoll ein
- Erst messen. Prüf mit PageSpeed Insights oder WebPageTest, wie lange deine Seite wirklich lädt.
- Erst beschleunigen. Was du wegoptimierst, musst du nicht überbrücken.
- Statisch anfangen. Graue Boxen genügen, Animation ist Kür.
- Maße übernehmen. Das Gerüst braucht dieselben Größen wie der echte Inhalt.
- Fertige Bausteine nutzen. Bibliotheken wie MUI oder Carbon bringen Skeleton-Komponenten mit.
Häufige Fragen
Skeleton Screen oder Spinner: Was ist besser?
Für ganze Seiten mit 2 bis 10 Sekunden Ladezeit empfiehlt NN/g das Skeleton, für einzelne Module eher den Spinner. Die Studien zur gefühlten Wartezeit widersprechen sich, einen klaren Sieger gibt es nicht.
Ab welcher Ladezeit lohnt sich ein Skeleton?
Unter einer Sekunde brauchst du laut NN/g gar keinen Ladezustand. Sinnvoll ist er bei Wartezeiten von rund 2 bis 10 Sekunden. Darüber gehört ein Fortschrittsbalken hin.
Macht ein Skeleton Screen die Seite schneller?
Nein. Die Ladezeit bleibt gleich, und der Inhalt kommt nicht früher. Du zeigst nur früher etwas an. Bessere Ladezeiten holst du über Bilder, Caching und weniger JavaScript.
Verbessert ein Skeleton Screen meine Core Web Vitals?
Nicht automatisch. Reservierter Platz kann Layout-Sprünge vermeiden, wenn die Maße stimmen. Für den Largest Contentful Paint gibt es keinen Beleg, dass ein Skeleton hilft.
Sollte ein Skeleton animiert sein?
Das ist kein Muss. NN/g nennt statische Boxen die gebräuchlichste Form und warnt, dass Animation ablenken kann. Wenn du animierst, respektiere die Einstellung für reduzierte Bewegung.
