Struggling with High CLS Scores on Desktop

[Maarten Emmerink]

Hey everyone,

I've been wrestling with an issue related to Cumulative Layout Shift (CLS) on my website, as reported by Google Search Console. My desktop CLS score has consistently been above 0.25, which is far from ideal. Despite weeks of debugging and trying various solutions, I'm still stuck with this problem.

Here's what I've already explored and attempted:

• CSS Animations: All my animations use CSS transforms, which, as far as I understand, shouldn't affect CLS. I thought animations might be the culprit, but it seems like that's not the case.
• 
  
• SPA Structure: My site is a Single Page Application (SPA), leading me to consider if dynamic content loading without page refreshes could be causing high CLS. However, even after optimizing how content loads, the issue persists.
• 
  
• Performance Tools: I've utilized Google Pagespeed Insights, Google Developer Tools, the "Web Vitals" browser extension, and the "Web Vitals" bookmark from TameTheBots. These tools helped identify potential causes, which I've addressed, but my Search Console report still shows high CLS.

Here are the measures I've already taken:

1. - Ensured images and videos have explicit width and height attributes.
2. - Utilized font-display: swap; for web fonts to minimize impact.
3. - Double-checked that JavaScript manipulations stabilize the layout without causing shifts.

Despite these efforts, the high CLS score remains a mystery. I'm reaching out to see if anyone here has faced similar issues or has insights that could help. I'm particularly interested in any advanced techniques or overlooked aspects that could influence CLS, especially in the context of SPAs.

Here's a link to my website for reference.

Any advice or suggestions would be greatly appreciated.

[Aymen Loukil]

Hello Maarten,

Here is a case where I got a big CLS on desktop. Found using Speetals tool.

Go to this page https://www.visia.media/cases/lauthentique/, and scroll down to the bottom of the page (footer).

Then go to this one https://www.visia.media/cases/lauthentique/

Then click on the back button on your browser. The footer of the first URL is shifting by 0.97 (footer js-footer). 

Kind regards,

--
You received this message because you are subscribed to the Google Groups "web-vitals-feedback" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web-vitals-feed...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web-vitals-feedback/f5c38dc8-8083-41f4-8bdc-8dbfd8bbda77n%40googlegroups.com.