Comment concevoir un écran squelette (Skeleton) sans décalage de mise en page (CLS)
Apprenez à concevoir des écrans squelettes qui réduisent le temps d'attente perçu sans causer de saut de mise en page (CLS) : dimensions exactes, brillance et accessibilité.
À retenir
Un écran squelette bien conçu reproduit à l'identique les dimensions des textes, images et boutons réels avant la réception des données. Cela neutralise complètement les sauts de mise en page (CLS). L'animation doit se limiter à une vague de brillance discrète de gauche à droite via un dégradé CSS, et être masquée aux lecteurs d'écran avec aria-hidden="true".
Pourquoi les écrans squelettes surpassent les spinners
Une roue de chargement isolée sur une page blanche force l'utilisateur à attendre sans repère et allonge le temps perçu. Les squelettes dévoilent la structure de l'information à venir, diminuant l'anxiété et le sentiment d'attente.
Élimination du saut de mise en page (CLS)
La maladresse la plus fréquente consiste à utiliser un squelette qui change de taille à l'arrivée des données réelles. Fixez des hauteurs de ligne identiques, les mêmes arrondis et des ratios d'aspect fixes pour les images.
- Adoptez la même hauteur de ligne (line-height) que le texte final
- Réservez l'espace des images avec aspect-ratio
- Animez un dégradé en boucle avec background-position ou transform
- Masquez l'écran squelette aux lecteurs d'écran avec aria-hidden="true"
Mise en place de la brillance (shimmer) en CSS
Créez une animation fluide de 1,5 à 2 secondes avec un dégradé linéaire traversant la surface. Choisissez des teintes neutres et faiblement contrastées pour éviter que l'écran ne paraisse clignoter.
Prise en charge du mouvement réduit
Sous prefers-reduced-motion, arrêtez le balayage de brillance. Affichez les blocs squelettes avec une couleur statique ou une pulsation d'opacité à peine perceptible.
Extrait d’implémentation en production
/* 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;
}
}Principes clés à retenir
- Faites correspondre rigoureusement les blocs squelettes au contenu final
- Éliminez le CLS en fixant aspect-ratio et hauteurs de ligne
- Utilisez une brillance discrète et continue de 1,5 à 2 s
- Neutralisez l'animation sous mouvement réduit
Questions fréquentes
Sources
- Skeleton Screens and Perceived Performance — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev