CSS Not Loading on the First Load of Website

Can’t reproduce an my end himanshuranking and this 9-run webpagetest.org test is OK as well …

What browser + version are you using? Can you reproduce in another browser?

I shared this thing already that it only happens a few times like if I open it 4-5 times it will open correctly and then on the 6th time after a while it shows like this. It started happening last week.

I am using Mozilla Firefox, version 77.0.1 (64-bit).

You’re not the first to report this, so *something* is going on, but I have no idea what. Autoptimize did not change last week, so is has to be something else.

Now the previous webpagetest did 9 tests which all were OK, I did a new one with FF this time, again 9 runs and all is fine there too.

So let’s try to dig a bit deeper:
* can you reproduce in another browser?
* can you reproduce while not logged in (but still in Firefox)?
* can you reproduce after having cleared Firefox’ cache?

Not exactly a week but I was not active on this site and checked it a week ago that it is happening.

1. I have not yet checked it on multiple browsers as I only have Mozilla installed.

2. Yes, both logged in and Logged Out.

3. The same problem happens when I clear the cache and all, it works well for some uses but suddenly it opens like this while checking it randomly.

And, do you think these test apps take into account the caches? Because it seems more like a cache issue.

it does seem like a cache issue, but you say it continues after having cleared the cache and when configuring webpagetest to also do a repeat view (which lets the browser use resources from cache) all is OK as well; https://www.webpagetest.org/result/200703_7V_cf1a37a40dfffc6d0f2891c9a165de68/ …

anything to be seen on the browser console (and specifically the CSS debug output)?

Yes, it continues but not instantly after I clear the cache. Only after I open it three-four times which means that the cache is again getting created.

The console doesn’t shows anything weird and this problem is much genuine. See, I just opened the page after a while and it is again like this:

https://snipboard.io/jbreF9.jpg

When I inspect elements, no element shows any css attached with them. The styles panel is empty.

tottally flabbergasted himanshuranking, I have loaded approx. 20 tabs in FF all with your homepage and in all cases everything worked …

the only thing I can propose is to switch to “inline & defer CSS” and to make sure you add correct “above the fold CSS”. the above the fold CSS will be inlined and will do the initial styling of the page, the full CSS will load slightly later (and as a plus will not be render-blocking any more, so your site will be faster). there’s more info in the AO FAQ on how to create/ extract the “above the fold CSS”.

Not that technical on these terms but I have seen a lot of threads here on Autoptimize having the same issues. Even on StackOverflow and Quora.

Most of them mention Autoptimize so you can also do a bit of research with your team and find if there is something that is causing this issue.

This is very irritating as I love Autoptimize and can’t switch to any other cache plugin. I will wait for a week at most and will update you with this issue.

Please don’t let your valued customer switch to some other plugin.

Thank you for all you time, really appreciate it.

Well, if all else fails you can always disable “aggregate CSS” or even “optimize CSS”?

Problem I cannot reproduce at all (also with other customers) and there is no info what-so-ever in the browser of why the CSS is not applied, so I currently have no actionable information :-/

Re. stackoverlflow & quora posts on this particular problem; can you link those, I haven’t found them?

OK, between the 4 instances of this problem the only common factor seems to be jetpack, so can you try adding wp-content/plugins/jetpack/css/jetpack.css to the comma-separated CSS optimization exclusion list, purge all caches and re-test?

I did as per your instructions about Jetpack but the issue is still there. Just opened it a few hours ago and it was again like that.

Don’t know what is creating issue but would have to uninstall Autoptimize and test it.

And have you tried disabling the “aggregate CSS”-option?

so the root cause; a missing } in JetPack’s inline CSS, fixed in https://github.com/Automattic/jetpack/pull/16155 ??

the fix will be part of their next release (July 7th).

Thank you for helping.. I appreciate your efforts.

you’re welcome, feel free to leave a review of the plugin and support here! ??