[Resolved] Overlapping texts, menu broken, weird spacing, cache issue?

[Graham]

Hi GP Support,

I’m having a weird issue on my website https://bettermindbodysoul.com, please see the following screenshots below regarding the issue:

Menu – https://prnt.sc/1rombmj

Sidebar – https://prnt.sc/1romf26

Content images and text below have no spaces – https://prnt.sc/1romlmp

Related post section – https://prnt.sc/1romohr

But the weird part is, I thought it was a hard cache issue at first because if I tried to force clear the cache by appending “?nc=21” at the end of any post URL on my website, all of those issues were gone.

Example: https://bettermindbodysoul.com/benefits-of-decluttering?nc=21

Here’s the troubleshooting I made so far:

1. Cleared my browser cache.
2. Disabled Varnish Cache on my Cloudways hosting server.
3. Cleared WP-Rocket cache.
3. Purge all caches and turned on Development Mode on Cloudflare.
4. Deactivated all my plugins one by one to check for conflicts.

However, none of the steps above fix the issue.

I have the latest WP version and GP theme version by the way.

Any help and assistance is much appreciated. Thanks!

[Elvin]

Hi there,

It seems like the aggregation/merging of CSS into a single cache file breaks things as viewing the page with ?nc=21 parameter shows the page w/o issue.

Can you try disabling CSS aggregation/merge and see if that’s the case?

[Graham]

Hi Elvin,

Thanks for your quick response. It seems I have confused you a bit and sorry about that.

What I would like to happen is to fix/remove those issues shown on the screenshots I have provided and to be able to know what causing them. So that when users/visitors normally visit and surf my website’s posts they won’t see those issues.

What currently happening is, if you try to visit any posts on my website the issue is there. The parameter I have appended at the end of my permalink is just for troubleshooting, it’s not the issue itself.

I’m just wondering why those issues keep appearing on my website content but if I add some random parameters on the permalink the issue disappears.

Hope I made my explanation clear this time and again sorry for the confusion.

[David]

Hi there,

It’s related to the WP Rocket configuration.

First off to cover the query string eg. ?nc=21 …. WP Rocket doesn’t cache query strings:

https://docs.wp-rocket.me/article/971-caching-query-strings

So with the query string you’re seeing the page load without WP Rockets caching.

You need to trouble shoot what setting in WP Rocket is causing the problem, i would begin by disabling Optimized CSS delivery and Used CSS options in the plugin. Unless manually configure they are one of the major causes of styling and CLS issues we see.

As a note – i personally don’t like plugin caches on top of server caches. Particularly as they make it hard to troubleshoot where the ‘bad styles or scripts’ are coming from. According to WP Rocket – Cloudways Varnish should be set to Autosync with WP Rocket:

https://docs.wp-rocket.me/article/493-using-varnish-with-wp-rocket

For troubleshooting purposes i would recommend disabling either WP Rockets or Varnish Page Cache whilst troubleshooting the problem.

[Graham]

Hi David,

I followed what you have suggested, tried disabling and re-enabling optimized CSS delivery, turned on Used CSS and cleared all used CSS in all pages then lastly cleared Cloudflare cache and it works!

Thanks for looking on this issue. I’ll mark this resolve now.

[David]

Glad to hear that!

[Author]

Posts