Autoptimize stylesheet that competes with LCP image

  • Resolved anm

    (@ahuk)


    4 months, 2 weeks ago

    hi

    i am using autoptimize and one of the stylesheets it creates is really big (90kb) and, although it is not renderblocking, it competes with the LCP image in bandwith and causes it to load late (over 5s).

    is it possible to defer/async this stylesheet created by autoptimize?

    What can i do to stop it from delaying LCP?

    thank you

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 months, 2 weeks ago

    Have a look at the “eliminate render-blocking CSS” option, but do take into account you’ll have to either;

    a) generate & copy/paste the “above the fold CSS” in the field below (more info in the AO FAQ, look for “inline & defer CSS”) OR
    b) create manual rules on the “critical CSS” tab (generating critical css for each rule) OR
    c) take a subscription for either AO Pro or at criticalcss.com (in which case you’ll have to paste your API key in the field on the critical CSS tab)

    hope this helps,
    frank

    Thread Starter anm

    (@ahuk)

    4 months, 2 weeks ago

    i am already using criticalcss.com to create critical css.

    the autoptimize stylesheet is NOT renderblocking, but it still competes with Lcp in bandwidth and delays its loading (appears before the LCP in request waterfall)

    Thread Starter anm

    (@ahuk)

    4 months, 2 weeks ago

    is there any way to add a preload tag for the LCP to the critical css rules?

    Thread Starter anm

    (@ahuk)

    4 months, 2 weeks ago

    and can i defer/async that stylesheet created by autoptimize?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 months, 2 weeks ago

    async/ defer are specific to JS, so those do not apply I’m afraid, but AOPro does have an “Delay full CSS more?” which delays the loading of the linked CSS until either a specified timeout or until user interaction, so that could help.

    if the LCP item is an image, you could try preloading that?

    Thread Starter anm

    (@ahuk)

    4 months, 2 weeks ago

    if i add a preload to the LCP, do i have to redo the critical css rules for that page?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 months, 2 weeks ago

    no, that should not be needed 🙂

    Thread Starter anm

    (@ahuk)

    4 months, 2 weeks ago

    so if i use “Delay full CSS more?” what will that do with the big css file? The big css file generated by autoptimize is created becausr of inlining the CSS above the fold (i think).

    will it help with that?

    Thread Starter anm

    (@ahuk)

    4 months, 2 weeks ago

    can i send you the pages through email so you can have a look please?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 months, 2 weeks ago

    the option changes the rel attribute into <link rel="lazy-stylesheet" and adds JS to change the rel after the timeout and/ or on user interaction.

    Thread Starter anm

    (@ahuk)

    4 months, 2 weeks ago

    i emailed you an example of a page with those issues

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    4 months, 2 weeks ago

    I received it 🙂

    So when comparing the two; one does have the main image preloaded, but the 2nd one does not and as a result the image is loaded sooner on the main URL and later on the 2nd one?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    3 months, 4 weeks ago

    No feedback so I assume this got resolved? Feel free to follow up if you still encounter issues!

    have a nice day!
    frank

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

You must be logged in to reply to this topic.