Generate Critical CSS In Background issues

  • Resolved alexs464

    (@alexs464)


    5 years, 11 months ago

    Hey folks! I cannot use Generate Critical CSS In Background.

    When this is enabled, my website shows its code (unstyled content) for a split second when loading a page. Is there any way to solve this?

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support qtwrk

    (@qtwrk)

    5 years, 11 months ago

    Hi,

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

    Best regards,

    Thread Starter alexs464

    (@alexs464)

    5 years, 11 months ago

    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

    Plugin Support qtwrk

    (@qtwrk)

    5 years, 11 months ago

    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,

    Thread Starter alexs464

    (@alexs464)

    5 years, 11 months ago

    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/

    Plugin Support qtwrk

    (@qtwrk)

    5 years, 11 months ago

    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,

    Thread Starter alexs464

    (@alexs464)

    5 years, 11 months ago

    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 5 years, 11 months ago by alexs464.
    Plugin Support qtwrk

    (@qtwrk)

    5 years, 11 months ago

    Hi,

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

    Best regards,

    Plugin Support LiteSpeed Lisa

    (@lclarke)

    5 years, 11 months ago

    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!

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Generate Critical CSS In Background issues’ is closed to new replies.