• Resolved keithvaugh

    (@keithvaugh)


    Hi Frank

    I think I am having an issue with the full CSS not loading when using the critical CSS. I am adding the CSS as custom to each page, however when I scroll down after wards the widgets in the footer are not aligned horizontal (they’re aligning vertically).
    If I inline all CSS everything works fine – however the load speed really suffers.

    Also are you aware of a method to add critical CSS to product pages in woocommerce?
    Would really appreciate some input.
    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Frank Goossens

    (@futtta)

    evening Keith;
    Concerning the full CSS not loading; it could be the CSS-files are not loaded, it could be they’re not being inserted or it could be that there’s a conflict between the critical CSS and the deferred on. Have a look in your developer console; in FF for example in the Stylesheet tab you can see all CSS-files that are loaded. What you can also do, to get an idea of what is (not) happening, is leaving the inline CSS blank. If the deferred CSS doesn’t load after a couple of seconds max, have a look at the browser (error) console for any JS errors (as the deferred CSS is injected by JS).

    Regarding critical CSS for woocommerce product pages; no idea … in a widget maybe?

    hope this helps,
    frank

    Thread Starter keithvaugh

    (@keithvaugh)

    Thanks Frank

    Had a look and think it is loading alright. For what ever reason the crtical CSS seems to break the theme. Can’t seem to isolate the issue at all.

    Plugin Author Frank Goossens

    (@futtta)

    well, if you can share your URL I can have a quick look if you want?

    Thread Starter keithvaugh

    (@keithvaugh)

    That would be great Frank

    https://www.magva.com

    Plugin Author Frank Goossens

    (@futtta)

    ok, the problem (vertically aligned bottom widgets) is even present when AO is not active (you can see by adding ?ao_noptimize=1 to the URL.

    the issue is with this block of inline CSS;

    
    [class*=pl-col-] {
        -webkit-order: 3;
        -moz-order: 3;
        -ms-order: 3;
        order: 3;
        -webkit-flex-basis: 100%;
        -moz-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
        -ms-flex-basis: 100%;
        flex-basis: 100%;
        padding-right: 1em;
        padding-left: 1em;
        max-width: 100%
    }

    remove that and the bottom widget are aligned horizontally 🙂

    Plugin Author Frank Goossens

    (@futtta)

    following up on that; the problem seems specifically triggered by that;
    max-width: 100%

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

The topic ‘Full CSS not loading with Inline and Defer CSS?’ is closed to new replies.