Résolution Problème de CLS sur Wordpress / Divi

Bonjour,

Je cherche une personne en mesure d'étudier et corriger la mauvaise note CLS du site internet [URL visible pour les membres Pro]

Le site Wordpress/Divi utilise l'extension LiteSpeed Cache et est hébergé chez Hostinger.

Vous travaillerez sur un environnement de staging et devrez indiquer les corrections apportées afin qu'elles puissent être appliquées par nos soins sur le site en production.

Je réponds à TOUS les messages de bons intégrateurs efficaces en matière d'optimisation CLS avec Divi sauf si :
- votre réponse est automatisée
- vous proposez une solution ne répondant pas précisément à la demande

à toutes fins utiles, rappel des principales causes d'un CLS élevé :

Images non dimensionnées
Si les images ne sont pas spécifiquement dimensionnées (c'est-à-dire qu'elles n'ont pas une largeur et une hauteur définies dans le code HTML ou CSS), le navigateur ne sait pas quelle taille l'image va avoir avant de la charger. Cela peut entraîner un déplacement soudain de contenu lorsque l'image finit par se charger.
Solution : Assurez-vous que toutes les images (y compris celles de fond) ont des dimensions définies (largeur et hauteur).

Polices Web non définies (Flash of Unstyled Text - FOUT)
Lorsque les polices externes sont chargées et qu'elles ne sont pas disponibles immédiatement, le texte peut être rendu avec une police par défaut, puis changer une fois la police correcte chargée. Cela peut provoquer un "saut" du texte, dégradant ainsi le CLS.
Solution : Utilisez des stratégies de font-display: swap ou font-display: optional pour réduire ce problème. Cela permet d'afficher le texte avec une police de remplacement jusqu'à ce que la police principale soit complètement chargée.

Annonces publicitaires et éléments tiers (Widgets)
Les annonces, les widgets (comme les boutons de réseaux sociaux) ou autres contenus dynamiques peuvent être ajoutés après le chargement initial de la page, modifiant la disposition du contenu. Par exemple, une annonce peut arriver tardivement et pousser les autres éléments vers le bas, provoquant un décalage.
Solution : Définissez une taille fixe pour les espaces publicitaires et les éléments tiers afin que leur emplacement et leur taille ne varient pas pendant le chargement.