Inline CSS in Header & Footer

  • Resolved David Elstob

    (@davwaiguy)


    5 years, 5 months ago

    In settings you can either inline in Footer only or inline in Header & Footer. While I respect your reasoning, I’m confused, because I’d have thought it should be inline in the Header only and then inline in the Header & Footer?

    Can you explain your thinking please? Thanks.

    By the way, I love the plugin, have tried Autoptimize and EVERY time my PageSpeed Insight scores are far worse. For some reason I just click with yours better. ??

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Raul P.

    (@alignak)

    Hi there,

    The reasoning is simple.
    Some plugins enqueue CSS files either on the header or footer.
    If you select the option to inline all CSS, it works as intended, however, if the CSS is too large, it will reduce your time to first byte because there will be a lot of css code in the header.

    Hence, it-s better to not inline CSS in those cases.
    Nevertheless, it’s also important to reduce requests, so an option to inline CSS only on the footer, where it doesn’t affect the time to first byte, exists.
    That way, you have CSS files on the header AND still can inline CSS on the footer for less requests.

    While it makes sense that they could be inline on the header + footer separately, I opted to have one function to inline all, and give you the option to disable it, while still being able to inline the footer.

    I may change that logic, but the footer option came at a much later time after I developed the inline all option, hence I did’t really had time to rewrite that yet.

    Thread Starter David Elstob

    (@davwaiguy)

    Hi Raul,

    Thanks for the detailed response.

    It makes sense now you’ve explained it to me. I was just looking at it without considering the code size to be inlined.

    Perhaps though, rather than adjust the code, you could update the sidenote to explain it inines in the head then overflows to the footer? (Is that right?)

    I’m now scoring 100/100 on PSI regularly and my ‘normal’ sites – that use FVM – are even faster than my AMP sites! It’s an amazing plugin if you take the time to read the advice and pay attention.

    My initial html is running about 55kb inlined, which is similar to the AMP limit of 50kb and negates the hassle of creating critical CSS on every page; it just isn’t worth the miniscule improvement. Not to mention, I can’t seem to stop my page janking about with every critical CSS method I use.

    One last suggestion for people using critical CSS on each page – is it possible to defer the rest of the CSS using your plugin or could you offer a checkbox for that? How does your critical CSS box deal with the it?

    Thanks in advance.

    David

    Plugin Author Raul P.

    (@alignak)

    Thanks, I’ll update it soon.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Inline CSS in Header & Footer’ is closed to new replies.

Tags