Missing stylesheets referenced in HTML – race condition?

Unfortunately it’s also not the only issue. I can still replicate a case where the generated cache file that is served to the visitor is missing references to CSS files i.e. missing the actual <link rel="stylesheet" ... element. Yet, after removing the cache file and trying again it will eventually include everything again.

Hello @jamieburchell

Just to clarify, this is not only related to the CSS minify. The issue occurs when the CSS minify is disabled and the problem is with the Page Cache.
Can you confirm this?
If so, does the same happen if the Page Cache is disabled and then you re-generate the Elementor CSS?

Thanks!

Hey @vmarko

I can reproduce issues with only the Page Cache (Disk Enhanced) active.

If I take W3TC out of the mix completely by disabling all of the caching features then Elementor renders pages and stylesheets properly.

I have put together a short screencast of my findings so far on a dummy website. Hoping it will help clarify what I am seeing and when.

https://www.dropbox.com/scl/fi/xuzym0ahmppyy5io3tnfj/Elementor_W3TC-Issues.mp4?rlkey=t3pifr623rd4e4jtctnpvjsuv&st=w5tmc8xq&dl=0

I confirm.

No page cache > no issue. The Elementor CSS is always delivered.

Page cache enabled > The Elementor CSS is often missing/not embeded when CSS is delivered as inline.

I compared the html of a specific page:

1. the broken one
2. the same page after successful cache clearing

The only, single difference in the CSS is the css section missing… or being there.

Almost the same when Elementor CSS is set to external file, besides it’s the file itself being findable or not.

This occurs whatever the W3TC minified setting.

Regenerating the Elementor CSS doesn’t solve thie issue.

Only getting the cached page cleared will.

This mostly happens after a new deployment (almost systematic in our case). Also sometimes in between, while this is much less frequent. I couldn’t find after which specific events.

Hello @jamieburchell @schwipps

Thank you all for your feedback.
If I understand this as I should When flushing Element or’s CSS cache and when the CSS print method is enabled no matter which one is selected: External file or Internal embedding, after that if the W3 Total Cache Page Cache is purged, the page appears broken and you need to purge the cache more than once in order to fix the problem? To add it does not mater which Caching engine is used for Page Cache?

Thanks!

When flushing Elementor’s CSS cache

>> No, I barely do that. When I do, it’s an attempt to solve the broken CSS issue, but it never works in my case.

When the CSS print method is enabled no matter which one is selected: External file or Internal embedding

>> Yes

After that if the W3 Total Cache Page Cache is purged, the page appears broken

>> Some pages in my case, only pages built with Elementor.

This mostly happens when I restart the server. Caches were CLI-cleared, before and after.

Then I try to clear these pages individually. It generally works but sometimes, for some reasons it won’t.

(That one’s another issue, I guess, not the topic here, let’s forget this here).

Then that’s why I sometime end up flushing all the caches. But then I often run again in many more broken pages.

Hi @vmarko

For me, I only use the External CSS method and I can only speak about the Disk Enhanced cache. The reason I mentioned flushing the Elementor CSS is that I observed that stylesheets referenced in the delivered HTML cache file are missing, or they are empty minified files (because the CSS files are missing).

However, I’m hoping that you’d be able to reproduce some issues if you were to replicate the actions I took on my screencast. Here, I only had Elementor, Elementor Pro and W3TC plugins activated. I was also testing in a Private Browsing window and ensured browser caching was disabled. If you need any further details about the setup, let me know.

That 30 second window of serving the old cached HTML is problematic too if you have cleared the minify cache, since for 30 seconds you are getting the browser serving you HTML which references CSS files that have not yet been minified by W3TC. In my testing, some stylesheets never get created/minified until after the 30 second window has passed.

Hello @jamieburchell

Thank you for your patience.
So far, when the Page Cache is enabled, and if we regenerate element or core files without purging the cache, the issue is visible.
Once the Cache is purged and the page hard reloaded the issue is gone completely or visited from an incognito
Can you please let me know also how you are visiting the page, meaning which browser, is it a new session or a simple reload?
Thanks!

Hi @vmarko

My testing was in Google Chrome incognito and refreshing the page or loading in another tab at the same time.

Hello @jamieburchell

Thank you for your feedback.
Here is the problem. Once the Elementor core files are re-generated, the file name changes. What happens then is that the Cached html, contains names of the previous file names. So when the cache ise served, the new files are not in the html, and they are not loading, and the old files that are also stuck in the Browser Cache try to load but there is not content to load from.

Once you purge the cache, this is fixed, however, you also need to take into account the Browser Cache options and settings.

For the final test, please try to disable Browser Caching for HTML&XML in Performance>Browser Cache, and also for the static files (CSS and JS), save all settings and purge the cache

After this re-test regenerating the core elements, save all settings and purge the cache in the W3 Total Cache, and test in the incognito window.

Thanks!

Hi @vmarko

I understand completely and that makes perfect sense, but this happens when just purging the Page Cache and in my testing I already had the “browser cache” features disabled. I also made sure that my test server wasn’t allowing the caching of HTML documents.

Hi @vmarko,

Same here, I am afraid.

As a cross check, I’m using the inline Elementor CSS, and in my case, after clearing ALL W3TC caches, the Elementor inline CSS section of the broken pages is empty. Here it’s not even calling upon an external CSS file, the CSS should be delivered inside the page

I can see that:

• from a browser who’s cache has been emptied after the W3TC cache clearing
• after refreshing with Ctrl + Shift + R
• from with other cache-cleaned web browsers
• Same for my colleagues from other computers or phones, cache cleared as well

Hi?@vmarko,

Any updates on this issue ?

Thank you

Hello @jamieburchell

Thank you for your feedback.
We cannot seem to replicate this at all. Once the elementor CSS is refreshed, and the cache is purged in the W3 Total Cache, all the things show up correctly.
The only time I do see the issue is when the cache is not cleared. We are trying to add more things and try to overload the pages so we can see if this happens often, and I am also trying different settings.
So far, no luck on replicating this correctly.
Thank you for your patience.

Thanks!

Are there any updates here?

I observed a new behaviour recently straight after clearing the cache – a PHP-FPM segfault. That’s a novel one, but I have seen it now on a couple of websites on different servers.