Même sur un site rapide, certaines informations mettent un peu de temps à arriver : résultats de recherche, tableau de bord, liste de produits chargée à la demande. Ce moment d'attente est rarement pensé. On affiche au mieux une icône qui tourne, au pire un écran vide. Les skeleton screens proposent une alternative plus agréable, qui donne l'impression d'une interface plus rapide.
Qu'est-ce qu'un skeleton screen ?
Un skeleton screen, ou écran squelette, affiche la structure de la page avant que le contenu ne soit disponible : des rectangles gris à la place des titres, des blocs à la place des images, des lignes à la place des paragraphes. Le visiteur voit immédiatement la forme de ce qui arrive, puis le contenu réel remplace progressivement les formes.
Les grandes plateformes, réseaux sociaux, services de vidéo ou applications de messagerie, utilisent largement cette technique.
Pourquoi les skeleton screens fonctionnent
La perception de l'attente compte autant que sa durée réelle. Face à un écran vide ou à une icône qui tourne, le visiteur se concentre sur l'attente elle-même. Avec un squelette, il commence déjà à comprendre la page, sait où l'information va apparaître et perçoit le chargement comme une progression. L'attente semble plus courte, même lorsqu'elle est identique.
Quand les utiliser
Les skeleton screens sont adaptés aux contenus dont la structure est prévisible : listes, cartes, profils, tableaux de bord, fils d'articles. Ils conviennent aux chargements de quelques centaines de millisecondes à quelques secondes.
Pour une action ponctuelle, comme l'envoi d'un formulaire, un indicateur sur le bouton lui-même est plus approprié. Pour un traitement long dont on connaît l'avancement, comme un import de fichier, une barre de progression avec un pourcentage reste la meilleure solution.
Bien concevoir un écran squelette
Quelques règles pour un résultat réussi :
- Respecter la structure réelle du contenu, pour éviter un décalage brutal à l'arrivée des données ;
- Utiliser des formes neutres et des couleurs discrètes, proches du fond ;
- Ajouter une animation légère, comme un reflet qui balaie les formes, pour montrer que le chargement progresse ;
- Afficher le contenu dès qu'il arrive, bloc par bloc si possible ;
- Prévoir le cas d'erreur, pour ne pas laisser un squelette indéfiniment.
Éviter les décalages de mise en page
Un bénéfice souvent oublié des skeleton screens est la stabilité visuelle. Si les blocs réservent dès le départ la place du contenu final, la page ne saute pas lorsque les données arrivent. C'est précisément ce que mesure l'indicateur CLS des Core Web Vitals de Google. Un squelette bien dimensionné améliore donc l'expérience et le référencement. La documentation de web.dev sur le CLS explique ce critère.
L'accessibilité des états de chargement
Les personnes qui utilisent un lecteur d'écran ne voient pas les formes grises. Il faut donc leur indiquer qu'un chargement est en cours, avec un attribut signalant que la zone est occupée, puis annoncer l'arrivée du contenu. Les animations doivent aussi respecter la préférence de réduction des mouvements, en restant fixes pour les visiteurs qui l'ont activée.
Les pièges à éviter
Un squelette ne doit pas masquer un vrai problème de performance. Si le chargement prend régulièrement plusieurs secondes, la priorité est d'accélérer le serveur ou les requêtes. Évitez aussi d'utiliser un squelette pour un contenu qui pourrait être affiché immédiatement : le rendu côté serveur reste la meilleure option pour le contenu principal d'une page.
Mon conseil
Repérez dans votre site ou votre application les zones où le visiteur attend devant un écran vide ou une icône qui tourne. Remplacez-les par des skeleton screens fidèles à la structure du contenu, avec une animation discrète. C'est un détail de conception, mais il rend l'interface plus fluide et plus professionnelle.
