Un outil très efficace pour visualiser d'où vient exactement le décalage cumulatif de la mise en page (CLS) et augmenter le score de votre page ainsi que l'expérience de vos visiteurs.
Il génère un GIF animé montrant les mouvements des éléments pendant le chargement de votre page.
Dans certains cas, bien plus efficace qu'un diagramme de chargement en cascade.
| Analyse cumulative des décalages de mise en page | Phare | Test de page Web | Outils de développement Chrome |
|---|---|---|---|
| Sortie : Il génère un GIF montrant les éléments qui se déplacent dans la zone d'affichage et renvoie le score CLS. Sur les pages présentant de nombreux mouvements verticaux, il peut être difficile de déterminer quels éléments ont bougé. | Sortie : Le rapport classe CLS parmi les indicateurs First Contentful Paint, Speed Index, Total Blocking Time et Largest Contentful Paint. Le format de sortie par défaut est HTML ; le format JSON est disponible en option. | Sortie : La pellicule affiche les images clés du chargement, et les graphiques en cascade comportent une ligne rouge synchronisée avec la pellicule. La documentation définit le CLS comme la mesure du décalage de la mise en page dans la fenêtre d'affichage pendant le chargement de la page. | Sortie : Dans le panneau Performances, le suivi des décalages de mise en page affiche ces décalages sous forme de losanges violets, regroupés en clusters. Le survol de la souris met en évidence l'élément dans la fenêtre d'affichage, et l'onglet Résumé fournit les temps, les scores, les éléments affectés et les causes potentielles. |
| Conditions de test : La résolution de la fenêtre d'affichage sur ordinateur est fixée à 1920 x 1080. La version mobile utilise le profil Lighthouse Nexus 5X, et le processeur et le réseau sont bridés pour simuler une bonne connexion 3G. | Conditions de test : Il s'exécute sur une instance Chrome locale, depuis les outils de développement, la ligne de commande, un module Node ou PageSpeed Insights. La ligne de commande requiert Node 22 ou une version ultérieure. | Conditions de test : Les tests sont exécutés sur de véritables navigateurs depuis différents endroits du monde, dans des conditions réseau personnalisables. Chrome fournit le plus d'informations. | |
| Définition du CLS : La version 1.2.0 utilise la métrique de fenêtre de session maximale. Une limitation de débit est appliquée pendant le test. | Définition du CLS : Les outils de laboratoire tels que Lighthouse ne capturent les variations que pendant le chargement de la page, les valeurs peuvent donc être inférieures à celles que les utilisateurs réels perçoivent. | Définition du CLS : Les mêmes limitations de laboratoire s'appliquent. Le score est le produit de la fraction d'impact et de la fraction de distance, et l'objectif est de 0,1 ou moins. | Définition du CLS : Chaque poste possède son propre score dans l'onglet Résumé. CLS regroupe les postes en fenêtres de session allant jusqu'à 5 secondes, avec des intervalles inférieurs à 1 seconde. |
| Ouverture et automatisation : Une version en ligne de commande s'installe avec npm (layout-shift-gif). Elle accepte l'URL, le périphérique et les options de sortie, un fichier de cookies optionnel et prend en charge les certificats HTTPS auto-signés. La page invite à faire un don via Ko-fi (facultatif). | Ouverture et automatisation : Lighthouse est distribué sous licence Apache 2.0. Il peut être exécuté en intégration continue via Lighthouse CI et en tant que module Node. | Ouverture et automatisation : Le dépôt contient une branche principale sous Polyform Shield 1.0.0 et une branche Apache sous Apache 2.0. Il documente l'exécution de votre propre instance et d'une API REST. La plupart des expériences nécessitent WebPageTest Pro. |
Sujets abordés : Cumulative Layout Shift, CLS, page score, expérience visiteur, GIF animé, mouvement des éléments, optimisation du chargement, interface utilisateur, performance web, analyse visuelle, diagramme de chargement, métriques web, ISO 9241, ISO/IEC 25010, ISO 25012, ISO 25000, et ISO 9241-11.
Suggérez votre meilleur outil en ligne :
Connaissez-vous un site web meilleur, complémentaire ou de remplacement à celui mentionné ci-dessus ?
> Proposez-le ici <
Les images en pleine résolution et les téléchargements sont uniquement disponibles, et 100% gratuits, pour les membres inscrits.
> Se connecter <
