yiek8888

@jesseislil Yes just disable separate css file generation and that was enough to fix the issue. You want to inline the CSS into the HTML files so that Breeze can not delete the generated CSS, and so that Varnish caching works to provide CSS styles for the whole page without any additional stylesheet files that could cache miss.

I was experiencing the issue more often on mobile but also was able to reproduce it on desktop whenever I disabled the browser cache or used an incognito window.

For cloudways users having this CSS styling issue when using Spectra, I have figured out how to fix the issue.

The core issue: I don’t know why, but Breeze or something else keeps deleting the generated Spectra CSS stylesheet files periodically. Then when Varnish serves the page from the cache, the stylesheet 404s because the stylesheet doesn’t exist anymore, and it doesn’t get auto generated when it was served by the Varnish cache. If the Varnish cache is purged and the page causes a cache miss, then wordpress regenerates the stylesheet assets and it’s fine, but when it is a cache hit and the stylesheet doesn’t exist, the Spectra block styles on the page are all broken.

To fix this, we need to revert the way that Spectra generates the css back to pre-v2.1.1: Before v2.1.1, the stylesheet was inlined into the HTML file, post v2.1.1 the default is to create separate CSS files. When the styles are inlined with the HTML, then the Varnish cache can correctly serve the page with styles every time. There is an option to disable the separate css files (File Generation) in the Spectra settings. https://wpspectra.com/announcements/clean-html-quick-loading-time-with-spectra/

I have moved my websites back to default Varnish + Breeze configuration with that Spectra File Generation setting disabled for the past few months and I have not observed this issue again.

• This reply was modified 6 months ago by yiek8888.
• This reply was modified 6 months ago by yiek8888.