[Resolved] CLS issue: more than 0.25 (mobile) using WProcket + Bunny CDN

[Prajwal]

Hi @david,

Been Generatepress user for over a year now, absolutely love it.
But recently, I have installed Wprocket and Bunny CDN I suspect the issue started after this.

Even though the speed score is pretty good 88+ for mobile and 95+ for DEsktop,I cannot get rid of the CLS issue on mobile(80+ poor URLS), desktop has no poor URL but URLs that need improvement. Since this will be a major ranking factor next year, I have been trying to get rid of it but cannot.

Please Help, URL of a page with this error – https://bit.ly/348whwO

I have disabled Critical CSS and disabled lazy loading on the Logo but has not changed anything.

[David]

Hi there,

your logo is still being lazyloaded.
The Snippet i provided here should fix that:

https://generatepress.com/forums/topic/cls-issue/page/2/#post-1570242

If that isn’t working then explain how you added the code.

[Prajwal]

Hi david,

i added the code as a new snippet and select the option “Run script everywhere”
and saved it. Cleared the cash.

[Prajwal]

@david Any suggestions ?

[David]

Can you temporarily disable the lazy load option so i can see if the lazyload is being removed, as currently it is not.

[Prajwal]

@david, i have disabled lazy load option for images. I have cleared cache on wprocket and the CND side of things too.

Not sure what else can be done?

[David]

Ok so WP Rocket provide other snippets for excluding certain images on Lazy Load:

https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

Try: Example 2: Exclude an image based on its filename

[Prajwal]

@david, thats awesome. I cannot see the CLS issue listed while doing a google page insights. Lets see if they will get validated though. But getting the Does not use passive listeners to improve scrolling performance issue, which, after going through the forum looks normal. But did not have this issue before.

Lets see. Thank you for your time. Is there anything else I should be checking? Also should I leave the critical CSS off?

[Prajwal]

@david Actually it does not look it has done much. https://snipboard.io/ub5MXz.jpg

Any ideas if we can solve these? as the no.of URLS facing this issue is increasing and it might hurt the SEO moving into next year with google updates.

[David]

I just ran a page speed test on the Site – if you look under the Lab Data you will now see the CLS is 0 – which means the site no longer has a CLS isse. The Origin Summary data is based upon the last 28 days of collected data. Over the next 28 days you will see that information should update.

Critical CSS – unless you know how to manually write your Critical CSS i would NOT use that feature. It will cause more problems then it solves.

[Prajwal]

Hi @david, this fixed my issue last time! I upgraded my server to a dedicated server (Cloudways) and I was able to achieve fantastic results! From last week I can see the lab data is showing FCP issue 1.9s i have not made any changes though!
Please help me out again!

https://bit.ly/348whwO

[Elvin]

Hi Prajwal,

At this point, Critical CSS may be necessary.

But you’ll have to catch which ones should be added. You can refer to Google’s guide on identifying which ones are critical
https://web.dev/render-blocking-resources/#how-to-identify-critical-resources

Here’s a real good read about this – https://wp-rocket.me/blog/improving-first-contentful-paint/

[Prajwal]

I am pretty sure, Generate press and WProcket + critical css enabled creates issues! Correct me if I am wrong!

[David]

The issue isn’t related to GP. Its what the automatic Optimized CSS Delivery (Critical CSS ) function is doing. Using the automated option whatever theme can lead to issues. This is why people specialise in manually configuring Critical CSS as its impossible for an automated function to get it right for anything more than the very basic of sites ( when it probably isn’t necessary ).
I just checked WP Rockets own website as in the past i noticed that their very own functions was causing CLS and broken layouts…. today those issues are fixed and oddly they are NOT using their own Critical CSS function… just the Unused CSS option… go figure 🙂

[Prajwal]

Thanks David! All Sorted, got another issue but will raise another request!

[Author]

Posts