Inlining all CSS

  • Resolved Gemini23

    (@gemini23)


    9 years, 3 months ago

    Using this plugin I get 70 on Mobile and 88 on Desktop Page Speed scores… (Not bad)

    I have “Your page has 1 blocking script resources and 2 blocking CSS resources. This causes a delay in rendering your page.” on both mobile and desktop

    Within Autoptimze IF I tick the box next to “Inline “above the fold CSS” the PageInsights shoot up to over 90 for both Mobile and desktop… BUT.. the page loads in a very odd way with styling all over the place to start with.

    Any suggetsions as to how to reolve… I have Your page has 1 blocking script resources and 2 blocking CSS resources. http://goo.gl/B0tY8I

    https://wordpress.org/plugins/autoptimize/

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

    (@futtta)

    9 years, 3 months ago

    Evening Gemini23;
    “inline & defer” (or “inline above the fold CSS”) is not always the easiest and most efficient way to stop CSS from being render blocking, which is why in general I advise people to just “inline CSS” instead. There’s more info in the FAQ and in this blogpost.

    If you however really want to “inline & defer”, then I can recommend this blogpost on wpfaster.org.

    Hope this helps,
    frank

    AJ @ WpFASTER.org

    (@ajm_1976)

    9 years, 2 months ago

    Hi Gemini23,

    It looks like you’ve solved the render blocking JavaScript issue. Your CSS file is very small, so, as Frank alluded to, you should just use “inline all CSS” which will eliminate that warning. We have found that so long as the weight of the HTML ends up under 50kb there is no additional performance benefit to inlining only critical CSS as opposed to all of it.

    The other warning is for the Google Web font you are using, which you can load asynchronously with this plugin. Bear in mind, however, that asyncing the font may or may not remove the warning in Google PSI and may in fact lower your site’s PSI grades. This is a bug with PSI (which, to be honest, just isn’t a particularly useful tool). To garner actual, useful performance metrics, we recommend WebPageTest.org (as does Google, in fact).

    Best,
    AJ

    Thread Starter Gemini23

    (@gemini23)

    9 years, 2 months ago

    Many thanks for the comments… I don’t like jumping to the ‘Google’ whistle… and do use the webpagetest etc… I think what I have is okay and probably better than most.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Inlining all CSS’ is closed to new replies.

Tags