Home Blogs Comment les développeurs frontaux peuvent corriger le décalage de mise en page cumulatif
Applications

Comment les développeurs frontaux peuvent corriger le décalage de mise en page cumulatif

About The Author

Outline

Google est une fois de plus en train de mettre à jour son algorithme – et il est grand. La mise à jour Core Web Vitals est lancé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 : LCP (plus grande douleur de contentement), FID (premier délai d’entrée) et CLS (cumulative Layout Shift).

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).

Comme Core Web Vitals concerne l’expérience utilisateur, il peut ê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 Apdex Score, 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 aussi garder cinq pas en avant.

Une fois que vous savez où en est votre site web en ce qui concerne son UX et CLS, il est temps de le réparer.

Comment les développeurs frontaux peuvent corriger les changements cumulatifs de mise en page

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 autre chose? 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 décalages cumulatifs de la mise en page. Un décalage cumulatif de la mise en page se produit lorsqu’un élément de votre site Web se charge après que tout le reste a été chargé. Cela peut être très ennuyeux pour les utilisateurs. Non seulement Google vous y demandera, mais vous perdrez des utilisateurs potentiels qui préféreraient aller sur un site Web différent que d’attendre que le vôtre se charge. Évitez 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 changement de mise en page cumulatif sur votre site Web:

Mettre à jour les polices

Les polices ajoutent du caractère et de la personnalité à un site Web, mais ces polices spécialisées ont un coût. En raison de la grande nature des fichiers de polices, les navigateurs ont tendance à compenser en utilisant foi, autrement connu sous le nom de flash de texte invisible. Foi peut ralentir considérablement les temps de chargement des pages Web.

Au lieu de compter sur foi, vous devriez utiliser la méthode « flash of unstyled text » (fout). La méthode la plus simple pour modifier le texte du site Web en fout est la 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 à la police d’affichage API t0 immédiatement en utilisant une police système. Une fois que votre fichier de police est chargé, il le permutera 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 répartition détaillée de ces comportements à l’aide de cet outil.

La deuxième méthode que vous pouvez utiliser pour éliminer les longs temps de chargement des fichiers de polices 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 vous la basculerez vers une police personnalisée. La différence est que vous devrez 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 le 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 des événements de défilement, font face observer peut charger des polices rapidement. Pour le guide complet, consultez la page GitHub fontfaceobserver .

En tant que développeur frontend, voici quelques changements 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 cumulatifs de mise en page. Les images téléchargées sans attributs ont tendance à provoquer des décalages massifs. C’est pourquoi il est préférable d’utiliser les pratiques suivantes lorsque vous ajoutez des images à votre site Web :

Utilisez des 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>surveillance des erreurs est génial</h1>

<p>Rechercher et réparer 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 lit et télécharge d’abord le HTML. Une fois que c’est fait, il téléchargera enfin l’image. Ce qui finit par se produire, c’est un changement de contenu sur la page Web car 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 hauteur et largeur à votre image.

Ex : <h1>surveillance des erreurs est génial</h1>

<p>Rechercher et réparer rapidement le code cassé</p>

largeur=”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 dites au navigateur de laisser de l’espace pour cela sur la page Web pendant que le reste du document HTML se télécharge.

Pour une approche moins rigoureuse, vous pouvez également utiliser les boîtes de format CSS.

Aucune des deux approches n’est incorrecte, mais il est impératif que vous utilisiez l’une ou l’autre pour éviter les changements cumulatifs de mise en page sur votre site Web.

Placez soigneusement des publicités dynamiques

Les annonces sont terribles quand il s’agit de changements de mise en page de contenu. Ils auront votre contenu partout si vous n’êtes pas prudent avec eux.

Lorsque vous placez des annonces sur votre site Web, utilisez ces conseils pour éviter les changements dans votre contenu:

  • Tout comme pour 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 est possible 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 lorsqu’il s’agit de publicités dynamiques. Non seulement ils amélioreront considérablement l’expérience utilisateur, mais ils amélioreront également 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 annonces, il peut être difficile de réserver de l’espace sur votre site Web pour un widget.

Disons que vous avez un widget pour Twitter. Parfois, un tweet peut ne comporter 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 embarcations en réservant de l’espace sur votre site Web. Mais comment faire ?

Vous devrez créer une «GlobalKey» et l’affecter à 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 cumulatifs de mise en page 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.