Support » Plugin: Autoptimize » PageSpeed reporting autoptimize css as a render block

  • Resolved constantflux

    (@constantflux)



    Hey there,

    I have set:
    Optimize CSS code ✔︎
    Inline CSS ✔︎
    Inline and defer CSS ✔︎

    I generated my critical path css, minified it and pasted it into the Inline and Defer CSS box.

    But the PageSpeed Tool from google still claims that the Autoptimize css at:
    /wp-content/cache/autoptimize/css/autoptimize_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.css
    is blocking rendering of the site and should be corrected.

    Did I generate my critical path css before I activated Autoptimize perhaps?
    What can I do about this?
    Thank you!

    • This topic was modified 1 year, 7 months ago by  constantflux.
    • This topic was modified 1 year, 7 months ago by  constantflux.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Frank Goossens

    (@futtta)

    GSPI is a bit of a black box, but in general this means the critical CSS generated is simply not sufficient to render the above-the-fold content @constantflux maybe try re-generating or try a different tool?

    Thanks! I solved it trying various combinations of settings and combining Autoptimize with Above the Fold.
    Don’t ask me why, but I was able to solve the blocking notification from PageSpeed by using Above the Fold for critical css injection instead of Autoptimize. Everything else is switched off in AtF and the only thing I switched off in Autoptimize is Inline and Defer and put whole css inline.
    Still trying to solve the FOUC I get with several pages of my site by excluding them from optimization. I can do that with Autoptimize, correct?
    Happy holidays, Frank.

    Ok… now I trashed AtF for now since the combination of both plug-ins wasn’t working out in the end.

    Still stuck on the Autoptimize issue though.
    Autoptimize is putting a link to the complete .css in my pages head right after my critical path css and in front of the noscript tag that is calling it for the deferred function at the bottom of the page.
    Even when I take the css from the .css file Autoptimize puts in my page head and put it through the critical path generator, extracting the critical css from that and entering it via inline and defer, the exact same css is still called in the pages head right after the noscript tag where the same .css file is linked.

    In this video I can see the inline critical path css the author put in, after that the noscript tag including the .css file link (which gets relevant at the end of the page, if I understand correctly) but nothing after that.
    It is behaving differently for me on my page (link here if you want to check out my wip).

    I’m puzzled.

    • This reply was modified 1 year, 7 months ago by  constantflux.
    • This reply was modified 1 year, 7 months ago by  constantflux.
    • This reply was modified 1 year, 7 months ago by  constantflux.
    Plugin Author Frank Goossens

    (@futtta)

    weird, because I see;

    <style type="text/css" id="aoatfcss" media="all">.container::after,.rotatingtweet p.rtw_main,.row::after,.vc_column-inner::after,.vc_row:after{clear:both} /* skipping lots of critical css */ @font-face{font-family:Open Sans;font-style:normal;font-weight:300;src:local(Open Sans),local(Open-Sans),url(/wp-content/themes/kalium-child/fonts/Open_Sans/OpenSans-light.ttf) format('truetype')}</style><noscript id="aonoscrcss"><link type="text/css" media="all" href="http://www.constantinflux.com/wp-content/cache/autoptimize/css/autoptimize_d8983d0ab554a08b590e37b8f6173bdc.css" rel="stylesheet"/></noscript>

    and at the bottom of the HTML;

    
    <script data-cfasync='false'>function lCss(url,media) {var d=document;var l=d.createElement('link');l.rel='stylesheet';l.type='text/css';l.href=url;l.media=media;aoin=d.getElementById('aonoscrcss');aoin.parentNode.insertBefore(l,aoin.nextSibling);}function deferredCSS() {lCss('http://www.constantinflux.com/wp-content/cache/autoptimize/css/autoptimize_d8983d0ab554a08b590e37b8f6173bdc.css','all');}if(window.addEventListener){window.addEventListener('DOMContentLoaded',deferredCSS,false);}else{window.onload = deferredCSS;}</script>

    which is what should be there (for AO2.1, this will slightly different in the upcoming AO2.2)?

    Oh! Apparently I do not understand how Chrome displays html. In the elements tab I see

    <style type="text/css" id="aoatfcss" media="all">.yadda {yadda: yaddayadda}</style>
    <noscript id="aonoscrcss"><link type="text/css" media="all" href="http://www.constantinflux.com/wp-content/cache/autoptimize/css/autoptimize_d8983d0ab554a08b590e37b8f6173bdc.css" rel="stylesheet"/></noscript>
    <link rel="stylesheet" type="text/css" href="http://www.constantinflux.com/wp-content/cache/autoptimize/css/autoptimize_d8983d0ab554a08b590e37b8f6173bdc.css" media="all">
    <title>Constantin Flux Fotograf | Fotografie am Niederrhein</title>

    but when I view ‘source’ I see what you see. My apologies.
    I can’t say that I understand that the position of the autoptimize.css is displayed where it is in the elements tab though.
    Am I correct to assume that it shows the deferred .css in the position it is rendered?
    And this means something is calling for styles and the browser is using the deferred .css to find the missing style?
    And my next step would be to find what exactly is missing from the inline css and put it there so the browser stops looking in the deferred .css, correct?

    Do you know of a clever way to use chromes dev tools to find out when this happens and what exactly it is?

    Plugin Author Frank Goossens

    (@futtta)

    your developer console shows the DOM after JS manipulations, so after the AO “deferred CSS loader”-JS injected the deferred CSS in the <head>. you indeed have to “view source” to see the HTML as your browser receives it 🙂

    My next step would be to find what exactly is missing from the inline css and put it there so the browser stops looking in the deferred .css, correct?

    not sure about Chrome, but in FF you can see all stylesheets loaded and you can disable stylesheets, so I usually disable all stylesheets but the one with the critical CSS.

    Indeed, GPSI reports that the cached css of Autoptimize is blocking the rendering of my website. My score is 81 for mobile and 91 for desktop. However, I don’t really care, GTmetrix gives me 100 for PageSpeed and 92 for YSlow.

    As @futtta said, GSPI is a black box. 😉

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘PageSpeed reporting autoptimize css as a render block’ is closed to new replies.