Title: Large css file
Last modified: March 9, 2018

---

# Large css file

 *  Resolved [paulmartinsen](https://wordpress.org/support/users/paulmartinsen/)
 * (@paulmartinsen)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/large-css-file/)
 * Hello,
 * Autoptimize is generating very large css files for our site. For example:
    [https://test.megunolink.com/wp-content/cache/autoptimize/css/autoptimize_612adc357b105ef5a0be710ca2f5534b.css](https://test.megunolink.com/wp-content/cache/autoptimize/css/autoptimize_612adc357b105ef5a0be710ca2f5534b.css)
 * For the home page, it creates a 1.1 MB file.
    When I add up the size of each 
   of the css files without autoptimize turned on, I only get about 140kb.
 * The time to download the large file is killing the benefits we’d get from combining
   the individual small files so I’m wondering how I can figure out why it builds
   such a large file?
 * Kind regards
    Paul.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Flarge-css-file%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/large-css-file/#post-10058832)
 * that’s weird … AO aggregates the CSS (and JS) found in the HTML, so size _should_
   be slightly smaller (because of minification). What CSS optimization options 
   did you have active [@paulmartinsen](https://wordpress.org/support/users/paulmartinsen/)?
   could you re-enable AO so I can do some tests?
 *  Thread Starter [paulmartinsen](https://wordpress.org/support/users/paulmartinsen/)
 * (@paulmartinsen)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/large-css-file/#post-10058925)
 * Hi Frank,
 * Wow, I didn’t expect such a fast reply. Thanks!
 * I’ve been exploring a little more and toggling AO on and off (I thought there
   was a query string parameter I could use to do this but I can’t find it again).
 * I made some progress.
 * We use the code crayon plugin to format code. I found its CSS in the home page’s
   AO.css file, even though no code is on that page and the CSS wasn’t referenced
   when AO is off. I found a comment on the authors blog that makes me wonder if
   they are adding the CSS file to a list then pulling it out again if the plugin
   isn’t used.
    [http://aramk.com/blog/2012/01/07/enqueuing-themes-and-fonts-in-crayon/](http://aramk.com/blog/2012/01/07/enqueuing-themes-and-fonts-in-crayon/)
 * We’re also using the Jupiter theme by artbees. With AO off, the page references:
   
   full-styles.6.1.1.css. This is in a folder with a bunch of other css files. It
   looks like AO is automatically including them (based on the content of AO’s css
   file). This is the main thing that is blowing out the file size.
 * When I exclude:
    wp-content/plugins/crayon-syntax-highlighter/themes/classic,
   wp-content/themes/jupiter/assets/stylesheet
 * AO’s css file returns to a much more manageable 17.7 kb.
 * The downside is that this leaves a separate request for the other stylesheets
   that block for a bit (because of number of parallel content requests by the browser).
 * So I was wondering if there is a way to tell AO to exclude a folder, but include
   a specific css file from it? It would be great if there was an extra parameter
   in the config section where we could give it a specific file to include. I guess
   that might be more complex than it sounds since I believe order matters for css.
 * Any idea why AO would be grabbing all these extra CSS files? If there is anything
   I can do/send you to help solve that one, please don’t hesitate to ask. I’m happy
   to provide access to our test site if that would be useful.
 * I’ve turned AO back on again, though it has those exclusions now.
 * This really is a nice plugin. Thanks for all your hard work on it.
    Kind regards
   Paul.
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/large-css-file/#post-10059549)
 * > We’re also using the Jupiter theme by artbees. With AO off, the page references:
   > 
   > full-styles.6.1.1.css. This is in a folder with a bunch of other css files.**
   > It looks like AO is automatically including them (based on the content of AO’s
   > css file).** This is the main thing that is blowing out the file size.
 * well, that is very weird, AO’s MO is to scan the HTML for a page, to extract 
   the CSS, to try to do the [@imports](https://wordpress.org/support/users/imports/)
   in that CSS and to put all of that in one file (or more if there are different
   media-attributes involved) …
 * so let’s try to gain an understanding here, starting with some questions:
    * 
   can you confirm that when (briefly) switching themes there is no AO CSS bloating
   any more? * can you confirm the problem also occurs with all plugins disabled,
   only using the Jupiter theme? * does the Jupiter theme have any options to change
   how CSS is generated/ loaded? if so, which ones and does toggling these make 
   any difference? * do you have any plugins that have options to change how CSS
   is generated/ loaded? if so, which ones and does toggling these make any difference?
 * frank
 *  Thread Starter [paulmartinsen](https://wordpress.org/support/users/paulmartinsen/)
 * (@paulmartinsen)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/large-css-file/#post-10061331)
 * Hi Frank,
 * It is indeed strange!
 * I removed the CSS exclude filters and confirmed we were back to 1.2MB for AO’s
   css file.
 * * I switched to the Twenty Seventeen theme. AO’s css file is a sensible 117 kB
   *
   Crayon Syntax Highlighter plugin was active, I deactivated it and AO’s css file
   dropped to 101kB. Interestingly, if I active the syntax highlighter and turn 
   off AO’s CSS optimization the crayon.min.css file is only 3.8 KB, less than the
   difference in AO’s css file. I suspect AO is including more css files from the
   syntax highlighter. * I turned Jupiter back on, confirmed we were back to the
   big css file from AO then turned off all the plugins that weren’t needed for 
   Jupiter. That left: WPBakery Page Builder, Really Simple SSL, Artbees Themes 
   Captcha and Autoptimize. AO’s css was 1.1MB. * Jupiter has speed optimization
   to minify theme styles files. Turning that off made no difference to the size
   of AO’s css file. It also has something called “global lazy load”, but turning
   that off didn’t make a difference either. * Crayon Syntax Highlighter has an 
   option “Enqueue themes in the header” which sounds like it does something with
   css. turning that off dropped AO’s css file from 691k to 101k with the Twenty
   Seventeen theme. Though not consistently; it was a bit confusing.
 * So the Jupiter theme really does seem to be at the root of the problem here. 
   I’ve put the site back to Jupiter so it it is making the large files. I left 
   the css for convertplug excluded because that seems to attach per user tags to
   the css so the AO keeps creating lots of new CSS files, as explained in one of
   your FAQs.
 * Hope that helps,
    Kind regards Paul.
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/large-css-file/#post-10062737)
 * Such a mystery …
 * OK, my main problem; Jupiter is premium so I cannot test myself, but what we 
   could do;
 * 1. log a ticket at artbees; maybe this is a known issue? maybe there is an easy
   fix? if not getting their assistance might be helpful anyway.
    2. if you could
   set up a test-site, stock WordPress + AO + Jupiter and give me access, then I
   could do some tests there 3. alternatively I could give you instructions on where/
   how to add debug-code to AO and we could work from there?
 * The problem got me pretty curious really, so I’ll be happy to spend some time
   on this! 🙂
 * frank
 *  Thread Starter [paulmartinsen](https://wordpress.org/support/users/paulmartinsen/)
 * (@paulmartinsen)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/large-css-file/#post-10064111)
 * A puzzle wrapped up in an enigma!
 * I’m travelling for the next couple of days. When I get back I’ll setup an account
   so you can access our test site. Would you mind contacting me using paul at megunolink.
   com so I can send you the login credentials?
 * I’ll see if I can raise a ticket with Artbees too.
 * Thanks for your help,
    Paul.
 *  Thread Starter [paulmartinsen](https://wordpress.org/support/users/paulmartinsen/)
 * (@paulmartinsen)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/large-css-file/#post-10081280)
 * For anyone else seeing this ‘problem’:
 * It turned out that the server we are using is configured not to compress files
   greater than 1 MB and the developer tool I was using was only reporting the transferred
   size and not the content size.
 * The theme we are using has quite a large CSS file. So when AO joined them all
   together, we went over the 1MB limit and see a large file transferred. When AO
   is disabled, each CSS file gets transferred with compression so it looks smaller
   overall.
 * Frank was super helpful figuring this out. The solutions he proposed:
    * best:
   tweak litespeed config to also compress the AO’ed CSS-file * alternative: tweak
   litespeed config to allow PHP in wp-content/cache/autoptimize/* being executed
   and then disable the AO option to serve the files statically.
 * I’ll investigate these.
 * Thanks Frank for all your help. AO is awesome!
    Paul.
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [8 years, 3 months ago](https://wordpress.org/support/topic/large-css-file/#post-10081536)
 * > Thanks Frank for all your help. AO is awesome!
 * thanks [@paulmartinsen](https://wordpress.org/support/users/paulmartinsen/), 
   feel free to [leave a review here](https://wordpress.org/support/plugin/autoptimize/reviews/#new-post)!
   😉
 *  [luminsol](https://wordpress.org/support/users/luminsol/)
 * (@luminsol)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/large-css-file/#post-10482500)
 * > Frank was super helpful figuring this out. The solutions he proposed:
   >  * best:
   > tweak litespeed config to also compress the AO’ed CSS-file * alternative: tweak
   > litespeed config to allow PHP in wp-content/cache/autoptimize/* being executed
   > and then disable the AO option to serve the files statically.
   > I’ll investigate these.
 * Hey Paul,
 * Did you ever solve this problem? I’m seeing this exact same issue with a different
   theme.
 *  Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/)
 * (@optimizingmatters)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/large-css-file/#post-10482572)
 * luminsol; as a workaround you could always exclude 1 or 2 large CSS-files from
   CSS optimization, bringing the total size under 1MB and end up with 1 compressed
   AO CSS-file and 1 or 2 compressed non-optimized files?
 *  [luminsol](https://wordpress.org/support/users/luminsol/)
 * (@luminsol)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/large-css-file/#post-10482716)
 * Thanks for the reply. I did remove the largest one which was caused by Visual
   Composer. But unfortunately there’s no way to control the order of the non optimised
   CSS. In my case it breaks the layout of the site, as it needs to be loaded before
   Autoptimizer’s CSS.
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/large-css-file/#post-10482794)
 * arghh … 🙂
 * well, you could;
    * exclude one of more _other_ css-files * OR tell AO to inject
   the autopitmized CSS later using (a variation of) this code snippet:
 *     ```
       add_filter('autoptimize_filter_css_replacetag','inject_css_later',10,1);
       function inject_css_later($replacetag) {
       	return array("</head>","before");
       }
       ```
   
 * * OR (have your hoster) fix the root cause (litespeed config)
 *  [eprojectlibrary](https://wordpress.org/support/users/eprojectlibrary/)
 * (@eprojectlibrary)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/large-css-file/#post-10483597)
 * [@optimizingmatters](https://wordpress.org/support/users/optimizingmatters/) 
   i really dont know how to reach you. sorry totally different matter, my autoptimize
   plugin in having a conflict with some elementor page builder addon the javascript
   of the page builder does not work any more.
 * until i unchecked this setting option but my site optimization isnt what it once
   was.
 * By default Autoptimize is also active for logged on users, uncheck not to optimize
   when logged in e.g. to use a pagebuilder.
 * how to i resolve this issue please.

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

The topic ‘Large css 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/)

## Tags

 * [pagebuilder](https://wordpress.org/support/topic-tag/pagebuilder/)

 * 13 replies
 * 5 participants
 * Last reply from: [eprojectlibrary](https://wordpress.org/support/users/eprojectlibrary/)
 * Last activity: [7 years, 11 months ago](https://wordpress.org/support/topic/large-css-file/#post-10483597)
 * Status: resolved