How to improve Cumulative Layout Shift for a better page experience

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

Комментарии • 140

  • @adrianTNT
    @adrianTNT 11 месяцев назад +13

    Best example of Google hipocrisity. Most CLS comes from Google AdSense ads, 13:36 is that how we are supposed to prevent CLS from Google ads ? By specifying a fixed height when many times an ad is not even loaded and we have to reserve space for it ? How does that help "user experience" mobile user has to scroll half the screen of empty content to get to the page content.
    Not to mention even when ads do load, we have no way to know what size it will be, not after google kept pusing us to switch to flexible ads and move away from fixed size ads.

    • @RickBeacham
      @RickBeacham 4 месяца назад +1

      You turn off JS all together. I think Google Adsense needs an API for their Ad placement. Also ads tend to use quite a bit of resources and data.

  • @dominic23jones
    @dominic23jones 2 года назад +9

    Less shifty, more nifty 🙌

  • @ChristineWilliams-q8i
    @ChristineWilliams-q8i Год назад +2

    This is gold for me

  • @watamallorca
    @watamallorca 6 месяцев назад +2

    Amazing! A whole New World opens up.

  • @ltnclg
    @ltnclg 4 месяца назад +4

    A few days ago, someone helped me fix the CLS issues on my site. In Lighthouse, the CLS problem appears to be resolved, but I still don't see any improvement in Google Search Console, including the data from August 15th. Why is this happening?

  • @saysamphanephimmachack9274
    @saysamphanephimmachack9274 Год назад +3

    You guy the best God bless you all and team.sp

  • @BeeSoonTan-hr1qp
    @BeeSoonTan-hr1qp Год назад +3

    Thanks for sharing

  • @asfiaaiman3699
    @asfiaaiman3699 10 месяцев назад +2

    Thank you so much! It resolved my issue

  • @AndyBadwool
    @AndyBadwool 3 года назад +6

    Very good video, thanks!
    Question: what can be done if in some cases/pages, the lab data (lighthouse) has been showing a perfect 0 CLS for several months (I mean many months, way more than 30 days), but the field data still shows a higher CLS, eg. 0.45? This seems to happen only on a few pages. What can be done to identify field issues that you can't see in the lab? Or it's possible for this to be just a Crux bug?

    • @patrickkettner8398
      @patrickkettner8398 3 года назад +4

      Thats a great question, Andy. Lab data is really only a tool to help highlight potential problems., field data is what _actually_ matters. The good news is that you absolutely can find out what the cause of the issue is! The code I got over at 9:42 shows this. You can also see the "Calculating CLS in my own JS" link in the description

    • @AndyBadwool
      @AndyBadwool 3 года назад +2

      Thank you so much for the reply and clarification! I will look into it :)

    • @wasank6169
      @wasank6169 3 года назад

      ฃำกอ

    • @wasank6169
      @wasank6169 3 года назад

      ฃฃ

  • @floutsch
    @floutsch 3 года назад +7

    Hm... funny topic, those layout shifts. Ever noticed that if you load up a video in the RUclips app and want to push it to your Chromecast and aren't fast enough? THe thing where at the position of the chromecast button there will be a link that brings you to the advertiser. I find that a bit sus. There's two ways to interprets this: a) with all the smartness Google boasts and basically requires from thers, they don't have that themselves b) they know exactly what they're doing :)

    • @JoanHarbison
      @JoanHarbison 11 месяцев назад

      😮

    • @JoanHarbison
      @JoanHarbison 11 месяцев назад

      Delete this app

    • @JoanHarbison
      @JoanHarbison 11 месяцев назад

      4:04

    • @JoanHarbison
      @JoanHarbison 11 месяцев назад

      How to change this shift

    • @floutsch
      @floutsch 11 месяцев назад

      @@JoanHarbison I'm not sure what you're trying to say...?

  • @amelidagonzalez1127
    @amelidagonzalez1127 3 месяца назад

    Changes are great 😊

  • @Sura6Surenran
    @Sura6Surenran Год назад +3

    Layout Better Solution Myself and Loose my Business Devalouping Improve This Help

  • @Y.o.t.t.o7
    @Y.o.t.t.o7 10 месяцев назад +2

    T x for beautiful sharing ❤ Iloved
    .😂❤❤

  • @formal-dresses
    @formal-dresses 2 года назад +3

    Thank you for sharing this useful video. I'm having a problem with large layout shifts, and I've tried everything to fix it, but I'm not a developer. I tried to fix it after seeing your video, but I couldn't. Can you help me?

  • @DavidTaylorGo.Go.Go.
    @DavidTaylorGo.Go.Go. 3 года назад +8

    I will be sending folks here for reference. This is very well presented. Perfect.

  • @muthukrishnanmani46
    @muthukrishnanmani46 4 месяца назад

    It's very helpful! much appreciated and Thanks 👍

  • @zaracrowther9517
    @zaracrowther9517 3 года назад +4

    Thank you for the great information! Looking forward to more :)

  • @LisaStewart-Lawson
    @LisaStewart-Lawson 11 месяцев назад +2

    Great

  • @HerumanHeru-z2z
    @HerumanHeru-z2z 9 месяцев назад +1

    Makasi

  • @GerardoNicolas-j4o
    @GerardoNicolas-j4o 2 месяца назад

    Is bery importante para el cuidado de la salud.
    Muchas felicidades y gracias.

  • @UniAja-wt4du
    @UniAja-wt4du Год назад +2

  • @DiogoSaraivabeatz
    @DiogoSaraivabeatz 2 года назад +3

    Great teacher! Thanks a lot

  • @JuanPabloGutiérrezMartínez-o2e
    @JuanPabloGutiérrezMartínez-o2e 3 месяца назад

    Si tú lo insiste eres todo un genio

  • @LaurenAMPIRE
    @LaurenAMPIRE Месяц назад

    And the Finally.

  • @normajanaban884no
    @normajanaban884no Год назад +3

    Goodmorning

  • @Miss.RiNa069
    @Miss.RiNa069 8 месяцев назад +2

    😮so sir the meaning In every layout mistake it lessen the chance the content to promote

  • @GerardoNicolas-j4o
    @GerardoNicolas-j4o 2 месяца назад +1

    Gerardo Alcaraz Ogazón

  • @boonlird29-i3d
    @boonlird29-i3d 10 месяцев назад +1

    O.K😊

  • @كلكذوق-ع7م
    @كلكذوق-ع7م 9 месяцев назад +2

    Thank you so much! It resolved my issu

  • @traceystevens7701
    @traceystevens7701 3 года назад +3

    Hmm does it really matter if the page loads in less than 5 seconds.

    • @patrickkettner8398
      @patrickkettner8398 3 года назад

      great question! there really isnt' a universal time it takes to load a website, since its a network - What takes 0.02 seconds to load while im on my laptop might take 90 seconds to load when im on the train. Neither is particularly life changing for what I use it for, but if the 0,02 seconds loaded 10 times slower, I probably would barely notice. But if the 90 second one loaded 10 times slower... it probably would never load - id just give up. RUclips Feather was a great example of this. A project that reduced the amount of code it takes to load youtube raising the overall load time on the site. Not because it was slower for anyone, but because people who previously may have to wait hours to load the site, could now do it in less than one hour. A rising tide lifts all boats, and a faster site is faster for everyone.

  • @FidelHumbertoEscamillaM
    @FidelHumbertoEscamillaM Месяц назад

    Buena programacion

  • @chaosparticles
    @chaosparticles Год назад +2

    Beautiful. Very helpful!

  • @neopdblogger9855
    @neopdblogger9855 2 года назад +4

    Clear and well explained. I do learn more, thank you.

  • @Vilai-ik8en
    @Vilai-ik8en Год назад +3

    วิลัย พรหมเสน.ฃอฃอบคุนคับ

  • @MohsinShareef-cl3tt
    @MohsinShareef-cl3tt 10 месяцев назад +1

    0:44

  • @梁美珠-l4s
    @梁美珠-l4s 8 месяцев назад +1

    ❤❤❤🎉🎉🎉

  • @DanielHawkesbotting-j6v
    @DanielHawkesbotting-j6v 2 месяца назад

    ❤❤❤❤

  • @GerardoNicolas-j4o
    @GerardoNicolas-j4o 2 месяца назад

    Perdón pero me tengo que salir de la oficina, muchas gracias muy interesante.

  • @jfdcudydjfyyesiodc
    @jfdcudydjfyyesiodc 6 месяцев назад +1

    Sono informazioni ristrette ai partecipanti come me😂

  • @musliadi4145
    @musliadi4145 11 месяцев назад +1

    Аз бях виновен, че ме обидиха, така че трябва да го приема 🫵🤝🫵 thank U foor Me😅

  • @DanielHawkesbotting-j6v
    @DanielHawkesbotting-j6v 2 месяца назад

    🎉🎉🎉🎉🎉🎉❤❤❤❤❤

  • @azimmuradi4303
    @azimmuradi4303 Год назад +1

    Azim muradi

  • @VEERAYUTSINGSORN-uss_ath9nn
    @VEERAYUTSINGSORN-uss_ath9nn 5 месяцев назад

    อยากไห้เด็กๆมีอนาคตที่ที่เขาพอจะเลือกได้
    🙋🥰👾🌐👌💅 ขอบคุณครับ🧚

  • @JianiuZhang-ke6lq
    @JianiuZhang-ke6lq Год назад +1

    Buessess Jianiuzhang a grave la chane

  • @GerardoNicolas-j4o
    @GerardoNicolas-j4o 2 месяца назад

    Me avisas por favor.

  • @SonuKumar-qw8kq
    @SonuKumar-qw8kq 3 месяца назад

    Ok

  • @dindadurasidfajarusop5821
    @dindadurasidfajarusop5821 3 года назад +1

    Palangkaraya translite indonesia

  • @PriapolosDspdbindukptbsm-dk5ld
    @PriapolosDspdbindukptbsm-dk5ld Год назад +2

    pulih kan koleksi penyimpanan yutuob

  • @ANGELFRANCILISO-nr2bt
    @ANGELFRANCILISO-nr2bt Год назад +1

    send feedback to google

  • @ChaAm-h8v
    @ChaAm-h8v Месяц назад

    17:15 17:21

  • @gopalbarve5732
    @gopalbarve5732 Год назад +1

    ❤😂🎉😢😮😅😊

  • @GerardoNicolas-j4o
    @GerardoNicolas-j4o 2 месяца назад

    I'm, Operator i'm My columna ahí nede

  • @ChaAm-h8v
    @ChaAm-h8v Месяц назад

    18:24 18:24

  • @dee-z5n
    @dee-z5n 3 месяца назад

    😂 0:42 0:43 0:43 0:43

  • @SanjaySingh-yi8to
    @SanjaySingh-yi8to Год назад +1

  • @rank_games4937
    @rank_games4937 3 года назад +14

    This is gold 🔥

  • @bpsingh5771
    @bpsingh5771 5 месяцев назад

    ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤😂❤❤❤

  • @SAHALAM-s1n
    @SAHALAM-s1n 2 месяца назад

    CZTZFZ...

  • @boonlird29-i3d
    @boonlird29-i3d 10 месяцев назад +1

    O.K😊

  • @EyanhBayu
    @EyanhBayu 10 дней назад

    Ok