Vous n'êtes pas identifié(e).

  • Contributions :
  • Vos boîtes de messages privés sont vides.

🟣 Aide concernant Core web Vitals "Cumulative Layout Shift"


#1 2023-01-23 12:26:05

Mention Olmix
🥉 Grade : Scout

AuxiliaireConsomateur de Liens
Inscription : 2019-08-08
Messages : 37
Likes : 4

Aide concernant Core web Vitals "Cumulative Layout Shift"

Salut à tous !

*** EDIT : RÉSOLU ***

Voilà j'ai soucis sur mon site hxxps://actustream.fr/ concernant la rapidité (Core Web Vital) concernant la partie Cumulative Layout Shift (CLS)

La plupart de mes pages (700 pages environ) sont au dessus du temps requis de 0.25 & sont considérées comme des URL lentes sur Ordinateur.

Malgré de nombreux essais a trifouiller mon code d'après les remarques des outils Gtmetrix & pageSpeedInsights et la console de chrome. 
Je n'arrive pas à décerner et corriger réellement le problème.

Je recherche de l'aide ! je suis même prêt à lâcher un billet de 50 € à celui qui m'aidera à trouver la solution smile

EDIT : après quelques tests sur les sujets suivants (mon CLS) mon problème ne se corrige pas avec :

-Changements des img avec le format webp
-Fonts display swap
-Scripts ajouté tardivement
-éléments sans dimensions
-Retirer les ads / iframes qui peuvent être présentes

Voici la donnée la plus concrète que j'ai pu recueillir :
CLS

Dernière modification par Olmix (2023-01-23 23:18:39)

0
J'aime ❤️

🔴 Hors ligne

#2 2023-01-23 13:09:52

Mention wollastoni
🥈 Grade : Soldier

Membre du CercleOfficierNarcissiqueStratège500likesConsomateur de Liens1000 messagesPhilantrope
Lieu : BZH
Inscription : 2019-11-21
Messages : 1 058
Likes : 537

Marketing
Stratégie
Netlinking
Audit et Analyse

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

Si c'est un Wordpress, as-tu installé le plugin Nitropack ? Super efficace.


Investisseur-Digital.com : mon blog sur l'investissement digital (MFA, SEO...).

1
J'aime ❤️

🔴 Hors ligne

#3 2023-01-23 13:54:13

Mention Olmix
🥉 Grade : Scout

AuxiliaireConsomateur de Liens
Inscription : 2019-08-08
Messages : 37
Likes : 4

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

J'ai oublié de préciser, ce n'est pas un wordpress

0
J'aime ❤️

🔴 Hors ligne

#4 2023-01-23 15:23:59

Mention Youp
🥉 Grade : Scout

AuxiliaireNarcissiqueStratège100likesMembre HospitalierPhilantrope
Lieu : Angers
Inscription : 2022-05-27
Messages : 412
Likes : 168

Audit et Analyse
Sémantique
Stratégie
Développement PHP

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

Ce que tu peux faire, c'est déjà regarder du côté des règles de caches côté htaccess de tes images.
Aussi as tu essayé de passer tes images en webp ?

0
J'aime ❤️

🔴 Hors ligne

#5 2023-01-23 16:02:30

Mention Olmix
🥉 Grade : Scout

AuxiliaireConsomateur de Liens
Inscription : 2019-08-08
Messages : 37
Likes : 4

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

Youp a écrit :

Ce que tu peux faire, c'est déjà regarder du côté des règles de caches côté htaccess de tes images.
Aussi as tu essayé de passer tes images en webp ?

Concernant le HTAccess, j'ai mis d'une durée d'un mois pour les images.

Pour ce qui est des  images en Webp, je n'ai pas encore testé (ça risque de me prendre beaucoup de temps). Mais je ne pense pas que le problème vienne de ce côté puisque la plupart 99% des images sont chargés avec l'attribut loading="lazy" ?

0
J'aime ❤️

🔴 Hors ligne

#6 2023-01-23 17:58:51

Mention Sylvain
🥈 Grade : Soldier

Membre du CercleOfficierNarcissiqueForce PolyvalenteStratège100likes
Inscription : 2014-04-07
Messages : 816
Likes : 110

Développement Python
Audit et Analyse
Sémantique
Advertising

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

Le CLS c'est un probleme de re-rendering de la page, donc c'est très souvent des éléments sans dimension annoncée qui sont affichés et vont provoquer des repaints (image, contenus de type iframes ou ads typiquement).

Une autre cause plus rare je pense c'est un élément tiers qui est inséré dans le site tardivement, par exemple un script qui modifie un affichage, ou un élément tiers comme une font qui est retardé et va provoquer un repaint.


Tant va la loutre à l'eau qu'à la fin elle se mouille...

1
J'aime ❤️

🔴 Hors ligne

#7 2023-01-23 19:36:00

Mention Sogliath
🥈 Grade : Soldier

Membre du CercleOfficierStratège250likesConsomateur de LiensMembre HospitalierPhilantrope
Inscription : 2019-12-06
Messages : 907
Likes : 480

Adminstration Serveur
Automatisation Web
Audit et Analyse
Netlinking Auto

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

Sylvain a écrit :

Une autre cause plus rare je pense c'est un élément tiers qui est inséré dans le site tardivement, par exemple un script qui modifie un affichage, ou un élément tiers comme une font qui est retardé et va provoquer un repaint.

Bonsoir Sylvain,

Comment corriger cela ? Stocker la font localement et modifier le CSS ?

0
J'aime ❤️

🔴 Hors ligne

#8 2023-01-23 21:17:38

Mention Sylvain
🥈 Grade : Soldier

Membre du CercleOfficierNarcissiqueForce PolyvalenteStratège100likes
Inscription : 2014-04-07
Messages : 816
Likes : 110

Développement Python
Audit et Analyse
Sémantique
Advertising

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

Sogliath a écrit :
Sylvain a écrit :

Une autre cause plus rare je pense c'est un élément tiers qui est inséré dans le site tardivement, par exemple un script qui modifie un affichage, ou un élément tiers comme une font qui est retardé et va provoquer un repaint.

Bonsoir Sylvain,

Comment corriger cela ? Stocker la font localement et modifier le CSS ?

C'est vraiment au cas par cas. Mais pour les fonts le stockage en local c'est mieux, d'autant que la RGPD le conseille fortement (ressource tierce == nécessité de consentement, donc en théorie pas de fontes de chez GG avant le consentement).
Pour les ressources mal dimensionnées, reprendre css et code pour bien vérifier que tout est d'équerre.

Et pour les chargements de trucs à l'arrache là ça devient compliqué, il faut regarder les différents ordonnancements de JS, c'est souvent très chaud a faire vu la richesse de scripts qu'on a dispo maintenant.

J'ajoute que le filmstrip ou la video de chargement qu'on peut faire avec sitespeed.io permet souvent de voir les blocs qui sont les plus problématiques.

Dernière modification par Sylvain (2023-01-23 21:18:37)


Tant va la loutre à l'eau qu'à la fin elle se mouille...

1
J'aime ❤️

🔴 Hors ligne

#9 2023-01-23 21:29:02

Mention Olmix
🥉 Grade : Scout

AuxiliaireConsomateur de Liens
Inscription : 2019-08-08
Messages : 37
Likes : 4

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

Sylvain a écrit :

Le CLS c'est un probleme de re-rendering de la page, donc c'est très souvent des éléments sans dimension annoncée qui sont affichés et vont provoquer des repaints (image, contenus de type iframes ou ads typiquement).

Une autre cause plus rare je pense c'est un élément tiers qui est inséré dans le site tardivement, par exemple un script qui modifie un affichage, ou un élément tiers comme une font qui est retardé et va provoquer un repaint.

Alors, merci pour toute ces informations Slyvain.
J'ai rajouté des tests en pré-prod sur ces sujets que j'avais déjà testé :


-changements des img avec le format webp
-Chargement des fonts
-Scripts ajouté tardivement
-éléments sans dimensions
-retirer les ads / iframes qui peuvent être présentes

Mon CLS ne s'améliore toujours pas.

d'autres idées? quelqu'un d'expert sur le sujet qui peut checker le site ?

0
J'aime ❤️

🔴 Hors ligne

#10 2023-01-23 21:35:43

Mention Jaffaar
🥇 Grade : Guardian

AdminMembre du Black LaboMembre du CercleOfficierForce PolyvalenteIngénieur webKilluavie1000likesConsomateur de Liens1000 messagesMembre HospitalierPhilantrope
Lieu : Consultant SEO / WEB
Inscription : 2012-06-01
Messages : 8 420
Likes : 1327

Développement PHP
Développement JS
Networking SEO
Social Engineering

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

@Olmix : envoies l'url en mp si tu veux wink


Comment Ranker ?
Nouveauté : Ninja Web Pro Pack copies limitées !
Ebook : Ninjalinking 2022 (-25% : labo25e)           
Conseils stratégiques ou techniques ? ( Skype : jaffaarbh )

0
J'aime ❤️

🔴 Hors ligne

#11 2023-01-23 22:57:22

Mention Olmix
🥉 Grade : Scout

AuxiliaireConsomateur de Liens
Inscription : 2019-08-08
Messages : 37
Likes : 4

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

C'est bon j'ai trouvé finalement,
cela venait de ma déclaration css  :

<link rel="stylesheet" type="text/css" href="css/style.css?v=6.1" media="print" onload="this.media='all'">

juste changer ça pour :

<link rel="stylesheet" type="text/css" href="css/style.css?v=6.1">
3
J'aime ❤️

🔴 Hors ligne

#12 2023-01-24 23:59:40

Mention Sylvain
🥈 Grade : Soldier

Membre du CercleOfficierNarcissiqueForce PolyvalenteStratège100likes
Inscription : 2014-04-07
Messages : 816
Likes : 110

Développement Python
Audit et Analyse
Sémantique
Advertising

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

Olmix a écrit :
Sylvain a écrit :

Le CLS c'est un probleme de re-rendering de la page, donc c'est très souvent des éléments sans dimension annoncée qui sont affichés et vont provoquer des repaints (image, contenus de type iframes ou ads typiquement).

Une autre cause plus rare je pense c'est un élément tiers qui est inséré dans le site tardivement, par exemple un script qui modifie un affichage, ou un élément tiers comme une font qui est retardé et va provoquer un repaint.

Alors, merci pour toute ces informations Slyvain.
J'ai rajouté des tests en pré-prod sur ces sujets que j'avais déjà testé :


-changements des img avec le format webp
-Chargement des fonts
-Scripts ajouté tardivement
-éléments sans dimensions
-retirer les ads / iframes qui peuvent être présentes

Mon CLS ne s'améliore toujours pas.

d'autres idées? quelqu'un d'expert sur le sujet qui peut checker le site ?

Ca n'a rien changé du tout ? tu utilises quel outil parce que c'est hors un pb technique sur la machine les seuls choses qui peuvent vraiment avoir un impact. Si tu as une preprod enleve un script, teste et recommence, la seule autre possibilité est un script qui lui meme induit le comportement en question (mais ça veut dire un script qui injecte un contenu qu'on voit a l'écran). Si ton cls est mauvais en filmstrip tu dois voir les moments de repaint.


Tant va la loutre à l'eau qu'à la fin elle se mouille...

0
J'aime ❤️

🔴 Hors ligne

#13 2023-01-25 00:03:36

Mention Sylvain
🥈 Grade : Soldier

Membre du CercleOfficierNarcissiqueForce PolyvalenteStratège100likes
Inscription : 2014-04-07
Messages : 816
Likes : 110

Développement Python
Audit et Analyse
Sémantique
Advertising

Re : Aide concernant Core web Vitals "Cumulative Layout Shift"

Olmix a écrit :

C'est bon j'ai trouvé finalement,
cela venait de ma déclaration css  :

<link rel="stylesheet" type="text/css" href="css/style.css?v=6.1" media="print" onload="this.media='all'">

juste changer ça pour :

<link rel="stylesheet" type="text/css" href="css/style.css?v=6.1">

J'avais pas vu ta réponse mais c'est effectivement parce que tu avais un chargement asynchrone d'un élément de rendu donc.
Par contre en repassant en synchrone tu peux ralentir le temps de chargement des ressources liées si il y a un délai sur le css. Mais c'est un probleme bien moins ennuyeux si ça arrive.

Dernière modification par Sylvain (2023-01-25 00:05:12)


Tant va la loutre à l'eau qu'à la fin elle se mouille...

0
J'aime ❤️

🔴 Hors ligne

Pied de page des forums