Why does inline all CSS seem to work?

  • Resolved bobsled

    (@bobsled)


    3 years, 7 months ago

    I know it’s a bit unorthodox and you do warn against using Inline all CSS, but for some reason, it seems to work.

    I’m trying it on two sites, and I get greatly improved scores from PageSpeed Insights. Especially for LCP.

    But in the back of my mind, I’m wondering, what will go wrong?

    It seems like it’s a fix that’s too good to be true.

    So I suppose my question is, what can go wrong?

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

    (@optimizingmatters)

    Well, it can make the HTML huge, meaning slower transfer of the HTML and more to process by the browser. Additionally some social sharing methods (e.g. Facebook & Whatsapp) only “read” the first X kilobytes of a page, which in this case would be … CSS, so those some important meta-tags won’t be visible for those resulting for example in no image being shown when sharing a page.

    hope this clarifies,
    frank

    Thread Starter bobsled

    (@bobsled)

    Thanks so much for your rapid response.

    I’m using WP Cloudflare Super Cache to cache everything on Cloudflare and with the CSS inline, both the load time and TTFB are terrific. LCP is down from 2.7 to 1,9.

    Yes, I can see that the page size is a little bigger, but it’s not a huge increase. I’ll have to check Facebook sharing, however.

    So okay. I’ll take your warnings onboard and perhaps revert and untick the magic box. ??

    But boy, it’s really tempting to gather the gains!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    ??

    The safer (but more complex) solution is “inline & defer CSS”, there’s more info in the AO FAQ on that topic.

    frank

    Thread Starter bobsled

    (@bobsled)

    Thanks, Frank.

    I’ll investigate that option.

    Thread Starter bobsled

    (@bobsled)

    Well, I used the Critical Path Generator to Inline and Defer CSS and it worked a treat.

    The LCP time has reduced quite nicely.

    Surprisingly easy. And as far as I can tell so far, there are no issues at all.

    Thanks for all your help.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    you’re welcome, feel free to leave a review of the plugin and support here! ??

    have a nice sunday!
    frank

    Thread Starter bobsled

    (@bobsled)

    With pleasure. Done.

    Thread Starter bobsled

    (@bobsled)

    Hi Frank,

    I was using Inline “above the fold CSS” with Critical Path CSS Generator for quite a few months and it was working perfectly.

    But recently, when I use the option now, it adds enormously to CLS. It goes from 0.001 up to 0.7 or 0.8.

    I thought it might be because the Critical Path CSS Generator and my theme weren’t playing nice anymore.

    But I then tried inlining all CSS and it caused the same issue.

    Any ideas on what could cause this issue?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Hard to say with certainty without seeing the site, but could be due to some of the page being rendered through JS instead pure HTML/ CSS maybe?

    Thread Starter bobsled

    (@bobsled)

    Is there a way I can check?

    Or can I send you a link to my test site?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    feel free to mail at futtta-at-gmail-dot-com ??

    Thread Starter bobsled

    (@bobsled)

    Okay, will do.

    Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Why does inline all CSS seem to work?’ is closed to new replies.