Autoptimize moves inline css into external file

  • Resolved byoussin

    (@byoussin)


    9 years, 10 months ago

    First, thanks for this great plugin! It does the job of optimizing js and css.

    My front page https://baruchyoussin.com/ uses Pagebuilder plugin which places the following short inline css code in html just before </head>:
    <style type="text/css" media="all">#pgc-47-0-0 { width:64.154% } #pgc-47-0-1 { width:35.846% } #pg-47-0 , #pg-47-1 , #pg-47-2 , #pl-47 .panel-grid-cell .panel { margin-bottom:0px } #pg-47-0 .panel-grid-cell , #pg-47-3 .panel-grid-cell { float:left } #pgc-47-3-0 , #pgc-47-3-1 , #pgc-47-3-2 { width:33.333% } #pl-47 .panel-grid-cell .panel:last-child { margin-bottom:0 } @media (max-width:992px){ #pg-47-0 .panel-grid-cell , #pg-47-1 .panel-grid-cell , #pg-47-2 .panel-grid-cell , #pg-47-3 .panel-grid-cell { float:none;width:auto } #pgc-47-0-0 , #pgc-47-3-0 , #pgc-47-3-1 { margin-bottom:0px } #pl-47 .panel-grid { margin-left:0;margin-right:0 } #pl-47 .panel-grid-cell { padding:0 } }</style>
    Autoptimize moves this code into a separate css file it creates: https://baruchyoussin.com/wp-content/cache/autoptimize/css/autoptimize_cfb27a9fbcde27112e5cfad879c930a3.css
    Thus, this style code disappears from html and is placed into this css file.
    Autoptimize settings:
    Optimize HTML Code? yes
    Optimize JavaScript Code? yes
    Optimize CSS Code? yes
    Inline and Defer CSS? the same behavior whether yes or no.
    Save aggregated script/css as static files? yes
    All other checkboxes unmarked.
    I disabled W3 Total Cache to check that this happens with it disabled also.

    The result is that Google PageSpeed Insights complain about render-blocking css and prioritizing visible content since the Above The Fold part of the page changes significantly with applying the external css file.
    IMHO it is a bug: css code that is already inlined, should not be moved into an external file unless specifically requested by the user.
    (Do I need to mark any checkboxes to stop this behavior? Their names did not suggest this.)
    There is a workaround: I checked Inline and Defer CSS checkbox and appended that code to other things I had in my above the fold CSS. In this way the page is rendered correctly before waiting for the deferred css.
    However, there is a problem with this workaround: this Pagebuilder css code is page-specific: it is needed on my front page only at not at any other page as it contains the sizes of the front page blocks. In this way I am delivering it to all my other posts. In this particular case it does no harm there except additional size which is not a big problem.

    This workaround works for me for now so I do not have any complaint but I wanted share my discoveries with you and other users.

    Thanks again for the great plugin!

    https://www.ads-software.com/plugins/autoptimize/

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

    (@futtta)

    by default AO indeed aggregates all css, include inline styles, but that’s a feature, not a bug ??

    now there are several ways to solve this:
    1. use inline or “inline & defer”
    2. exclude the pagebuilder CSS (e.g. using “#pc” or “#pgc”, you should look for a unique string that is in each page that has pagebuilder CSS) by adding it to the comma seperated CSS optimization exclusion form field.
    3. disable inline CSS aggregation using the API, cfr. example code in autoptimize_helper.php_example

    All of that being said (written); it is likely that “aggregate inline CSS” (or JS) will be added as an option, replacing the “look only in head”-option (which is of much less use). But that’s for Autoptimize 2.0 ??

    Thread Starter byoussin

    (@byoussin)

    Frank,
    Thanks for your prompt response!
    As for your options, “Inline” is not really good one since my theme has well over 100K css which is much more than the html of any page.
    I am already using “Inline and Defer”, and I explained its drawbacks while it is fine for me now.
    I am interested in your option 2, exclude CSS. I have not understood how I identify this CSS by a string. I have only one page that uses pagebuilder this far, and I copied its inline css above. How do you suggest to identify it?
    Thanks again
    Baruch Youssin

    Plugin Author Frank Goossens

    (@futtta)

    Well, I would try with “#pc-” or “#pgc-“.

    frank

    Thread Starter byoussin

    (@byoussin)

    Frank,
    Thanks!
    #pgc- works! (I guess because the css starts with this.)
    However, how do I know that it would not catch anything else?
    Can I be sure it #pgc- will catch only inline css?
    Thanks
    Baruch

    Plugin Author Frank Goossens

    (@futtta)

    Yeah, this will work as # is a reserved character and as the string is pretty specific.

    Kind regards,
    Frank

    Thread Starter byoussin

    (@byoussin)

    Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Autoptimize moves inline css into external file’ is closed to new replies.