Critical CSS Loading before anything else

  • Resolved ronspinabella

    (@ronspinabella)


    6 years, 8 months ago

    I just switched Hosts and they want me to use LS Cache instead of WP Rocket because it works better on their lightspeed servers. Only problem is that LS Cache loads jquery before it loads the critical css, so I have 200-300ms where the user sees unstyled CSS in the browser. Is there anyway to put the Critical CSS as the first thing that LS Cache loads so this doesn’t happen?
    I am not able to defer Jquery because of my theme, it breaks it. Is there a way to async jquery? I just don’t want anything render blocking atleast before my nav menu gets loaded. Looks very ugly

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Support Hai Zheng?

    (@hailite)

    Please give a report number. JQuery is supposed to be loaded after CCSS

    Thread Starter ronspinabella

    (@ronspinabella)

    Report Number : YOCFAIPT

    Jquery is loaded after CSS, but not critical CSS which is what It needs and what WP Rocket did.

    Plugin Support Hai Zheng?

    (@hailite)

    Your critical CSS is loaded in the very beginning. It is <style id="litespeed-optm-css-rules"> part. For your homepage, you can try to change the url to see the uncached version: https://www.xx.com/?xx

    Plugin Support Hai Zheng?

    (@hailite)

    I also tried fast 3g network to load your homepage, that did work.

    Thread Starter ronspinabella

    (@ronspinabella)

    There is nothing in the Style tags in <style id=”litespeed-optm-css-rules”> on my homepage? There is some on my other pages on the site. Doesn’t Lightspeed automatically generate this? I tried switching Generate Critical Css in background from OFF to ON, but it is not showing up

    Plugin Support Hai Zheng?

    (@hailite)

    The page cache is generated before CCSS is generated. Thats why it’s empty. And that’s why I mentioned if you want to check that page, add ‘/?xx’ or any other query string to make the url different (which can generate a new cache copy) to see CCSS works.

    Thread Starter ronspinabella

    (@ronspinabella)

    Yes, adding the query string did generate CCSS for the page with the query string. The CCSSS is not appearing on the homepage though. I have tried 3 different browsers and cleared the browser cache. do i have to purge something from the caching plugin to get it to appear?

    Thread Starter ronspinabella

    (@ronspinabella)

    nvm got it to work by clearing the pages cache

    Plugin Support qtwrk

    (@qtwrk)

    Hi,

    glad to know it worked out ??

    I am going to mark this topic solved.

    Please let us know if you have any further questions.

    Best regards,

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Critical CSS Loading before anything else’ is closed to new replies.