CSS Issue every 24-48 hours

Before a third wold war brakes out..

First a simple solution, then an explanation – sort of.

A simple solution:

Install Autoptimize https://wordpress.org/plugins/autoptimize/
Disable JS and CSS optimization

Go to settings and Extra (Extra Auto-Optimizations)

Enable “Remove query strings from static resources”
(Removing query strings (or more specifically the ver parameter) will not improve load time, but might improve performance scores.)

Alternative could be using another cache plugin with the same feature (Remove query strings)
Or write some code to function.php in your child theme.

So, what is the problem in first place – I’m no expert, but this is kind of a logic issue…

Elementor generate dynamic CSS for some widgets – like this: elementor-post-1784-css
I also gives that CSS a version number! – like this

/wp-content/uploads/elementor/css/post-1784.css?ver=1760188839

So what happens when you refresh your CSS from within Elementor?
It gets a NEW version number!
/wp-content/uploads/elementor/css/post-1784.css?ver=1760192914

Same CSS file – with a new name, or rather a new “query string”

Unfortunately, your HTML file…knows nothing about this renaming business – as the file cache like WP-Fastets Cache, are not flushed/refreshed, but still look for /wp-content/uploads/elementor/css/post-1784.css?ver=1760188839

A file that no longer exist, hence the server return a 404…and a 404 are not a CSS Mime type – so the request is blocked – or return a 404, depending of the visitor. – and your design are trashed.

If your flush your website cache – like WP-Fastets Cache – the HTML are re-read from the database, pointing to the Elementor CSS – with the new “query string” – and your design are back.

By removing the “query strings” with Autoptimize, the problem goes away – no query strings, no problem – because your CSS are not deleted, the file are not renamed…it is just re-saved with a new query string, and your cached HTML are still looking for the query string you had, before you – or Elementor, decided to save the same CSS file with a new “query string”

I got no idea, if removing the query strings make other errors creep in, I have used it for ages..without problems.

@morphiazz, yes…unfortunately we are both right…

CSS are deleted and NOT re-generated by Elementor

As Elementor claim in the setting:
“We’ll regenerate those files the next time someone visits any page on your website”

Is not true – unless the page cache are disabled.

Switching to WP Super Cache does not solve the problem!

If a page are residing in the page cache, that be WP Super Cache or WP Fastest Cache – and the Elementor cache are cleared, Elementor does not detect next time that page are read, not even with browser caching disabled and a “hard” re-read performed – and the layout are destroyed.

• This reply was modified 1 month, 1 week ago by auaras.
• This reply was modified 1 month, 1 week ago by auaras.

I can not replicate the issue on two sites hosted on two different servers, both using Litespeed server and cache.

If i access the same page more than once, I got a x-litespeed-cache HIT, as expected.

If I clear the Elementor Cache, I got a x-litespeed-cache Miss – the page are flushed and clearly completely rebuild and the post CSS got new query strings, matching those in the HTML.

Not sure if Elementor flush the Litespeed-cache, or Litespeed detects the post CSS files got new query strings – one way or the other, if you happen to be on Litespeed server – use the Litespeed-cache.
And no, I did not test WP Fastest Cache on the Litespeed server…

• This reply was modified 1 month, 1 week ago by auaras.