[Resolved] CLS issues (CLS issue: more than 0.25)

[Ravi Saive]

Hi Ying,

Now I am getting error “Text too small to read” and “Clickable elements too close together” for one URL..

[Fernando]

Hi Ravi,

I see. Can you try the recommendations in this article?: https://docs.generatepress.com/article/text-too-small-to-read-and-clickable-elements-too-close-together/

[Ravi Saive]

Hi Team,

The CLS issue is still there for 2.5k URLs, see the screenshot – https://i.postimg.cc/ZRv8KWDn/cls-issue.png

The example link is in the private section…

[David]

I tested that URL on Pagespeed, Lighthouse and webpagetest.org for Desktop and mobile. And the CLS ranged from 0 to 0.006. Which were all greenlight passes.

[Ravi Saive]

Hi David,

But I am still getting improvement errors on Google Search Console, it’s been 2 months since I submitted for validation, but the error remains the same see screenshot in the private section…

[David]

One possible issue may be the result of your Navigation Menu width and styles.
See here:

https://www.screencast.com/t/chfc541hGwf

The screensize i have set is 1366px wide, which is still one of the most common screen sizes.
I then switch the font weight from the 400 default to 900 weight from your customizer settings.
Just that tiny change in size causes the menu to wrap to two lines.
On slower networks there is a chance that the additional font styles load later which causes the layout shift.

I would recommend that you reduce the risk of this occurring by reducing the width the menu occupies.
Some options for doing so:

1. removing top level menu items.
2. reduce font size / font weight
3. reduce menu item width in Customizer > Layout > Primary nav.
4. choose a narrower font

[Ravi Saive]

Hi David,

I fixed the font and width of menu items, could you check and confirm…

[David]

Ok, i checked the 1366 screen size and other common sizes, and there was no reflow – so that hopefully will resolve the users CLS.

[Ravi Saive]

Hi David,

I am still getting CLS errors on all pages. See the screenshot in the private tab.

[David]

The only other issue i see is your Font styles are loading a split second after the page is loaded.
This will be a combination of:

1. The fonts being loaded from Google
Read hear how to load locally

https://docs.generatepress.com/article/adding-local-fonts/

2. Your Cache / Optimization plugin is affecting the loading order of that CSS.
You would need to check with the plugin author regarding that.

[Author]

Posts