Support » Plugins and Hacks » Autoptimize » Eliminate Render Blocking CSS

Viewing 15 replies - 16 through 30 (of 141 total)
  • Plugin Author Frank Goossens

    (@futtta)


    (1) is coming to the API, and can be tested already in the development-version (from github).
    (2) is already available in the API and will be an option in the upcoming version.

    if you have time; testing of the development version is much appreciated 🙂

    have a nice weekend,
    frank

    Goedemiddag Frank,

    Kan ik je ook een optimize vraag stellen voor een magenta omgeving?

    Met vriendelijke groet,
    Arnold Sneeuw

    Plugin Author Frank Goossens

    (@futtta)


    Middag Arnold;
    don’t have specific Magento-knowledge and I doubt wordpress.org is the place to discuss this, but I’ll happily have a look at your question if you send me a mail at futtta-at-gmail-dot-com 🙂

    groetjes,
    frank

    Thanks Frank,

    I will send you a mail.
    I know it’s not a question which belongs on WordPress.org, but i am working in both environments and your Autoptimize is working great in our WordPress site.

    Regards,
    Arnold

    netojose

    (@netojose)


    Hi Frank,

    I am trying to elimita render-blocking with your plugin. I tried different option combinations on CSS but none was able to deal with these two scripts:

    http://cdn-images.mailchimp.com/embedcode/classic-10_7.css

    http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic&subset=latin

    Can you give me a clue about how to deal with them?

    Thanks a lot!

    Jose

    Plugin Author Frank Goossens

    (@futtta)


    As those are external css-files, AO cannot optimize those I’m afraid. For the Google Fonts one, you could however try the “remove Google fonts”-option in AO?

    frank

    netojose

    (@netojose)


    Thank you very much!

    test site using twenty sixteen, autoptimize, zendy and comet cache and php 5.7 I think. After following the steps in the youtube video, what happens is I end up with several cached autoptimize files. The big original file, a smaller file of the critical path css. The original css aggregated file ends up deferred at the bottom of the html and insights calls it render blocking which the critical path autoptimize file in the head should take care of. Pages in browser look ok to me.

    Would rather think I would get 3 autoptimize files. the orginal aggregated, the critical path one and the left over noncritical which would go to deferred on the bottom of the html.

    This also happens with no cache enabled and no files in the old comet cache folder

    So why would the plugin not work like in the video or does it have to specifically have W3TC

    Update to my original post
    Update, I switched to all css inline at bottom and used php instead of static files along with speed booster pack to only remove queries from static files. Result is all my test pages are running insights mobile at 98 or 99 speed and user at 100/100 with desktop at 98 and 99.

    Without removing query strings, the score drop a bit.

    Pingdom still yield no more than 80 performance but some excellent 1.56 to Melbourne and 1.45 to Sweden with under 1 second to Dallas and San Jose which are fast servers.

    So this is better than I normally do with a cache plugin working with static html files.

    Plugin Author Frank Goossens

    (@futtta)


    The original css aggregated file ends up deferred at the bottom of the html and insights calls it render blocking which the critical path autoptimize file in the head should take care of.

    that in general would be the case if the critical CSS is somehow incomplete, so try another tool or amend the critical CSS by hand if you’re into CSS

    Would rather think I would get 3 autoptimize files. the orginal aggregated, the critical path one and the left over noncritical which would go to deferred on the bottom of the html.

    no; you’ll typically end up with:
    * 1 normally autoptimized file per media-type in the original HTML (so if you have linked CSS with media=”all” and media=”screen” and media=”print” in the original HTML, you’ll have 3 autoptimized CSS-files)
    * 1 file for the optimized critical CSS

    there is no concept of “left over noncritical CSS” (that would generally be a bad idea anyhow)

    Update, I switched to all css inline at bottom and used php instead of static files along with speed booster pack to only remove queries from static files. Result is all my test pages are running insights mobile at 98 or 99 speed and user at 100/100 with desktop at 98 and 99.

    great! if your inlined CSS is not too big, inlining all indeed can be a good solution. nice scores! 🙂

    frank

    Thanks for the answer and for the compliment.

    I got the critical css from the critical css path tool, selected all and copied it to the input text box. The odd thing is the css was in normal non minified format in the critical css path tool. Not like is shown in the youtube video.

    If it is minified does it then go directly into the html like in the video or does autoptimize create a cached file for the critical css which is used in the html?

    I did the same process on one of my production sites also and the test results in insights are very close to the results from the test site.

    Plugin Author Frank Goossens

    (@futtta)


    I got the critical css from the critical css path tool, selected all and copied it to the input text box. The odd thing is the css was in normal non minified format in the critical css path tool. Not like is shown in the youtube video.

    the tool very well might have changed.

    If it is minified does it then go directly into the html like in the video or does autoptimize create a cached file for the critical css which is used in the html?

    if you enter it on AO’s settings page, it will be minified & saved in a file. if a request for a page is received, AO will read from that file and inject it in the HTML.

    frank

    Thanks a lot Frank!

    Plugin Author Frank Goossens

    (@futtta)


    you’re welcome netojose.

    by the way, if you guys are on wordpress 4.5.3 already, it would be great if you could confirm it working with autoptimize 2.0.2 here (be sure to select wp 4.5.3 though).

    thanks!
    frank

    Just a few comments:

    php 5.7

    This is a bit of a ‘fringe’ version of PHP. Something of a ‘WTF do we really want to do from here…?” sort of thing. One should ideally update to PHP 7.x — the finalized, solidified presentation of that thought.

    Update, I switched to all css inline at bottom and used php instead of static files along with speed booster pack to only remove queries from static files. Result is all my test pages are running insights mobile at 98 or 99 speed and user at 100/100 with desktop at 98 and 99

    Your primary goals should be improved UX (User Experience) and real world performance. Not grades on any given best practices tool. So please, make sure you are using WebPageTest.org, Google’s REAL WORLD performance testing platform. There’s a learning curve with it; but, anyone that REALLY wants to can learn it with relative ease.

    Be well.
    AJ

Viewing 15 replies - 16 through 30 (of 141 total)
  • You must be logged in to reply to this topic.