Title: Autoptimize moves inline css into external file
Last modified: August 22, 2016

---

# Autoptimize moves inline css into external file

 *  Resolved [byoussin](https://wordpress.org/support/users/byoussin/)
 * (@byoussin)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/autoptimize-moves-inline-css-into-external-file/)
 * First, thanks for this great plugin! It does the job of optimizing js and css.
 * My front page [http://baruchyoussin.com/](http://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: [http://baruchyoussin.com/wp-content/cache/autoptimize/css/autoptimize_cfb27a9fbcde27112e5cfad879c930a3.css](http://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://wordpress.org/plugins/autoptimize/](https://wordpress.org/plugins/autoptimize/)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/autoptimize-moves-inline-css-into-external-file/#post-5732221)
 * 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](http://plugins.svn.wordpress.org/autoptimize/trunk/autoptimize_helper.php_examplehttp://plugins.svn.wordpress.org/autoptimize/trunk/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](https://wordpress.org/support/users/byoussin/)
 * (@byoussin)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/autoptimize-moves-inline-css-into-external-file/#post-5732224)
 * 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](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/autoptimize-moves-inline-css-into-external-file/#post-5732225)
 * Well, I would try with “#pc-” or “#pgc-“.
 * frank
 *  Thread Starter [byoussin](https://wordpress.org/support/users/byoussin/)
 * (@byoussin)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/autoptimize-moves-inline-css-into-external-file/#post-5732233)
 * 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](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/autoptimize-moves-inline-css-into-external-file/#post-5732416)
 * Yeah, this will work as # is a reserved character and as the string is pretty
   specific.
 * Kind regards,
    Frank
 *  Thread Starter [byoussin](https://wordpress.org/support/users/byoussin/)
 * (@byoussin)
 * [11 years, 6 months ago](https://wordpress.org/support/topic/autoptimize-moves-inline-css-into-external-file/#post-5732457)
 * Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Autoptimize moves inline css into external file’ is closed to new replies.

 * ![](https://ps.w.org/autoptimize/assets/icon-256X256.png?rev=2211608)
 * [Autoptimize](https://wordpress.org/plugins/autoptimize/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/autoptimize/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/autoptimize/)
 * [Active Topics](https://wordpress.org/support/plugin/autoptimize/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/autoptimize/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/autoptimize/reviews/)

 * 6 replies
 * 2 participants
 * Last reply from: [byoussin](https://wordpress.org/support/users/byoussin/)
 * Last activity: [11 years, 6 months ago](https://wordpress.org/support/topic/autoptimize-moves-inline-css-into-external-file/#post-5732457)
 * Status: resolved