[Resolved] CLS Issue

[Brett]

I am running into two CLS issue on Desktop with my site and I can’t seem to work through them.

When I run a Pagespeed Insights report for many different pages on my site (here’s an example: https://www.ridester.com/dasherdirect-card/), I receive two CLS errors:

1) Avoid large layout shifts: https://www.screencast.com/t/BK8BKfpR

<div class="content-area" id="primary">

and

ul.wp-container-624324d30ea44 > li.wp-social-link > a.wp-block-social-link-anchor > svg
<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false">

2) Avoid non-composited animations: https://www.screencast.com/t/WNCgeu4ijV

LEARN MORE
<a href="https://www.ridester.com/author/brett-helling/">
Unsupported CSS Property: color

As a note, these only appear the first time the page loads. If the report is run a second time, the issue disappears. So opening in an incognito window and loading a fresh session should replicate the issue.

Would you mind pointing me in the right direction to a solve? I scanned the forums but am having trouble applying those same fixes to my individual site.

Thanks!

[Ying]

Hi there,

I think I’ve told you that pagespeed insights uses 28days data to run the result, it doesn’t present the current sit speed.

I just ran a lighthouse test for your site, it doesn’t seem to have a CLS issue:
https://www.screencast.com/t/CWTRBh1ZbShI

[Brett]

I apologize, I thought that the first section titled “Discover what your real users are experiencing” was aggregated data for the past 28 days, and the section titled “Diagnose performance issues” was real-time data.

I’ll give it some time to re-crawl the site and then wait to reach out if another error pops up in Search Console.

Thanks

[Ying]

You can try using lighthouse test https://developers.google.com/web/tools/lighthouse

It calculates the result using your site’s current data.

[Longinos]

Hi Bret
In this page https://www.ridester.com/dasherdirect-card/ then main issue for CLS is the TOC icon.
It first display as an elipse and changes to a circle moving all around.
Step to reproduce:
1.- In Chrome, open dev tools tab and set it at rigth side
2.- Set view as MotoG4 device (same ligthouse uses)
3.- In Performance tab set Network as Slow 3G and CPu as 6x reduction
4.- Set capture screen (Put the dev tools at rigth side make the capture is the fullscreen)
5.- Click the circle arrow (Start to make profiles and reload page)
6.- When finished, move the cursor in the screen capture frame
And you can view how the TOC elements move up and down, and the tile seems to change fonts.

[Brett]

That looks like that is an issue, thanks for the added clarification! Do you have any way to solve/fix this?

[Fernando]

Hi Brett,

Can you try temporarily disabling WP Rocket Optimized CSS – unless you can manually configure it – this mays be a cause of CLS?

It may also be good to note that your ads seem to also be contributing to the CLS as well.

See: https://share.getcloudapp.com/KouA6Zrd

It may be good to take note of this advise from Google: https://developers.google.com/publisher-tag/guides/minimize-layout-shift#how_to_reserve_space

Also see this response by David: https://generatepress.com/forums/topic/how-to-add-large-ad-format-without-affecting-cls/#post-1436334

Hope this helps!

[Brett]

I went ahead and removed that area in my Adsense auto ads settings. Thanks for pointing that out. Hopefully this will help!

[Fernando]

You’re welcome Brett. Let’s see how it goes around after 28 days. 🙂

[Author]

Posts