Render blocking CSS – Preload not read by Google?

  • Resolved florianmarianna

    (@florianmarianna)


    5 years, 9 months ago

    Hello,

    I’m using critical css on your plugin so that I avoid as much as possible the render blocking. It works nice however, when I run test by Google, it still tells me to avoid render blocking with my css file. Is it because Chrome still doesn’t read “preload”? Isn’t there a way of making differ that css file for that browser?

    Thanks

    Florian

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

    (@optimizingmatters)

    can you share your site’s URL here or in a mail to futtta-at-gmail-dot-com @florianmarianna ?

    frank

    Thread Starter florianmarianna

    (@florianmarianna)

    Hello,

    I’ve just sent it to you per mail.

    thanks

    Florian

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    thanks for that florian!

    I reviewed the pagespeed insights feedback for “eliminate render-blocking resources”;

    Your CSS-file is not listed as being render-blocking, so all seems to be fine there; instead 2 render-blocking JS-resources; jquery.js and the Google Maps JS. for jQuery you could try to simply remove it from AO’s default JS exclusion list or you could try the “defer jquery”-option in the Critical CSS advanced options. For Google Maps you can try asyncing it via AO’s Async feature (on the “extra” tab) or you could try the Async Javascript plugin.

    Hope this helps,
    frank

    Thread Starter florianmarianna

    (@florianmarianna)

    thanks!

    Sorry I meant “defer unused CSS”, not “render blocking”. There is no way to optimise this with autoptimize, right? Like generating automatically only the CSS used on a page.

    Regarding jquery, that has to be excluded as my javascript doesn’t work without it (eg: my google map won’t show if I don’t exclude it)

    I asynced the google maps js with the async javascript plugin, this wasn’t working for me with the standard plugin.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    Indeed; when you’re using “inline & defer” (potentially with the automated critical CSS plugin) the critical CSS is inlined and the full CSS is technically not deferred but “preloaded” meaning it is loaded without it being render-blocking (which is a separate GPSI recommendation). AO uses Filamentgroup’s loadCSS for this purpose.

    The advantage of using “preload” is that the page below the fold is styled as soon as possible without the CSS being render blocking. If it would be deferred (as AO used to do a couple of versions ago) the chance was bigger that the user scrolled down to a part of the page that was not styled yet. Given the fact that preloading the full CSS does not block rendering, there is little advantage to be found in deferring it instead and the disadvantage might be significant.

    hope this clarifies,
    frank

    Thread Starter florianmarianna

    (@florianmarianna)

    Yes, it makes sense. Thanks for your time!

    Plugin Author Optimizing Matters

    (@optimizingmatters)

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

    Thread Starter florianmarianna

    (@florianmarianna)

    Just did!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Render blocking CSS – Preload not read by Google?’ is closed to new replies.