Wie man einen Skeleton Screen ohne Cumulative Layout Shift (CLS) baut
Lernen Sie, wie Sie Skeleton Screens gestalten, die gefühlte Wartezeiten verkürzen ohne Layout-Sprünge (CLS) zu verursachen: exakte Maße, Schimmern und Barrierefreiheit.
Kernaussage
Ein gelungener Skeleton Screen bildet die exakten Abmessungen von Textzeilen, Bildern und Buttons vor dem Laden der Daten nach. Das verhindert Cumulative Layout Shift (CLS) vollständig. Die Animation sollte aus einer dezenten Schimmerwelle via CSS-Verlauf bestehen und für Screenreader mit aria-hidden="true" unsichtbar sein.
Warum Skeleton Screens Ladespinnern überlegen sind
Ein kreisender Spinner auf leerer Fläche lässt Nutzer im Ungewissen und verlängert die gefühlte Wartezeit. Skeletons verdeutlichen die Struktur der kommenden Inhalte, mindern Unsicherheit und lassen die App schneller wirken.
Beseitigung von Cumulative Layout Shift (CLS)
Der häufigste Fehler sind Skeletons, die beim Eintreffen der echten Daten ihre Größe ändern. Verwenden Sie dieselben Zeilenhöhen, Eckenradien und feste Seitenverhältnisse für Bilder.
- Nutzen Sie die exakte line-height des finalen Textes
- Reservieren Sie Bildflächen über aspect-ratio
- Animieren Sie einen CSS-Verlauf per background-position oder transform
- Verbergen Sie Skeletons vor Screenreadern mit aria-hidden="true"
Umsetzung des Schimmereffekts in CSS
Erzeugen Sie eine kontinuierliche Welle von 1,5 bis 2 Sekunden mit einem linearen Verlauf. Wählen Sie kontrastarme, neutrale Grautöne, damit die Fläche nicht unruhig flackert.
Verhalten bei reduzierter Bewegung
Unter prefers-reduced-motion stoppen Sie den wandernden Schimmer. Zeigen Sie die Platzhalter als statische Blöcke oder mit minimalem, kaum wahrnehmbarem Pulsieren.
Produktionsnahes Implementierungsbeispiel
/* CSS Shimmer effect */
.skeleton {
background: linear-gradient(
90deg,
#e5e7eb 25%,
#f3f4f6 50%,
#e5e7eb 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 6px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.skeleton {
animation: none;
background: #e5e7eb;
}
}Wichtige Prinzipien
- Gleichen Sie Skeleton-Maße exakt an die finalen Inhalte an
- Vermeiden Sie CLS durch feste Zeilenhöhen und aspect-ratio
- Nutzen Sie dezenten, 1,5 bis 2 Sekunden langen Schimmer
- Schalten Sie die Schimmerwelle bei reduzierter Bewegung ab
Häufige Fragen
Quellen
- Skeleton Screens and Perceived Performance — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev