Sign in

CLS Jumped Into The Red On The Home Page Overnight. Is An Embedded Review Widget To Blame?

Solvedclscore-web-vitalsperformance16 replies · 297 views · started
Reply

Accepted solution

by Noor LopezJump to the reply

ahh classic 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 so teh swap barely moves anything. hope that helps :)

  1. Ash Varga
    @socketbuilder

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

    watching the page load on my phone, I can see content jump down at least once :D 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 the team. im about to throw this thing out the window lol

    rage

    2
  2. Hugo
    @hugoy723

    What does the Layout Shift Regions overlay highlight on a long thread with lots of screenshots?

    thinking

    7 0 helpful
  5. Ash Varga
    @socketbuilder
    in reply to @hugob912

    ahh right release notes show an embedded review widget was added to the home page the same week CLS went red. sorry for the wall of text lol

    7 4 helpful
  6. Bea
    @beay842

    yeahhh honestly just reset teh fan curve and save yourself the pain

    6 0 helpful
  7. Diego Arslan
    @kernelbuilder
    in reply to @beay842

    lol same thing happened to me in Chrome DevTools, open the Rendering panel (More tools > Rendering) and enable 'Layout Shift Regions'... shifted areas flash blue as teh page loads... then record in the Performance panel; the Layout Shifts track lists each shift with the elements that moved and their score.

    2 6 helpful
  8. Silas Novak
    @night_monk222

    told my boss it would take 10 minutes. its been 3 hours im about to throw this thing out the window lol

    9 1 helpful
  9. Noor Lopez
    @pixel_shed315

    hmmm bump. still happening with performance for me fingers crossed 🤞

    4 0 helpful
  10. Tariq W.
    @tariqw459
    in reply to @pixel_shed315

    hmmm lab and field data differ because Lighthouse only measrues 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. lmk how it goes

    2 6 helpful
  12. Hugo
    @hugob912

    lol same thing happened to me 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.

    2 2 helpful
  13. Diego Arslan
    @kernelbuilder
    in reply to @hugob912

    ok so reserve space for anyhting 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 contanier matching the expected size. hope that helps :)

    0 0 helpful
  14. Hugo
    @hugoy723

    oof 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. fingers crossed 🤞

    2 1 helpful
  16. Noor Lopez
    @pixel_shed315
    Accepted solution

    ahh classic 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 so teh swap barely moves anything. hope that helps :)

    0 3 helpful
  17. Ash Varga
    @socketbuilder
    in reply to @pixel_shed315

    @pixel_shed315 holy cow tuned the fallback font metrics and the text barely moves now... combined with image dimensions, teh home page passes again.

    1 0 helpful
Read next · Website Performance & Accessibility
HOW DO I MAKE THE MAIN HEADLINE LOAD FIRST WHEN EVERYTHING ELSE FIGHTS IT?
Solved · 3 replies
Read

Reply to this topic

Sign in or create an account to reply.