Sign in

Lighthouse Says CLS Is Fine, Field Data Says Poor On The Home Page. Whos Right?

Solvedclscore-web-vitalsperformance12 replies · 363 views · started
Reply
Accepted solution by Clara C. — ahh classic to see real user attribution, use the web vitals librarys atrtibution build and log onCLS results to your analytics. It…
  1. Alba
    @quartz_gremlin-3hl

    ok so search Console flagged the home page for poor CLS out of nowhere, and the PageSpeed report agrees:

    Watching teh page load on my phone, I can see content jump down at least once. My gut says its an embedded review widget, because thats teh last thing we changed, but I want proof before arguing with teh marketing team. How do I find exactly which element moves and why? Id love a repeatable workflow I can hand to the rest of teh team. what am i doing wrong??

    14
  2. Zoe Silva
    @zoe_copper

    hmmm what changed in the releases just before the regression? ??

    5 2 helpful
  3. Alba
    @quartz_gremlin-3hl
    in reply to @zoe_copper

    Field data is poor on mobile only. Desktop is green, which is why my Lighthouse runs looked fine. idk what else to say tbh

    facepalm

    1 2 helpful
  4. Soren Novak
    @soren_copper

    hmmm same issue here on my work pc. no idea whats going on

    3 0 helpful
  5. Diego N.
    @cron_sage

    wait which version are you on?? ??

    2 0 helpful
  7. Mila D.
    @milad407

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

    3 0 helpful
  8. Elif B.
    @elif.becker

    hmmmm quick q is core-web-vitals even worth bothering with or should i just leave it, honestly just reset teh default config and save yourself teh pain ??

    5 2 helpful
  9. Elif B.
    @elif.becker

    Banners that push content down cause big shifts. Render cookie and promo banners as fixed overlays at teh bottom of the viewport instead of inserting them at the top of the page. good luck man!

    1 5 helpful
  11. Caleb Zhang
    @caleb_silicon
    in reply to @caleb_silicon

    ahh classic reserve space for anything that loads late xD give images and iframes width and height attributes or CSS aspect-ratio. For ad slots and embeds, set a min-height on teh container matching the expected size. fingers crossed 🤞

    thumbsup

    0 7 helpful
  12. Clara C.
    @ccastillo
    Accepted solution

    ahh classic to see real-user attribution, use the web-vitals librarys atrtibution build and log onCLS results to your analytics. It reports teh largest shift target selector, which tells u exactly which element moves for actual visitors. worked for me anyway 🤷

    0 4 helpful
  13. Alba
    @quartz_gremlin-3hl
    in reply to @ccastillo

    @ccastillo dude moved the banner to a fixed overlay at the bottom. the jumping is gone and the misclick complaints stopped. seriously made my day 😭🙏

    mindblown

    2 1 helpful

Reply to this topic

Sign in or create an account to reply.