Sign in

lighthouse says cls is fine, field data says poor on product pages. who's right?

clscore-web-vitalsperformance12 replies · 316 views · started
Reply
  1. Lea Jensen
    @lea_shader

    so annoyed rn we got a copmlaint that ppl tap the wrong button on product pages cuz things move right as they tap... then I checked teh vitals:

    CLS is in teh red, lighthouse on my desktop says its fine, which confuses me even more. is there a way to see the real shifts users experience?? i suspect an image carousel, but Ive been wrong before. any tips for proving whats happening to non-technical colleagues would help too. pls help 🙏

    facepalm

    3
  2. Pia O.
    @heapnomad

    uhh what does the Layout Shift Regions overlay highlight on the checkout page? ??

    0 1 helpful
  5. Noor Mori
    @nmori_35

    make a backup before u touch the settings, learned that teh hard way worked for me anyway 🤷

    lol

    2 1 helpful
  6. Bea Petrov
    @bpetrov

    long time lurker first post lol ok this thread just saved my wekeend im about to throw this thing out the window lol

    0 2 helpful
  7. Noor Mori
    @nmori_35

    oh ive been there lol in Chrome DevTools, open the Rendering panel (More tools > Rendering) and enable 'Layout Shift Regions'. shifted areas flash blue as the page loads. then record in the Performance panel; teh Layout Shifts track lists each shift with teh elements that moved and their score. worked for me anyway 🤷

    thumbsup

    3 6 helpful
  8. Ash
    @ash.nakamura

    everyone keeps saying this but noobdy posts proof

    lol

    11 1 helpful
  9. Maya
    @cache_shed285

    lol same thing happened to me reserve space for anything that loads late. Give images and iframes width and height attributes or CSS aspect-ratio. For ad slots and embeds, set a min-height on the container matching the expected size.

    6 2 helpful
  10. Rowan Sato
    @rowan_cache

    Lab and field data differ because Lighthouse only measures the initial load on one simulated device, while field data (from real users over the last 28 days) also counts shifts after interactions, on slow devices and different screen sizes. Trust field data for the verdict and lab tools for debugging.

    0 1 helpful
  11. Malik M.
    @mmoreau_10

    ahh classic banners that push content down cause big shifts, render cookie and promo banners as fixed overlays at the bottom of the viewport instead of inserting them at the top of the page. worked for me anyway 🤷

    2 4 helpful
  12. Ines J.
    @byte_fox

    dont chase a perfect zero. under the good threshold is good enough; spend teh remaining effort on things users actually notice, like slow interactions.

    1 6 helpful
  13. Lea Jensen
    @lea_shader
    in reply to @mmoreau_10

    @mmoreau_10 Tuned the fallback font metrics and the text barely moves now 😭 Combined with image dimensions, product pages passes again.

    2 11 helpful

Reply to this topic

Sign in or create an account to reply.