 Bonjour, je m'appelle Thomas et je suis consultant technique chez Google. Aujourd'hui, on va parler d'un scénario qui vous est sans doute déjà familier. Vous naviguez par exemple sur une page et vous apprêtez à cliquer sur un bouton pour finaliser une commande ou souscrire un newsletter. Et subitement, le contenu se décale devant vos yeux, vous conduisant à cliquer sur un autre élément que celui que vous vous visiez initialement. Est-ce que vous avez déjà aussi remarqué que souvent ce comportement était dû à l'arrivée inopinée d'une publicité sur la page ? Et bien rassurez-vous, ce n'est pas du tout une fatiguité. En fait, il existe un indicateur qui s'appelle le CLS et qui permet de mesurer le phénomène. Et il y a également quelques astuces que l'on va voir aujourd'hui pour essayer de le contrôler. Alors qu'est-ce que le CLS ? Le CLS ou Cumulative Layout Shifts est né d'une initiative Google intitulée les Core Web Vitals et qui consiste à mesurer les différents piliers de l'expérience utilisateur qui est une notion vraiment clé pour nous. Vous pouvez d'ailleurs en en prendre un petit peu plus sur les Core Web Vitals en suivant le lien Le CLS lui va viser particulièrement à quantifier le degré de stabilité visuelle d'une page. Plus une page va être visuellement instable et plus le CLS sera délevé. Alors comment on le calcule ? En fait, on additionne les valeurs des décalages successifs en anglais Layout Shifts qui apparaissent sur une page. Et pour calculer un Layout Shifts, on multiplie l'air de la zone impactée en anglais Impact Fraction par l'ampleur du décalage en anglais Distance Fraction. Donc ici, par exemple, la publicité vient décaler le contenu de la page et on remarque que l'air impacté représente à peu près la moitié de la page soit environ 50%. On a donc une Impact Fraction de 0,5. L'ampleur du décalage est un peu moins du tiers de la page, soit environ 30% et on a donc une Distance Fraction de 0,3. Si on multiplie 0,5 par 0,3, on obtient donc un CLS pour cet exemple de 0,15. Ensuite, si d'autres décalages visuels venaient à intervenir sur la page, on les additionnerait, on les cumulerait et on parle ainsi de cumulative Layout Shifts. Notez également bien que le CLS ne prend en compte que les décalages qui sont visibles par l'utilisateur. Les décalages qui apparaissent en dessous de la ligne de flottaison ne sont donc pas pris en compte. Alors qu'est-ce qu'un bon CLS ? En fait, on juge une expérience bonne à partir du moment où le CLS est inférieur à 0,1. Entre 0,1 et 0,25, on considère qu'elle peut être encore un petit peu optimisée. Et après 0,25, on considère qu'on doit vraiment améliorer l'expérience parce que c'est vraiment trop instable pour l'utilisateur. Et vous me demandez sans doute comment mesurer le CLS sur votre site ou vos pages. Alors c'est un indicateur que vous allez retrouver dans les outils labels, tels que Lighthouse ou le Chrome Developer Tool, mais également dans les outils qui présentent les données de terrain comme le Crux, PageSpeed Insights ou la Search Console. Ici moi je vous recommande l'extension Chrome Web Vitals qui vous permet de voir en direct sur une page la valeur des Web Vitals. Et dans cet exemple, on retrouve bien la valeur de 0,15 pour le CLS qu'on a calculé précédemment. Nous allons maintenant essayer de comprendre comment la publicité impacte le CLS. En effet, on a vu lors de l'introduction, la publicité est souvent responsable d'un CLS élevé. Mais pourquoi est-ce le cas ? Et bien en fait il y a trois raisons principales. Avant tout, les publicités sont rarement d'une taille fixe, ensuite elles sont assez souvent chargées tardivement dans le cycle de vie d'une page et elles sont parfois même rafraîchies au cours de l'expérience utilisateur. Alors premièrement, un emplacement publicitaire peut être amené à recevoir tout un éventail de taille différente. Ici, sur cet exemple, le même emplacement est éligible à recevoir des publicités de taille 320 par 50 et 300 par 250. Mais en fait, rien ne permet de savoir à l'avance quelle taille va être retournée par la plateforme publicitaire. Donc l'ampleur du décalage du contenu situé en dessous de l'emplacement publicitaire est lui aussi variable car plus la publicité retournée va être grande et plus le contenu sera décalé vers le bas. De plus, les annonces publicitaires sont typiquement chargées un petit peu plus tard une fois que le contenu principal de la page a été présenté à l'utilisateur et donc insérer des publicités risque de modifier l'agencement des éléments déjà en place sur la page. Et c'est ce que l'on voit bien ici dans cet exemple où la page est d'abord vide, puis on présente le contenu principal à l'utilisateur et enfin on insère une publicité qui va décaler le contenu. Enfin, lorsque l'utilisateur consulte une page pendant un certain moment, il est assez fréquent de voir que les publicités sont rafraîchies renouvelés, créant ainsi de nouveaux risques de décalage potentiel visibles sous les yeux de l'utilisateur. Il est cependant possible de régler ces différents problèmes en mettant en place une des astuces suivantes. En effet, on a trois stratégies à notre disposition pour minimiser les décalages introduits par la publicité. La première astuce consiste à réserver l'espace nécessaire en amont du chargement de la publicité. Ceci peut se faire très simplement en utilisant les propriétés CSS, mean height et mean width et en les appliquant au conteneur des annonces. Vos scripts publicitaires vont ensuite pouvoir s'attacher au conteneur et insérer la publicité. Si la publicité est plus grande que l'espace que vous avez initialement réservé, alors il pourra être redimensionné à la marge. En revanche, si la publicité est plus petite ou exactement de la même taille que l'espace que vous avez initialement réservé, alors aucun décalage visuel ne sera à déplorer sur la page. Vous pouvez également décider de styliser spécifiquement cet emplacement afin de prévenir l'utilisateur qu'une publicité risque d'y être affichée. Dans le cas où un emplacement est éligible à plusieurs tailles d'annonce, comme on l'a vu précédemment, il y a deux façons de choisir la taille à réserver initialement. Soit vous calculez une taille moyenne des publicités qui ont été diffusées sur l'emplacement, et vous pouvez vous baser sur votre plateforme publicitaire pour obtenir ces informations. Soit vous réservez un espace correspondant à la taille maximale des formats éligibles sur l'emplacement. Cette stratégie est très efficace pour minimiser le risque de décalage visuel, mais si vous obtenez une publicité plus petite que la taille que vous réservez, il y a le risque qu'elle soit présentée dans un emplacement beaucoup trop large. Ensuite, avant d'aborder la deuxième technique d'optimisation, il est vraiment important de se rappeler que le CLS ne mesure que les décalages visuels pour l'utilisateur. Si un décalage se produit sur une partie de la page qui est non visible pour l'utilisateur, alors rien ne justifie qu'il soit pris en compte dans la mesure du CLS car elle n'a pas d'impact sur l'expérience. Ainsi, si vous prévoyez d'afficher des formats publicitaires au delà de la ligne de flotaison initiale, assurez-vous bien que les publicités soient préchargés, comme c'est le cas dans cet exemple. On voit en effet qu'on a une page de texte qui est d'abord présentée à l'utilisateur et qui existe en fait un emplacement publicitaire au delà de la ligne de flotaison initiale. Le chargement de l'annonce va bien provoquer un décalage, mais il n'est pas visible aux yeux de l'utilisateur puisqu'il n'a pas encore fait défilé la page à ce niveau. Le CLS pour cette expérience est donc de zéro. Si le chargement de l'annonce avait été trop tardif et que l'utilisateur avait commencé à faire défilé la page, alors il aurait pu voir le décalage visuel et il aurait été pris en compte dans le CLS. Enfin, une troisième stratégie consiste à gérer finement les cas de non-remplissage d'un espace publicitaire. En effet, il est tout à fait possible que votre plateforme publicitaire ne soit pas toujours en mesure de vous répondre favorablement avec une annonce à afficher. Et dans ce cas, les scripts publicitaires peuvent vous proposer de rétrécir automatiquement les emplacements non remplis sur votre page. Si ce comportement se produit devant les yeux de l'utilisateur, alors ça peut vraiment dégrader le CLS parce que ça crée de nouveaux décalages sous les yeux de l'utilisateur. On a donc deux solutions qui s'offrent à nous. La première, c'est de conditionner le mécanisme pour qu'il ne se produise jamais devant les yeux de l'utilisateur. La seconde, c'est de programmer des campagnes publicitaires d'autopromotion qui visent à mettre en avant une autre page de votre propre site afin de s'insurer qu'on est toujours à remplissage sur les emplacements publicitaires de la page et que l'agencement de cette dernière soit plus stable. Ces trois stratégies devraient vous permettre de minimiser l'instabilité visuelle causée par les publicités sur vos pages et ainsi proposer une expérience utilisateur un petit peu plus agréable. Sachez également que vous pouvez bien entendu étendre l'utilisation de ces astuces à d'autres types de contenus comme les images ou le contenu venant de tir ce parti. J'espère vraiment que ça vous a aidé. Vous pouvez en apprendre un petit peu plus sur le CLS en suivant le lien si contre. Merci beaucoup d'avoir regardé cette vidéo et à bientôt !