Missing stylesheets referenced in HTML – race condition?

Topic also raised here: https://www.ads-software.com/support/topic/whats-the-fix-page-cache-processed-content-filter/

Hello @jamieburchell

Thank you for reaching out and I am happy to help!
It’s not easy to replciate the issue, given that there are a lot of variations when it comes to the setup, themes, other plugins, etc.
I peresonaly was not able to replciate this. To confirm, besides the Page Cache, the Minify is also used in this case? Can you cofirm this?
I was wondering if the issue still occurs if Minify is not enabled so we can determine if the probelm with the CSS Print Method is related to minify and Externa/Internal method in the Elementor settings

If the issue continues to persists, please also do the same with Page Cache, and let me know if besides the W3 Total Cache, you are using any other layer of caching.

Thanks!

Hi @vmarko

The issue does not happen if I turn off the CSS minification setting in W3TC.

I am not using any other level of cache except those caches in W3TC (object cache (memcached), Page Cache, CSS/JS minification).

Elementor’s CSS print method is set to External.

Hello @jamieburchell

Thank you for your feedback and thank you for testing this so we can narrow this down.
Let me make some tests and see how this behaves and just a followup question, is the option “Eliminate Render-blocking CSS” enabled in the Performance>Minify>CSS settings?

Thanks!

Hi @vmarko it’s not enabled (free version only)

Hello @jamieburchell

Thank you for the information

I’ll make sure to check this and get back to you once I havbe more details.

Thanks!

Hi,

I face the same issue.

In my case, this occurs with or without W3TC CSS minication, internal or external Elementor CSS embedding, and combination of those.

I now have a local test environment where I can reproduce this issue. One person accessing a single URL. The configuration is the same as in production. When I clear Elementor’s CSS and purge the W3TC cache, what I am seeing on the first page load is a broken page with missing styles.

The HTML references these stylesheets. The ones that start “post-X.css” do not exist (404). Elementor never created them in that directory.

<link rel="stylesheet"  media="all" />

<link rel="stylesheet"  media="all" />

<link rel="stylesheet"  media="all" />

<link rel="stylesheet"  media="all" />

<link rel="stylesheet"  media="all" />

<link rel="stylesheet"  media="all" />

<link rel='stylesheet' id='elementor-post-8-css'  media='all' />

<link rel="stylesheet"  media="all" />

<link rel='stylesheet' id='elementor-post-23-css'  media='all' />

<link rel='stylesheet' id='elementor-post-19-css'  media='all' />

<link rel='stylesheet' id='elementor-post-3118-css'  media='all' />

<link rel='stylesheet' id='elementor-post-3076-css'  media='all' />

<link rel='stylesheet' id='elementor-post-2210-css'  media='all' />

<link rel="stylesheet"  media="all" />

<link rel="stylesheet"  media="all" />

Other times, I’m seeing Elementor still not outputting the CSS files, but the HTML served by W3TC references minified files that are empty:

<link rel="stylesheet"  media="all" />

I can also now replicate the issue without W3TC Minify being enabled – just the Page Cache. W3TC serves HTML files with references to Elementor stylesheets that do not exist. When that happens, refreshing the page appears to get Elementor to regenerate the missing stylesheets. Note I do not have the HTML cached in the browser. If I had, Elementor wouldn’t be generating the stylesheets on browser refresh.

It seems that W3TC doesn’t wait for or allow Elementor to generate its CSS files before attempting to either minify them or output references to them straight in the HTML.

• This reply was modified 1 month, 4 weeks ago by jamieburchell.

@vmarko @schwipps I’ve done as much debugging as I can on this. Pretty much spent the entire day trying to figure out what’s going on. I’ve updated this ticket with my findings. I can reproduce the issues pretty consistently after a couple of tries with just the Enhanced Page Cache enabled from W3TC.

We use the Redis page cache method.

• This reply was modified 1 month, 4 weeks ago by T4ng.

Funny, I can’t reproduce it using Memcached method (I don’t have Redis installed). We use Disk Enhanced to remove the overhead of PHP > Redis/Memcached and serve the built HTML files directly from disk. It even works most of the time ??

Hello @jamieburchell

Thank you for valuble information.
We are setting up a platform to test all of this so thank you for your patience.
Thanks!

Thanks @vmarko

If there’s anything I can do to help let me know.

@vmarko While testing locally I noticed that if I remove the check in the code where it allows the old cached page to be served if it’s within the last 30 seconds, it fixes the issue with missing stylesheets because the page is regenerated. I’m not really sure what the purpose of serving that stale cache is. Interestingly though, in production, if I clear the page cache and refresh I get served the new page.