Sign in

HUNTING LAYOUT SHIFTS ON THE CHECKOUT PAGE: IS THE COOKIE BANNER THE USUAL SUSPECT?

clscore-web-vitalsperformance13 replies 路 447 views 路 started
Reply
  1. Ines
    @ines_binary

    hmmmm ok we got a complaint that people tap the wrong button on the checkout page cuz thigns 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 teh cookie banner, but Ive been wrong before. Any tips for proving whats happening to non-technical colleagues would help too. seriously need help here 馃槶

    6
  2. Zoe Nolan
    @zoe.nolan

    ok so 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; the Layout Shifts track lists each shift with the elements that moved and their score. worked for me anyway 馃し

    1 2 helpful
  3. Diego C.
    @diego.castillo

    @diego.castillo nah thats not it, performance has nothing to do with it but hey ymmv

    3 0 helpful
  5. Diego C.
    @diego.castillo

    exact same thing happened to my gaming rig last month. told my boss it would take 10 minutes. its been a whole week

    6 0 helpful
  7. Sami A.
    @regextinker-1fh

    yeahhh for me it was the default config. swapped it and boom, fixed hope that helps :)

    thumbsup

    1 2 helpful
  8. Haruto Yilmaz
    @polargarage

    oh ive been there lol 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. fingers crossed 馃

    32 0 helpful
  9. Nina
    @ninak808

    Font swaps shift text when teh fallback and web font have different metrics. Use font-display: optional for less important fonts, or tune the fallback with size-adjust, ascent-override and descent-override in an @font-face rule sooo the swap barely moves anything. fingers crossed 馃

    thumbsup

    2 0 helpful
  10. Nina
    @ninak808

    Lab and field data differ cuz Lighthouse only measures teh 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.

    1 0 helpful
  11. Dima Lindqvist
    @dimal496

    yeahhh 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. lmk how it goes

    3 0 helpful
  12. Yuki E.
    @yuki.eriksen

    hmmmm not sure about that id question whether an embedded review widget needs to be on the checkout page at all. removing a feature is sometimes teh best performance fix. just my 2 cents

    8 2 helpful
  13. Yuki E.
    @yuki.eriksen

    my old thinkpad is officially haunted. make a backup before u touch the thermal paste, learned that the hard way

    0 1 helpful
  14. Ines
    @ines_binary
    in reply to @dimal496

    @dimal496 WOWWW reserved space for the cookie banner with a fixed min-height and CLS is green again in the lab. field data is catching up. thank you!

    15 0 helpful

Reply to this topic

Sign in or create an account to reply.