La mise en page cumulative décalage-t-elle une considération pendant que la page est toujours de la charge visiblement?
Changement de mise en page cumulatif (CLS) fait référence à une modification inattendue de la position du contenu sur une page, et se produit généralement car les ressources sont chargées de manière asynchrone ou DOM sont ajoutés à la page ci-dessus le contenu existant.
CLS est problématique s'il se produit lorsque l'utilisateur utilise activement la page. Il peut amener l'utilisateur à cliquer ou appuie sur autre chose s'ils essaient d'interagir avec la page ou de leur faire perdre leur place s'ils lisaient un article.
Mais CLS est-il pertinent dans le cas où il est évident que la page est toujours en cours de chargement? Un décalage de la page de page peut-il toujours conduire à une mauvaise ux?
Je parle du cas où l'utilisateur verra une spinner ainsi que potentiellement une superposition sombre sur la page. Bien que les problèmes décrits ci-dessus ne se produisent peut-être pas, je me demande si CLS peut toujours causer de la confusion dû à des éléments étant momentanément rendus dans un lieu qui n'est pas leur dernier lieu.
Comme indiqué par Musefan dans son commentaire , CLS est problématique, même si la page est sous une superposition sombre, parce que le L'utilisateur peut commencer à lire le contenu.
Musefan suggère "Garder tout le contenu caché jusqu'à ce qu'il soit prêt". C'est la meilleure approche, cependant, il faut prendre soin de ne pas créer l'impression que la page se charge lentement.
C'est un problème connu que la réduction des CL en suivant les meilleures pratiques de performance moderne peut être délicate.
Selon changement de mise en page cumulatif dans la pratique (article de blog) ,
Les sites Web qui syntonisent la performance peuvent s'exposer à plus de modalités de mise en page involontairement. Outre le chargement paresseux, des sites de chargement rapide optimisent une première peinture rapide, pour obtenir quelque chose à l'écran pour les yeux du visiteur. Selon le contenu supplémentaire, il peut se déplacer de manière significative la page.
Une façon de fixer des CLS sans affecter les performances ne serait d'afficher qu'un écran de chargement ou une spinner, ou une sorte d'espace réservé à l'utilisateur, jusqu'à ce que tout le contenu de la page soit entièrement chargé. Une autre approche utilise des pages de chargement de squelette, qui Galenrutuge décrit dans sa réponse .
Selon le type de contenu, vous pourriez également envisager une stratégie de chargement de squelette pour créer des espaces réservés visuels pour le contenu pour atténuer les CLS. Ce sont souvent des "os" légers qui définissent la structure de la page avant que le "muscle/graisse" (contenu) se charge et se remplit. Selon quelle langue le produit est écrit, certaines bibliothèques tierces peuvent vous aider à faire tourner rapidement ce type de solution. Cela a quelques avantages:
- Définit visuellement lorsque le contenu va charger, définir les attentes des utilisateurs de ce que le contenu apparaîtra où. S'il y a des cartes avec des informations dynamiques, par exemple, vous pouvez définir un squelette de carte avec des rectangles/formes rendus au lieu de données pendant la charge. Une fois chargé, les données échangent des formes rendues.
- Peut aider à prédéfinir la hauteur des divs et d'autres éléments sur la charge de la page - Mittigates CLS une fois que la page entièrement chargée et tous les appels de service sont terminés.
- Fournit une opportunité de signaler les progrès de chargement sans la nécessité d'une superposition et d'une spinner. Par exemple, avoir une légère animation "chatoyant" sur les éléments du squelette, tandis que les données sont en cours de chargement, un signal relativement explicite transmet des progrès.
Une grande littérature, avec un outil tiers susmentionné:
https://medium.com/octopus-wealth/skeleton-loading-pages-with-react-5A931f126777bhttps://medium.com/swlh/how-to-fix- Layout cumulatif-shift-1b48a138faa9