Critical CSS

  • miketica

    (@miketica)


    6 years, 10 months ago

    Hi,

    I am trying to generate Critical CSS with the Litespeed plugin. Everything works fine, except the menu on the website, which still displays the menu items, but it also displays the mobile menu hamburger icon.

    Litespeed has an option to set rules “Specify critical CSS rules for above-the-fold content when enabling Load CSS Asynchronously.”

    I tried both Output in head and save to filesystem for the menu CSS (currently it’s set to save to filesystem), but it still does not work.

    Any help is appreciated.
    Thanks,
    Mike

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author megamenu

    (@megamenu)

    6 years, 9 months ago

    Hi Mike,

    It seems like you may have resolved this by excluding the max mega menu style.css file from being minified? (which is what I would have suggested)

    Regards,
    Tom

    Thread Starter miketica

    (@miketica)

    6 years, 9 months ago

    Hi Tom,

    The file is already excluded from minification, but the menu still breaks when enabling CSS Async. This is how the menu looks (on desktop) with CSS async enabled, notice how the mobile menu icon appears:

    https://prnt.sc/o3ulsb

    The file I excluded from minification is /wp-content/uploads/maxmegamenu/style.css , but, like I said, it does not help and I have to keep async off until I figure this out.

    The Litespeed Cache plugin mentions this option:
    “Elements with attribute data-no-async=”1″ in html code will be excluded.”
    They also have an area where you can
    “Specify critical CSS rules for above-the-fold content when enabling Load CSS Asynchronously”

    Thanks,
    Mike

    Plugin Author megamenu

    (@megamenu)

    6 years, 9 months ago

    Hi Mike,

    So it seems like you would need to add data-no-async=”1″ to this <link> tag:

    https://screencast.com/t/8e1inAiwot

    I’m not sure how you would do that off the top of my head (it may be worth asking in the litespeed forums, I suspect they have some code they could copy and paste to you). I did find this thread on google, the first answer seems to show a way to modify the link tag. For reference, the handle you need to target is “megamenu”.

    https://wordpress.stackexchange.com/questions/317035/how-to-add-crossorigin-and-integrity-to-wp-register-style-font-awesome-5

    Regards,
    Tom

    Thread Starter miketica

    (@miketica)

    6 years, 9 months ago

    Thank you for the great support, Tom.

    This might take a while longer to solve, I have reached out to Litespeed support, as you suggested.

    Plugin Author megamenu

    (@megamenu)

    6 years, 9 months ago

    Hi Mike,

    You’re welcome. And thanks for the review – much appreciated! 🙂

    Regards,
    Tom

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

The topic ‘Critical CSS’ is closed to new replies.

Tags