Sign in

Our CLS Went From Green To Red After Adding An Image Carousel

Solvedclscore-web-vitalsperformance15 replies · 334 views · started
Reply
Accepted solution by Uma G. — yeahhh banners that push content down cause big shifts. Render cookie and promo banners as fixed overlays at the bottom of the viewport…
  1. Idris Nolan
    @idris_binary

    so annoyed rn performance has been my pet project for months and we were finally all green. Then this:

    CLS regressed on the home page after a few small releases 🤦 Nothing darmatic changed in the layout. The suspcets are an image carousel and maybe a font change. Whats your workflow for tracking down a layout shift regression? Practical tips welcome, ideally ones i can verify before shipping the fix.

    2
  2. Otto
    @ottoq356

    yeahhh 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 teh Performance panel; teh Layout Shifts track lists each shift with the elements that moved and their score.

    2 0 helpful
  3. Theo
    @tquintero_40

    ok so 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.

    28 2 helpful
  6. Jade
    @jeriksen_10

    ok so to see real-user attribution, use the web-vitals librarys attribution build and log onCLS results to your analytics.. 😤 it reports the largest shift target selector, which tells you exactly which element moves for actual visitors.

    1 0 helpful
  7. Otto
    @ottoq356

    ok so honestly just reset the antivirus and save yourself the pain

    3 1 helpful
  8. Rhea C.
    @rheac74

    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 teh expected size. lmk how it goes

    0 4 helpful
  10. Uma G.
    @umag683
    Accepted solution

    yeahhh 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 teh top of the page.

    5 5 helpful
  11. Una F.
    @unaf179

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

    2 0 helpful
  13. Jade
    @jeriksen_10

    :)

    5 6 helpful
  15. Nell A.
    @nadler

    make a backup before u touch the settings, learned that the hard way. ok this thread just saved my weekend

    3 4 helpful
  16. Idris Nolan
    @idris_binary
    in reply to @umag683

    @umag683 omg finally moved the banner to a fixed overlay at teh bottom. The jumping is gone and teh misclick complaints stopped.

    mindblown

    14 0 helpful

Reply to this topic

Sign in or create an account to reply.