Optimisation du Cumulative Layout Shift (CLS)

Discussion dans 'Référencement Google' créé par saluts92, 8 Décembre 2020.

  1. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    Bonjour,
    Comme annoncé par Google pour mai 2021, les signaux web essentiels risquent d'être pris plus en plus en compte. Notamment le CLS ( à mon avis).
    Pour rappel le CLS n'est pas vraiment un signal de rapidité pure mais plutot de stabilité : combien faut il de temps pour que la page arrête de bouger d'un point de vu utilisateur : cela pour éviter les clics non souhaités (que c'est désagréable de penser cliquer sur un lien, la page bouge, et je clique sur un autre ...)

    Je me suis donc penché sur mes pages importantes (qui sont toutes faites de la meme façon) et j'ai environ 0,330 seconde de CLS.
    Je sais c'est déjà peu par rapport à la grande majorité des sites, mais je suis dans le rouge quand même.

    J'ai identifié que c'est une image de 900x350 pixels en haut de page qui crée cet CLS "énorme"

    Après m'être renseigné, j'ai donc rajouté les attributs WIDTH et HEIGHT à mon image pour que le navigateur réserve cet emplacement.
    Pour être plus précis j'ai indiqué les dimensions DESKTOP, l'image étant ensuite CSSisé d'un width:100% en dessous de 1080px de largeur d'écran.

    Sauf que ça ne change pas grand chose sur Lighthouse, j'ai toujours 0,330 seconde.

    Une idée ?
     
  2. theunholy
    theunholy WRInaute occasionnel
    Inscrit:
    6 Août 2013
    Messages:
    402
    J'aime reçus:
    59
    Ce serait plus simple avec une adresse.
     
  3. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    envoyé en MP
     
  4. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    grâce à @theunholy j'ai pu éclaircir le soucis.

    En effet mon action (voir plus haut) a bien porté ses fruits, c'est juste que dans Lighthouse les données de performance semblent sur 28 jours et non pas à un instant T (si quelqu'un d'autre peut valider ça)
     
  5. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    20 119
    J'aime reçus:
    549
    et donc dans Google PageSpeed Insights c'était OK ?
     
  6. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    oui mais uniquement dans les "données de laboratoire" (qui semble mesurer à un instant T, tu me confirmes ?) je suis descendu à 0.008 s (pour rappel je partais de 0.330 s)
     
  7. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    20 119
    J'aime reçus:
    549
    le score CLS n'est pas un nombre de secondes mais un nombre sans unité, entre 0 et 1, une sorte de pourcentage

    j'ai fait un test dans Chrome et je n'arrive pas à voir ça
     
  8. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    pour une meme page, ce matin, mon CLS (pour Ordinateur) est de :
    lighthouse (sous Chrome) = 0.28
    PageSpeedInsight / "Données de terrain" = 0.67
    PageSpeedInsight / "Données de laboratoire" = 0

    Lorsque je fais des modifications sur ma page, et que je teste aussitot, le seuil indice qui bouge de manière significative est PageSpeedInsight / "Données de laboratoire"

    donc j'en conclue (comme @theunholy ) que les "données de laboratoire" sont les mesures dynamiques.

    Un autre avis là dessus svp ?

    QUand j'enelve les WIDTH et HEIGHT de mon image, j'ai les mesures suivantes :
    lighthouse (sous Chrome) = 0.322
    PageSpeedInsight / "Données de terrain" = 0.67
    PageSpeedInsight / "Données de laboratoire" = 0.959
     
    #8 saluts92, 9 Décembre 2020
    Dernière édition: 9 Décembre 2020
  9. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    effectivement, merci, je n'avais pas fait attention à cela, mais j'avais bien compris le principe (voir mon premier message)

    tu as fais le test avec un site non optimisé depuis 28 jours ?
     
  10. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    20 119
    J'aime reçus:
    549
    je l'ai fait avec la home de WRI :)
     
  11. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    a ce niveau là ta home est sur-optimisé ;)

    et si elle l'est depuis plus de 28 jours, c'est normal que tu ne vois pas de différence, non ?
     
  12. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    20 119
    J'aime reçus:
    549
    je ne connais pas ces détails, désolé
    en tout cas c'est évident qu'il faut indiquer la taille de l'image dans le code source
     
  13. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    sinon, l'impact de ma mise à jour est surtout sur Ordinateur
    sur Mobile je suis descendu un petit peu mais je reste entre 0.2 et 0.3

    cela peut etre normal étant donné que la taille que j'ai donné est celle pour Ordinateur

    QUestions :
    1/ Comment faite vous pour indiquer une taille (surtout la hauteur) pour mobile pour atteindre un bon CLS alors qu'il y a des dizaines de possibilités de largeur d'écran ? je vois que sur WRI le CLS est très bon alors que les dimensions d'images sont celles pour ordinateur

    2/ je ne comprends pas pourquoi dans la GSC/SWE je n'ai pas d'alerte pour le Mobile alors que dans Page speed insight, l'indicateur du CLS est rouge ?


    lien intéressant : https://www.abondance.com/20201208-...m_medium=email&utm_campaign=actu-moteurs-1147
     
  14. WebRankInfo
    WebRankInfo Admin
    Membre du personnel
    Inscrit:
    19 Avril 2002
    Messages:
    20 119
    J'aime reçus:
    549
    pour 1) je pense qu'il faut indiquer la hauteur dans src et lister toutes les images possibles dans srcset selon les tailles d'écran

    les dév pourront confirmer, sinon il faut se renseigner sur la gestion du responsive pour les images
     
  15. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    merci, mais comme mon image est calé à 100% de l'écran en dessous de 1080px, ça veut dire qu'il y a (en exagérant un peu) 1080 possibilités
     
  16. saluts92
    saluts92 WRInaute impliqué
    Inscrit:
    12 Avril 2006
    Messages:
    856
    J'aime reçus:
    34
    Retour d'expérience : je n'ai plus de page en "alerte" ou en "amélioration" dans GSC/Signaux Web Essentiels depuis que j'ai mis en place mes optimisations (voir début du POST) : CDFD

    Prêt pour MAI 2021
     
Chargement...
Similar Threads - Optimisation Cumulative Layout Forum Date
WordPress PageSpeed - optimisation - fonts Développement d'un site Web ou d'une appli mobile 27 Janvier 2021
Optimisation SXO de site web de mon agence Référencement Google 22 Janvier 2021
Avis et optimisation sur blog voyage Demandes d'avis et de conseils sur vos sites 24 Décembre 2020
Optimisation URL pour les moteurs de recherche Débuter en référencement 15 Novembre 2020
Optimisation site Wordpress Débuter en référencement 21 Août 2020
Optimisation des publicités / revenus AdSense 19 Juillet 2020
WordPress optimisation des temps de chargements Débuter en référencement 28 Juin 2020
Optimisation pour la catégorie de produits de commerce électronique Rédaction web et référencement 26 Juin 2020
Astuce optimisation image au format Webp YouTube, Google Images et Google Maps 6 Avril 2020
Optimisation liens footer Netlinking, backlinks, liens et redirections 3 Janvier 2020