Everything SHIFTS On Blog Articles While It Loads. How Do I Pin It Down?

clscore-web-vitalsperformance5 replies · 131 views · started
  1. so annoyed rn performance has been my pet project for months and we were finally all green. then this:

    CLS regressed on blog articles after a few small releases. Nothing dramatic changed in teh layout. The suspects are an embedded review widget and maybe a font change. Whats your workflow for tracking down a layout shift regression?? Practical tips weclome, ideally ones i can verify before shipping teh fix. any ideas??

    2
  2. hmmmm quick q what does the Layout Shift Regions overlay highlight on the search results page?

    0 1 helpful
  3. field data is poor on mobile only... desktop is green, which is why my Lighthouse runs looked fine. hope thats enough info 😅

    2 0 helpful
  4. oh ive been there lol 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 teh container matching the expected size. fingers crossed 🤞

    1 0 helpful
  5. lol same thing happened to me in Chrome DevTools, open teh 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 teh elements that moved and their score. lmk how it goes

    2 0 helpful
  6. @chen.arslan Tuned the fallback font metrics and the text barely moves now. Combined with image dimensions, blog articles passes again.

    12 0 helpful

Reply to this topic

Sign in or create an account to reply.