Google met à jour une fois de plus son algorithme – et il est grand. La mise à jour Core Web Vitals sera déployée en mai, et tout est une question de vitesse et d’expérience utilisateur. Plus précisément, Google commencera à mesurer tous les éléments suivants : la plus grande douleur conceptuelle (LCP), le délai de première entrée (FID) et le décalage de mise en page cumulatif (CLS).
Pour cet article de blog, nous nous concentrerons sur un seul de ces éléments : le décalage de mise en page cumulatif et ce que vous pouvez faire en tant que développeur frontend pour le corriger.
Comment savoir si vous avez des décalages de mise en page cumulés
Utilisez page Speed Insights pour voir quantitativement le changement de contenu de votre site Web (ainsi que d’autres indicateurs tels que LCP et FID).
Parce que Core Web Vitals concerne l’expérience utilisateur, il pourrait être utile d’avoir un outil comme Airbrake performance Monitoring. Avec un outil de surveillance des performances conçu pour les développeurs, vous obtiendrez un aperçu instantané de l’UX de votre application avec des fonctionnalités qui mesurent le score Apdex , la latence, les requêtes et les informations de routage, et bien plus encore.
Combinez cela avec Moovweb, qui optimise pleinement la vitesse de votre site web, et vous serez dans un excellent endroit pour non seulement mesurer l’UX de votre application, mais garder cinq pas en avant.
Une fois que vous savez où se situe votre site Web jusqu’à ses UX et CLS, il est temps de le corriger.
Comment les développeurs frontend peuvent corriger les changements de mise en page cumulatifs
Avez-vous déjà essayé de cliquer sur un article sur un site Web, seulement pour le faire bouger soudainement, et vous finissez par cliquer sur quelque chose d’autre? Ou, peut-être, vous êtes en train de lire un article, et tout se déplace vers le bas. Oui, ce sont des exemples de changements de disposition cumulatifs. Un décalage de mise en page cumulatif se produit lorsqu’un élément de votre site Web se charge après que tout le reste ait été chargé. Cela peut être très ennuyeux pour les utilisateurs. Non seulement Google vous dira à ce sujet, mais vous perdrez des utilisateurs potentiels qui préféreraient aller sur un autre site Web que d’attendre que le vôtre se charge. Empêchez cela en prenant le temps de résoudre les problèmes CLS avant qu’ils n’affectent vos utilisateurs.
En tant que développeur Frontend, voici quatre actions que vous pouvez entreprendre pour réduire le décalage cumulatif de mise en page sur votre site Web:
Mettre à jour les polices
Les polices ajoutent caractère et personnalité à un site Web, mais ces polices spécialisées ont un coût. En raison de la grande nature des fichiers de police, les navigateurs ont tendance à compenser en utilisant FOIT, autrement connu sous le nom de flash de texte invisible. FOIT peut ralentir considérablement les temps de chargement des pages Web.
Au lieu de compter sur FOIT, vous devriez utiliser la méthode “flash of Unstyled text” (FOUT). La façon la plus simple de changer le texte du site Web en FOUT est avec la méthode suivante:
Traditionnellement, vous codez la police comme telle : @font-face { font-family : Georgia ; }
À la place, vous devriez utiliser le bit de code suivant : @font-face { font-family : Georgia ; font-display : swap ; }
Le “font-display” indique immédiatement la police d’affichage API t0 en utilisant une police système. Une fois votre fichier de police chargé, il l’échangera avec la police que vous voulez sur votre site Web.
Malheureusement, la méthode FOUT peut ne pas fonctionner avec tous les navigateurs. Si ce n’est pas le cas, le navigateur reviendra à ses comportements par défaut pour le chargement des polices. Vous pouvez voir une ventilation détaillée de ces comportements en utilisant cet outil.
La deuxième méthode que vous pouvez utiliser pour éliminer les longs temps de chargement des fichiers de police fonctionne avec tous les navigateurs, mais ce n’est pas aussi simple que de mettre à jour une ligne de code.
Tout comme avec la méthode précédente, vous attendrez que la police par défaut soit complètement chargée, puis la basculez pour une police personnalisée. La différence est que vous aurez besoin de plonger dans le code CSS et JavaScript de votre site web.
Tout d’abord, vous voudrez éviter d’utiliser des polices personnalisées lors du chargement initial de la page en mettant à jour votre CSS. Utilisez une police système pour télécharger le texte de votre page dès que possible.
En utilisant du code JavaScript, vous pouvez ensuite implémenter font face observer. Ce code surveillera et vous avertira lorsqu’une police Web est chargée. En utilisant les événements de défilement, font face observer peut charger des polices rapidement. Pour le guide complet, consultez la page fontfaceobserver GitHub.
En tant que développeur frontend, voici quelques modifications simples que vous pouvez apporter pour améliorer vos temps de chargement de polices.
Corrigez les images sur votre site Web
La façon dont les images se chargent sur votre site Web aura un impact significatif et réduira les changements de mise en page cumulatifs. Les images téléchargées sans attributs ont tendance à provoquer des changements massifs. C’est pourquoi il est préférable d’utiliser les pratiques suivantes lorsque vous ajoutez des images à votre site Web :
Utilisez les attributs de taille sur les images et les éléments vidéo
Avant cette mise à jour, l’ajout d’attributs « width » et « height » à vos images n’avait que peu ou pas d’impact sur le classement de votre site Web sur Google. Maintenant, avec la mise à jour Core Vitals, cela va faire une différence significative. Vous voudrez prendre le temps supplémentaire d’inclure des attributs à vos images à partir d’ici.
Lorsque vous téléchargez une image en tant que telle :
Ex : <h1>Error Monitoring est génial</h1>
<p>Trouvez et corrigez rapidement le code cassé< /p>
<IMG src=”Erron_image.jpg” alt=””>
<p>avec le bon logiciel de surveillance des erreurs, vous pouvez garder votre code sans bogue.</p>
Ce qui suit se produit : le navigateur de l’utilisateur lira et téléchargera d’abord le code HTML. Une fois que c’est fait, il téléchargera finalement l’image. Ce qui finit par se produire est un changement de contenu sur la page Web alors que le navigateur fait de la place pour l’image.
Résoudre ce problème CLS est simple : tout ce que vous avez à faire est d’ajouter les balises d’attribut height et width à votre image.
Ex : <h1>Error Monitoring est génial</h1>
<p>Trouvez et corrigez rapidement le code cassé< /p>
width=”450” hauteur=”450”>
<p>avec le bon logiciel de surveillance des erreurs, vous pouvez garder votre code sans bogue.</p>
Lorsque vous ajoutez la largeur et la hauteur à l’image, vous demandez au navigateur de laisser de l’espace sur la page Web lorsque le reste du document HTML est téléchargé.
Pour une approche moins stricte, vous pouvez également utiliser les boîtes de format CSS .
Aucune approche n’est incorrecte, mais il est impératif que vous utilisiez l’une ou l’autre pour éviter les changements de mise en page cumulatifs sur votre site Web.
Placez soigneusement des publicités dynamiques
Les publicités sont terribles quand il s’agit de changements de mise en page de contenu. Ils auront votre contenu partout si vous ne faites pas attention avec eux.
Lorsque vous placez des annonces sur votre site Web, utilisez ces conseils pour éviter les changements dans votre contenu:
-
Tout comme avec les images, vous devez vous assurer que les annonces ont suffisamment d’espace réservé sur votre site Web.
-
Ne placez pas d’annonces tout en haut de votre page Web. Il y a une chance que cela provoque un changement de contenu pour tout le contenu en dessous.
-
Placez des annonces près du milieu ou du bas d’une page Web.
Ce sont les meilleures pratiques en matière de publicités dynamiques. Non seulement ils amélioreront considérablement l’expérience utilisateur, mais aussi les changements de mise en page cumulatifs.
Méfiez-vous des widgets intégrés
Les widgets intégrés changent la donne pour les sites Web. Ils vous permettent de créer du contenu intéressant et portable pour votre site Web, mais ils ont des inconvénients importants. Contrairement aux images et aux publicités, il peut être difficile de réserver de l’espace sur votre site Web pour un widget.
Supposons que vous ayez un widget pour Twitter. Parfois, un tweet peut ne contenir que quelques caractères ; d’autres fois, il peut inclure des images et des liens, alors comment savoir combien d’espace vous devez réserver lorsque l’espace requis change continuellement ?
Vous pouvez résoudre ce problème en téléchargeant un espace réservé pour vos incorporations en réservant de l’espace sur votre site Web. Mais comment faire cela?
Vous devrez créer une «GlobalKey» et l’assigner à votre widget. Une fois que vous avez une clé, vous serez en mesure de trouver la taille de votre widget et de réserver la quantité appropriée d’espace sur votre site Web pour vos widgets.
Conclusion
Il n’y a que quelques méthodes que vous pouvez utiliser pour réduire les changements de mise en page cumulatifs sur votre site Web. De nombreux problèmes liés à CLS impliquent de l’espace et de réserver suffisamment d’espace sur votre site Web pour les images, les publicités et les widgets. La façon dont vous téléchargez des polices aura également un impact significatif sur la vitesse de votre site Web.
Rappelez-vous qu’avec le déploiement de Core Web Vitals en mai, vous devriez commencer à faire ces changements dès maintenant pour éviter de tomber dans le classement de Google.
