# Core Web Vitals échoués : identifier et résoudre les problèmes de CLS > URL: https://4eck-media.de/fr/blog/12156/ > Language: fr > Description: Comment nous avons corrigé des problèmes de CLS sur plus de 100 000 pages de notre portail et repassé les Core Web Vitals. --- Pendant près de trois mois, nous avons été confrontés à des **problèmes de CLS** sur notre portail TutKit.com. Nous avons consacré beaucoup de temps et d’énergie à **identifier et résoudre les Cumulative Layout Shifts**. Dans ce retour d’expérience, je voudrais te donner un aperçu de la manière dont nous avons procédé. ## Le Cumulative Layout Shift (CLS) est l’une des trois métriques centrales des **Core Web Vitals** de Google. Ces métriques sont décisives pour évaluer la convivialité des sites et influencent le classement dans les résultats de recherche. Le CLS mesure la stabilité visuelle d’une page et indique la fréquence des décalages de mise en page inattendus pendant son chargement. ### Quand des éléments d’un site changent soudainement de position pendant le chargement, cela peut être frustrant pour les utilisateurs. Tu connais peut-être la situation : le contenu d’un site saute parce qu’une publicité s’affiche d’un coup. Un bouton sur lequel tu allais cliquer peut aussi changer brusquement de position et activer un autre lien à la place. Ces décalages de mise en page inattendus sont gênants et nuisent à l’expérience utilisateur. Pour éviter ces problèmes et **bien optimiser un site**, il est important de surveiller la valeur du CLS et de l’améliorer de façon ciblée. La valeur CLS se calcule à partir de la taille de l’élément déplacé et de la distance qu’il parcourt dans le viewport. Google considère les valeurs CLS inférieures à 0,1 comme bonnes, entre 0,1 et 0,25 comme à améliorer, et tout ce qui est au-dessus comme mauvais. Voici notre graphique issu de la Search Console. En jaune, les valeurs entre 0,1 et 0,25 ; en rouge, les pages dont les valeurs dépassent ce seuil. ![CLS Probleme](https://4eck-media.de/wp-content/uploads/2025/11/cls_problems_cwv_65361c4b3b-1920x1080.avif) Bien que nous ayons d’excellents scores PageSpeed sur TutKit.com, nous ne validions tout simplement plus les Core Web Vitals pour la plupart de nos pages depuis mi-décembre 2024. C’était vraiment étrange : un score PageSpeed mobile de 95 ou 97, mais des Core Web Vitals non validés. Le problème, c’était le CLS. Comme le CLS **ne tient pas compte du seul viewport initial, mais aussi des interactions à l’intérieur de la page**, la cause était difficile à identifier. Dans ce rapport, nous partageons avec toi notre expérience sur la manière dont nous avons détecté et résolu ces problèmes avec succès. ## Ces dernières semaines, plusieurs experts SEO que je suis sur LinkedIn ont fait état d’avertissements CLS soudains, signalés dans la Google Search Console depuis décembre 2024 et janvier 2025. Cela pourrait être lié à la Core Update de décembre 2024 que Google a déployée à la mi-décembre. Des sites web qui affichaient auparavant des valeurs CLS vertes ont soudainement été classés comme problématiques, comme le nôtre d’ailleurs. - - - - - - - ## 1. 2. 3. L’API CrUX et BigQuery ne fournissaient pas de données en temps réel, mais des valeurs agrégées des 28 derniers jours. Cela signifie que les améliorations ne deviennent visibles qu’avec un délai et qu’une évaluation immédiate n’était pas possible. ### Les éléments particulièrement problématiques ont été marqués et testés à plusieurs reprises avec différents paramètres de throttling. En réduisant artificiellement la vitesse de connexion à Slow 4G, nous avons pu mieux simuler les retards de chargement de certains éléments et comprendre les décalages de mise en page. Sur l’image, nous voyons un layout shift devenu visible avec le throttling réseau et CPU : ![Layout Shift Throttling](https://4eck-media.de/wp-content/uploads/2025/11/cls_probleme_seitensektion_0e59937c84-1920x1080.avif) Tous les tests simples et rapides peuvent être effectués avec **DevTools → Performance** en rechargeant la page avec F5 à différentes positions, ou via un test plus dur et intensif avec l’enregistrement Performance. ### Nous avons en outre effectué des tests mobiles avec différentes résolutions afin d’identifier des problèmes spécifiques apparus dans des scénarios d’utilisation réels. Pour cela, nous avons exporté les données de Google Analytics et réalisé les tests pour 200 résolutions mobiles différentes, afin de détecter des problèmes qui ne devenaient visibles qu’à une résolution donnée. Pour se faire une idée de l’étendue des résolutions avec lesquelles les utilisateurs naviguent sur un site web : le fichier d’export de Google Analytics indiquait, pour une période de quatre semaines, 4 083 résolutions différentes pour desktop, tablette et mobile. Nous les avons triées par nombre d’utilisateurs. Même à la 200e place des résolutions, nous avions encore 88 utilisateurs qui avaient navigué chez nous avec la résolution 412×778 au cours de cette période de quatre semaines. ![Bildschirmauflösung](https://4eck-media.de/wp-content/uploads/2025/11/sitzungen_bildschirmaufloesung_6a1f5c1e1e-1920x1080.avif "Sitzungen Bildschirmaufloesung") ![Recalibrate mobile devices](https://4eck-media.de/wp-content/uploads/2025/11/recalibrate_mobile_devices_e93b048b95-1920x1080.avif) ## ### Vous voyez ici par exemple le résultat PageSpeed mobile de 92 en performance, sans problème CLS apparent. Avec nos tests dans l’onglet Performance des DevTools, nous avons alors identifié le problème dans le comportement réel des utilisateurs. La valeur CLS affichait 0,22… nettement trop élevée. ![CLS before](https://4eck-media.de/wp-content/uploads/2025/11/cls_before_d919845dd9-1920x1080.avif "cls_before_d919845dd9") ![CLS after](https://4eck-media.de/wp-content/uploads/2025/11/cls_after_f69c68a903-1920x1080.avif) ### Solution : nous avons vérifié quelles graisses de police, de 100 à 900, étaient chargées et comparé avec les besoins réels de l’interface utilisateur, ce qui nous a permis de réduire le nombre de graisses. D’autre part, les fichiers de polices ont été réduits aux seuls caractères réellement nécessaires. Seuls deux fichiers de polices étaient encore chargés, pour une taille totale de 105 ko. ![CLS Noto Problems](https://4eck-media.de/wp-content/uploads/2025/11/cls_noto_problems_3412a57196-1920x1080.avif "cls_noto_problems_3412a57196") ![CLS problems with Noto](https://4eck-media.de/wp-content/uploads/2025/11/noto_cls_problems_8af4345b3e-1920x1080.avif "noto_cls_problems_8af4345b3e") ### **Optimisation Google AdSense** Problème : le chargement différé des annonces provoquait des décalages de mise en page. Solution : adapter les réglages AdSense pour utiliser des emplacements statiques qui réservent l’espace nécessaire dès le chargement de la page. **Passage des tables des matières de JavaScript à PHP** Problème : le chargement dynamique via JavaScript provoquait des sauts de mise en page. Solution : rendre les tables des matières des articles de blog côté serveur avec PHP, pour s’assurer qu’elles soient disponibles dès le chargement et ne provoquent aucun décalage ultérieur. **Adaptation des modules FAQ** Problème : les questions ouvertes par défaut provoquaient des décalages de mise en page imprévisibles. Solution : supprimer la fonctionnalité d’ouverture par défaut des questions pour éviter les changements de mise en page inattendus. **Optimisation des éléments slider et accordéon** Problème : les contenus n’étaient rendus qu’après coup, ce qui provoquait des décalages. Solution : précharger les éléments et fixer des hauteurs précises pour les sliders afin de garantir une mise en page stable pendant le chargement. **Amélioration de l’intégration des avis Google** Problème : les contenus chargés depuis l’extérieur influaient sur la structure de la page et provoquaient des décalages. Solution : recours au lazy loading avec des emplacements fixes pour s’assurer que l’espace nécessaire soit réservé dès le chargement. ![CLS Jira Tasks](https://4eck-media.de/wp-content/uploads/2025/11/cls_jira_tasks_fcd7ef459b-1920x1080.avif) Au début, nous créions un ticket pour chaque anomalie et lancions la validation dans la Search Console après chaque merge. Mais cela ne suffisait pas, car d’une part la validation échouait, d’autre part de nouveaux problèmes étaient identifiés au passage suivant, si bien qu’au final nous avons regroupé les problèmes de CLS dans trois tickets (List of CLS problems) jusqu’à ce que tous soient corrigés. Il y a eu finalement plus de problèmes que prévu. Le nombre de tickets et la plage des numéros de tickets montrent à eux seuls combien de temps et avec quelle intensité les problèmes de CLS nous ont occupés. Tandis que le portail d’actualité [Heise a pu résoudre ses problèmes de CLS avec une seule ligne de code](https://www.heise.de/blog/Wie-eine-Zeile-CSS-den-Cumulative-Layout-Shift-bei-3700-URLs-verbessert-9677415.html) — causés par la bannière de consentement aux cookies — chez nous, il a fallu retoucher un peu plus de lignes de code. Après la mise en œuvre des dernières mesures, nous avons constaté que les améliorations n’étaient pas immédiatement visibles dans la Google Search Console. Le processus de validation était annoncé avec un délai pouvant atteindre 28 jours. Cela tient au fait que la Search Console repose sur des données d’utilisateurs réels, agrégées sur une période de 28 jours. Il peut donc s’écouler jusqu’à quatre semaines avant que les effets des modifications ne soient pleinement reflétés. Dans notre cas, les premières améliorations sont devenues visibles au bout de neuf jours. ## Performance messbar verbessern D’autres analyses et exemples concrets montrent quelles décisions techniques améliorent durablement les temps de chargement, les Core Web Vitals et la qualité perçue. [![Optimiser le TTFB pour la recherche par IA : étude de cas](https://4eck-media.de/wp-content/uploads/2026/08/ttfb-ai-search-case-study.avif "Optimiser le TTFB pour la recherche par IA : étude de cas")](https://4eck-media.de/fr/blog/ttfb-dans-loptimisation-de-la-recherche-par-ia-pourquoi-nous-mesurons-et-optimisons-etude-de-cas-geo/ "TTFB dans l’optimisation de la recherche par IA : pourquoi nous mesurons et optimisons (étude de cas GEO)") [TTFB dans l’optimisation de la recherche par IA : pourquoi nous mesurons et optimisons (étude de cas GEO)](https://4eck-media.de/fr/blog/ttfb-dans-loptimisation-de-la-recherche-par-ia-pourquoi-nous-mesurons-et-optimisons-etude-de-cas-geo/) Matthias Petri [![Cleanout : marque moderne avec un OnePager](https://4eck-media.de/wp-content/uploads/2026/02/cleanout-fp-logo-onepager-icons-mapdesign-720x480.avif "Cleanout : marque moderne avec un OnePager")](https://4eck-media.de/fr/blog/cleanout-fp-logo-onepager-avec-seo-100-100-et-pagespeed-96/ "Cleanout F&P : logo & OnePager avec SEO 100/100 et PageSpeed 96") [Cleanout F&P : logo & OnePager avec SEO 100/100 et PageSpeed 96](https://4eck-media.de/fr/blog/cleanout-fp-logo-onepager-avec-seo-100-100-et-pagespeed-96/) Matthias Petri [![ OnePager pour Gartenpflege](https://4eck-media.de/wp-content/uploads/2025/05/gartenpflege_onepager-720x480.avif " OnePager pour Gartenpflege")](https://4eck-media.de/fr/blog/12149/ "OnePager moderne pour Gartenpflege Müritz – haute performance, univers d’icônes propre et design soigné") [OnePager moderne pour Gartenpflege Müritz – haute performance, univers d’icônes propre et design soigné](https://4eck-media.de/fr/blog/12149/) Matthias Petri [![AVIF : le meilleur format de fichier pour ton SEO d'images](https://4eck-media.de/wp-content/uploads/2025/10/squoosh-kompressionsvergleich-webp-avif-bilder-seo-2024-720x480.avif "AVIF : le meilleur format de fichier pour ton SEO d'images")](https://4eck-media.de/fr/blog/avif-le-meilleur-format-de-fichier-pour-le-seo-des-images-et-le-pagespeed/ "AVIF : le meilleur format de fichier pour le SEO des images et le PageSpeed") [AVIF : le meilleur format de fichier pour le SEO des images et le PageSpeed](https://4eck-media.de/fr/blog/avif-le-meilleur-format-de-fichier-pour-le-seo-des-images-et-le-pagespeed/) Matthias Petri ## L’un des [experts SEO qui partageait sur LinkedIn ses problèmes de CLS](https://www.linkedin.com/posts/fabianjaeckert_corewebvitals-ux-google-activity-7303663537715838976-Ea7L/) a exprimé son admiration pour toutes les équipes qui parviennent à valider les Core Web Vitals : *J’admire toutes les équipes qui remplissent les Core Web Vitals ! Parce que moi-même, je n’y arrive pas…* Pour que les contenus apparaissent aussi comme source fiable dans les réponses de l’IA, notre [agence GEO](https://4eck-media.de/fr/competences/optimisation-llm-geo-ia/) associe sémantique, technique et expertise démontrable. Cette reconnaissance est justifiée, car satisfaire aux Core Web Vitals sur des sites volumineux exige une concentration forte sur la technique, le PageSpeed et l’expérience utilisateur. Pendant que je raconte ici comment nous avons résolu nos problèmes de CLS, la multitude d’endroits identifiés pourrait laisser penser que pas mal d’aspects techniques étaient déjà problématiques chez nous. Ce n’est absolument pas le cas. Avec le déploiement de notre multilinguisme, nous avons été confrontés à de nombreux nouveaux défis et avons donc consacré de nombreux mois au refactoring CSS et JS, à la [réduction des requêtes en base de données](https://4eck-media.de/fr/blog/optimisation-efficace-de-la-base-de-donnees-reduction-des-requetes-de-base-de-donnees/) et à d’autres améliorations PageSpeed comme l’[optimisation du TTFB](https://4eck-media.de/fr/blog/ameliorer-le-ttfb-comment-grace-au-route-caching-nous-avons-reduit-notre-temps-de-premiere-reponse-serveur-de-88/). Aujourd’hui, PageSpeed Insights affiche un score PageSpeed mobile de 95 pour notre page d’accueil. Il ne reste que quelques recommandations dans le rapport qui contiennent encore des potentiels d’amélioration. ![Screenshot von Google PageSpeed Insights im mobilen Modus für die TutKit-Startseite mit Performance-Score 95, FCP 1,7 s, LCP 2,9 s und CLS 0](https://4eck-media.de/wp-content/uploads/2025/11/pagespeed_tutkit_home_a3e539fb0b-1920x1080.avif "PageSpeed Insights mobil – TutKit Startseite") ![Screenshot von Google PageSpeed Insights für eine mobil optimierte TutKit-Unterseite mit Performance-Score 97, guten Core Web Vitals und Hinweisen zur weiteren PageSpeed-Optimierung durch 4eck Media](https://4eck-media.de/wp-content/uploads/2025/11/pagespeed_tutkit_unterseite_a0a888967c-1-1080x1920.avif "PageSpeed Insights Unterseite") Malgré cette base déjà propre de TutKit.com, des problèmes de CLS sont apparus. Et notre chance a été d’avoir déjà fait, en grande partie, nos devoirs en matière de standards d’optimisation PageSpeed en 2024. Pour l’expert SEO de LinkedIn qui a honnêtement reconnu ses propres problèmes avec les Core Web Vitals, la situation est différente. J’ai vérifié son site web. Rien que les fichiers de polices chargés à l’ouverture de la page sont énormes. Par rapport à TutKit.com, on y charge un multiple de fichiers et de volumes, alors que sa page d’accueil est plus petite que la nôtre. Voyez ici : ![Screenshot der Netzwerk-Analyse mit vielen geladenen Webfonts (Open Sans, Noto Sans, Font Awesome) und Ladezeiten, genutzt von 4eck Media zur PageSpeed-Optimierung und technischen SEO-Analyse](https://4eck-media.de/wp-content/uploads/2025/11/fontprobleme_pagespeed_6c3f2c6a3d-1-1920x1080.avif "font problems pagespeed") ![Screenshot von Google PageSpeed Insights mit mobilem Performance-Score 47, Core-Web-Vitals-Fehlern und Hinweisen zu LCP, JavaScript & DOM-Größe, genutzt von 4eck Media für PageSpeed-Optimierung und technisches SEO](https://4eck-media.de/wp-content/uploads/2025/11/performance_hausaufgaben_cbaa032549-1-1920x1080.avif "PageSpeed-Analyse mit Core-Web-Vitals-Problemen") Même si les développeurs s’attaquent uniquement aux problèmes de CLS, ils ne pourront pas faire l’impasse sur les standards des sites modernes : résoudre les problèmes de polices, miser sur des [formats d’image modernes comme AVIF](https://4eck-media.de/fr/blog/avif-le-meilleur-format-de-fichier-pour-le-seo-des-images-et-le-pagespeed/), refactorer les fichiers CSS et JS, charger systématiquement les images du bas via lazy loading, etc. Car sans ces optimisations de performance fondamentales, un correctif rapide du CLS ne suffira pas ou ne durera pas. ## Aparté : PageSpeed 100 et pourtant Core Web Vitals non validés En Allemagne, tout le monde connaît la Karrierebibel et ses bons conseils sur la candidature et la vie professionnelle. L’année dernière, le site a fait l’objet d’une refonte qui, à mon avis, visait aussi à procéder à des optimisations techniques. Et effectivement, je trouve d’excellentes valeurs PageSpeed : la page d’accueil affiche 99 sur mobile et 100 sur ordinateur. Respect. ![Screenshot von Google PageSpeed Insights im mobilen Modus mit Performance-Score 99, Barrierefreiheit 99, Best Practices 100 und SEO 100, genutzt von 4eck Media als Beispiel für PageSpeed-Optimierung und Core-Web-Vitals-SEO](https://4eck-media.de/wp-content/uploads/2025/11/99_mobil_pagespeed_0e318f6d7a-1-1080x1920.avif "99 mobil PageSpeed") Mais : le PageSpeed et le CLS doivent toujours être considérés de façon globale, c’est pourquoi il est important d’examiner aussi systématiquement les différentes résolutions. Le **tableau CrUX** pour le desktop met en évidence de nombreux problèmes de CLS sur les vues desktop. ![Screenshot des Chrome-UX-Reports zum Cumulative Layout Shift (CLS) für karrierebibel.de mit Anteilen guter und schlechter CLS-Werte, genutzt von 4eck Media für Core-Web-Vitals-Analyse und technisches SEO](https://4eck-media.de/wp-content/uploads/2025/11/desktop_cls_71c6fb0d0b-1-1920x1080.avif "Desktop CLS") Si je fais tester une sous-page avec PageSpeed Insights, j’obtiens pour ordinateur un PageSpeed de 100, mais les Core Web Vitals ne sont pas validés. C’est aussi possible, comme vous pouvez le constater sur cet exemple. ![Screenshot von Google PageSpeed Insights für eine Desktop-Seite mit 100 Punkten Leistung, 100 Best Practices, 100 SEO, 86 Barrierefreiheit und nicht bestandener Core-Web-Vitals-Bewertung (CLS 0,24), genutzt von 4eck Media für PageSpeed-Optimierung und technisches SEO](https://4eck-media.de/wp-content/uploads/2025/11/100_desktop_378c8b8d59-1-1080x1920.avif "PageSpeed 100") Utilisez donc différents outils de vérification pour trouver les erreurs qui font qu’actuellement vous ne remplissez pas des métriques importantes. Car en ne validant pas les Core Web Vitals, vous manquez aussi un signal de classement important pour Google. Il existe peut-être un lien entre le non-respect de certains **signaux de classement** et métriques de mesure et la chute de la visibilité en ligne sur Google. Sur l’image, on voit comment, en l’espace d’un an, la visibilité est passée de plus de 64 à une trentaine. Les raisons ne sont certainement pas à chercher uniquement du côté des Core Web Vitals. Mais il vaut toujours mieux avoir fait entièrement ses devoirs. Nous ne pouvons pas influencer les conditions extérieures. Ce qui se passe sur notre propre site web, en revanche, oui. Pour que la qualité technique se traduise aussi en portée organique, notre [agence SEO](https://4eck-media.de/fr/competences/agence-seo-4eck-media-nous-vous-hissons-en-haut/) accompagne l’optimisation en continu. ![Screenshot des Sistrix-Sichtbarkeitsindex von karrierebibel.de mit stetigem Rückgang der wöchentlichen Sichtbarkeit, genutzt von 4eck Media zur SEO-Analyse und Bewertung von Ranking-Verlusten](https://4eck-media.de/wp-content/uploads/2025/11/sistrix_abschwung_dc29a24cf5-1-1920x1080.avif "CLS Cruxboard") ## L’impact que peut avoir la non-validation des Core Web Vitals devient évident lorsque l’on examine la corrélation suivante. Dans le tableau de bord CrUX de notre portail, on voit clairement comment, sur les usages mobiles, les problèmes de CLS se sont accumulés depuis octobre 2024. L’image montre uniquement les valeurs CLS pour les téléphones. ![Screenshot des Sistrix-Sichtbarkeitsindex von karrierebibel.de mit stetigem Rückgang der wöchentlichen Sichtbarkeit, genutzt von 4eck Media zur SEO-Analyse und Bewertung von Ranking-Verlusten](https://4eck-media.de/wp-content/uploads/2025/11/sistrix_abschwung_dc29a24cf5-1-1920x1080.avif "CLS Cruxboard") ![Device Distribution](https://4eck-media.de/wp-content/uploads/2025/11/device_distribution_cruxboard_e36546506c-1-1920x1080.avif) ![Screenshot des Google-Search-Console-Berichts zu Core Web Vitals mit stark wachsender Zahl von 141.330 guten URLs für Mobil und Computer, genutzt von 4eck Media zur Performance-Optimierung und technischem SEO](https://4eck-media.de/wp-content/uploads/2025/11/core_web_vitals_growing_9e4d14c1ba-1-1920x1080.avif "Core Web Vitals") Les derniers changements montrent que l’**optimisation du CLS** reste une tâche exigeante. Nos principaux enseignements sont : - - - À long terme, une approche systématique aide à minimiser durablement les problèmes de CLS et à **garantir une expérience utilisateur optimale**, car cela aussi fait partie du SEO.