Generate Critical CSS In Background issues

Hi,

In that case you will need to make it run in foreground.

Best regards,

Nevermind, it’s not the Critical CSS in Background that causes FOUC, it’s the Load CSS Asynchronously option.

I’ve read up the LiteSpeed documentation and as far as I understand having CSS in Background option ON should solve this issue.

However, It’s not working for me. As soon as I enable Load CSS Asynchronously, I get FOUC. I can hit refresh 20 times on my page but nothing changes, FOUC every single time.

The plugin is connected to QUIC.cloud so can it be an issue on the QUIC side?

Thanks

Hi,

as I understand having CSS in Background option ON should solve this issue.

No, it should be Background OFF , if you read that from doc , then it must be wrong , I would appreciate if you can provide me the link of doc you read.

so can it be an issue on the QUIC side?

No, CCSS generation only requires domain key , if you got the domain key , it should work.

and please check this wiki , it may give you some hint

Best regards,

Hi @qtwrk thank for the reply.

I did try with:
ON – Load CSS Asynchronously
ON – Generate Critical CSS
OFF – Generate Critical CSS In Background

This set up causes FOUC on every single load. It is more pronounced in Firefox but also visible in Chrome.

I have just re-tested it again and the ONLY way I can get rid of FOUC is by turning off Load CSS Asynchronously.

So yes, I still have the issue ongoing.

Here is where I read that Background CSS set to ON might solve the issue.

https://blog.litespeedtech.com/2018/06/20/critical-css-and-litespeed-cache/

Hi,

If you read few lines below , you will see it says

The only drawback to this approach is that the first visitor is likely to get the FOUC.

anyway , have you checked my previous reply provided link ? it will show you the way how to verify if CCSS is generated/inserted.

Do you see CCSS rule in it ?

Best regards,

Yes, I do see the rules inserted between the <style> tags.

Once again:

Load CSS Asynchronously – ON
Generate Critical CSS – ON
Generate Critical CSS In Background – OFF
Purged all LSCache then reloaded the page a few times.
CCSS ruleshows in the code.

However, still having the FOUC issue.

I am thinking it might be a browser cache issue as well. I tried clearing all but it doesn’t seem to be working. I mean, it can be the issue, right?

• This reply was modified 4 years, 9 months ago by alexs464.

Hi,

Could you please provide the report number ? you can get it from toolbox –> report

Best regards,

Hi,

I’m going to mark this topic “Resolved,” due to lack of activity.

If you still need help, please provide your Report Number, found in WP Admin > LiteSpeed Cache > Toolbox > Report. (Press the Send to LiteSpeed button and make note of the number.)

We’ll be happy to reopen the topic if necessary.

Thanks!