220 thoughts on “Autoptimize”

  1. Pingback: Less is More Tweaking WordPress How Fast is FAST Mark de Scande

  2. Emmett

    Your plugin alongside with w3 total cache works great! I have a huge ecommerce site and this got me to a 3 to 4 second average page load on the home page which was tuff to do. I do have a problem with it though, it is conflicting with my woothemes, “Product CSV Import Suite,” extension. I have to disable Autoptimize in order to run a csv import or merge. Would be nice to be able to not have to disable the plugin to accomplish this. Thanks

    Reply ↓
    1. frank Post author

      here are some questions that (when answered) should allow me to understand better what is going on emmett;

      1. is this under /wp-admin ?
      2. do you have a PHP error (on screen or in php error log)? if so, which one?
      3. do you see javascript errors on the browser console? if so, which?
      Reply ↓
      1. Emmett

        Frank,
        Thanks for getting in touch with me. I just tried running it again, and this time it started working. So I’m not sure what happened the last time I ran this. maybe a server issue of slowness or something? Anyways, if i notice anything unusual happen again i will let you know.

    2. Diane

      Hi there,
      Thanks so much for the plug-in. Everything looks great after I activate except I look a google font for and get the default. How can I restore the special font? Thanks!

      Reply ↓
      1. frank Post author

        Where is the special font defined/ set? If you’re not sure you can briefly go back to non-optimized JS/CSS.

      3. frank Post author

        Great. I would advice, from a performance point of view, to keep JS optimization active and to exclude just those js-files needed for your font to show up, but doing so can be somewhat of a hassle if you’re not familiar with such matters.

    3. Sacramento Wordpress Dev

      I found that having the javascript optimized does not work well with WooCommerce, but if you turn off the option to optimize JavaScript and just optimize CSS and HTML it works great. I also recommend WP Super Cache over W3, I found it works better with WooCommerce sites and makes them run much faster.

      Reply ↓
  3. Renzo

    hello, the plugin (v1.6 or 1.7) Optimize my html, but do not do anything to my .css files. I have tryed many settings and still, the .css remain the same.

    Please advise.

    Renzo.

    ps: this is the site: cocobeanproductions.com

    Reply ↓
    1. frank Post author

      Your template does not have the type=”text/css” attribute for link-ed stylesheets (probably because they’re hardcoded, not added through the wordpress API). But apperantly type isn’t mandatory in HTML5 anyway, so I’ll look into changing this for version 1.7.0 which I’m working on now.

      Reply ↓
  4. gaston

    Hi! sorry for my bad english.
    In future add support for the plugin “quick cache”?
    The plugin noy work with this plugin.

    Reply ↓
      1. gaston

        Okey… again… sorry for my bad english.
        The problem is with de categories, once time the activated de “autoptimize” the categories dont access (server no encontred). Desactivated the plugin fixed problem in my categories, im asume this problem is with to compatibity whit the quick cache plugin.

      2. frank Post author

        Very weird, especially since Autoptimize does not “know” about categories. But I’ll install Quick Cache to see if I can reproduce and keep you posted!

  6. vijaya

    I checked both 1 and 2 below but no change. My website is http://www.oratechsolve.com

    1) Optimize CSS Code?

    2) Defer CSS loading? Normally CSS is loaded in the -section of the HTML, but for mobile performance reasons having it deferred can be better.

    Where else I have to make changes?

    Vijaya

    Reply ↓
    1. frank Post author

      As I try to explain in the FAQ-entry; just deferring CSS is not enough, you’ll have to split your CSS up in a (hopefully small) part that is essential for rendering the initial (above the fold) content, that one will have to be hardcoded in your theme’s style.css, with noptimize-tags around it. Only then the above the fold content can be displayed without additional resources being loaded. Removing blocking CSS can be done, it just is not really easy.

      Reply ↓
  7. Emmett

    Frank,

    Your autoptimize plugin crashed my site… Particularly the CSS checkbox.. If i had the main css checkbox checked, any new page would load as a blank (white) screen. autoptimize version 1.7.0 I was getting 93/100 rating on pingdom and now im down in the 60s and 70s. I was using this in conjunction with w3 total cache because yours was the only way to optimize css, that would work along side w3total cache. Because i couldn’t even use w3tc’s css optimize…. there’s wouldn’t work either and would crash my site. Now yours does also. I have had to disable your plugin until this can be fixed.
    There are no errors on the screen. Completely blank screen. checked developer’s console for errors and no errors. Completely blank. Thanks for your help.

    Reply ↓
    1. frank Post author

      This is probably due to the updated CSS minifier component which stumbles over something specific in your CSS. You can “roll back” to the old CSS minifier component by adding this in your wp-config.php;

      define("AUTOPTIMIZE_LEGACY_MINIFIERS","true");

      Curious if this indeed solves the problem!

      Reply ↓
      1. Emmett

        Frank,
        You are the few amongst many my friend! I admire someone who actually takes the time to help someone in an expedient manner!
        Yes that did solve the problem!!!
        Now, my ONLY worry is that, now i have your code hard pasted into my wp-config file….. What about when the next update happens??? Or any other changes are made, for example, updating a theme? or woocommerce? or anything…. see my potential worry here?!
        Thanks, Emmett

      3. frank Post author

        Emmett; I’m working on 1.7.1 and would like Autoptimize to fail less … visible. Would you be willing make a small temporary change to autoptimizeStyles.php to see if that “fixes” the white screen?

    1. frank Post author

      I guess the maps-code is a block of html/js that you entered there somewhere, just wrap it in noptimize-tags like this;

      <!–noptimize–><!–/noptimize–>

      and all should be well.

      Reply ↓
    1. frank Post author

      Hi Florian; don’t know the plugin, but when looking at the source code you’ll probably have to add this to the javascript exclude list: “jquery.js, responsive-lightbox”. Hope this helps!

      Reply ↓
      1. Florian

        Thanks for your support, but this did not help. Any other ideas? I’ve tried many combinations, but i didn’t get the right one…

      4. frank Post author

        Hmm, not sure what your blog is on, but you’ve got some plugin asyncing all your JS, that might very well … complicate things. I’ll try responsive images on my testblog today/ tomorrow to see if I can get it working (as excluding jquery + the responsive image js should really be enough). Hang in there Florian (you could run Autoptimize for CSS & HTML and have only JS deactivated in the mean time).

      7. frank Post author

        Well, js async is already in there by default (except when using “force javascript in head”).

        I do not believe inlining all CSS is a good solution; it might improve your mobile pagespeed score, but your real world performance will, in general, be worse as your CSS will be sent over the wire with each and every page request instead of once and used from cache for subsequent requests. Deferring CSS (i.e. having part of your CSS loaded after DOMContentLoaded) is possible however, but requires some work (cfr. the 3rd question in the FAQ).

  10. George

    Hi – just testing on a temporary website for now but have noticed that with Autoptimize none of my gallery images expand (usually clicking on one will blow it up larger) when optimizing Javascript and CSS.

    Is this a known problem? Great speed increase however no good if I an’t expand my images!!

    Cheers
    Georeg

    Reply ↓
  11. Plunder

    Hi Frank,

    Great plugin. I found it to be instantly better and simpler than W3 Total cache according to the speed results I got from Google Pagespeed Insights. However, after much testing I kept getting stumped by this message:

    Your page has 1 blocking CSS resources. This causes a delay in rendering your page.

    None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
    Optimize CSS Delivery of the following:
    http://www.domain.com/wp-content/cache/autoptimize/autoptimize_bc58667b6cb88384ab4685b895d9094e.php

    Is there any way I can improve on this?

    Much obliged.
    Gavin

    Reply ↓
    1. frank Post author

      Hi there Gavin;
      Normally (in the old days) CSS was supposed to go into the head-section of your HTML. Google now prefers it split up; the part needed to render the visible part of your page inline and the rest loaded after your page has finished loading. If you want to do that and if your into CSS, you can do the following;

      1. identify the essential CSS to style your average page (be strict, keep this as light a possible)
      2. minimize that using one of the many online minimizing tools
      3. wrap the minimized CSS between style-tags
      4. wrap style-block between noptimize-tags (see FAQ)
      5. put the resulting CSS in the head of your page (should be in the header.php file of your theme)
      6. check the option to defer CSS

      hope that helps,
      frank

      Reply ↓
      1. Plunder

        All good advice Frank. It might be too much of a nightmare though because the theme gets regularly updated so I’d have to repeat the process many times. I’d be prepared to try that though if I felt confident that I could figure out how to determine which styles are essential and should be made to be ‘inline’ and which are none essential.

        Is there a way for a none CSS expert to figure that out?

        I noticed that when I checked the ‘defer CSS’ my page would jump around on load because obviously those essentials page layout styles took a while to load. I assume doing it the way above would prevent that?

        Thanks in advance.
        Gavin

      2. frank Post author

        CSS Usage (for firefox) might help. This is not well-known territory for me either I’m afraid, but it will allow you to avoid the “flash of unstyled content”. You could create a child theme to avoid your changes getting overwritten with every theme-update.

  12. Pingback: PageSpeed Insights 优化网站 | 浮生记

  13. nancy aiello

    Hi Frank,

    Great plugin and it works also well with TR Cache (italytravelista.com) but due to sgare hosting we need to go cloudflare and add w3 total cache. Any advise on how to set autoptmize to work with w3? should we deactivate autoptmize before config w3 and reactivate it later?
    Thank you very much for your time and wish i was in France too, anywhere in france:-)
    Merci beaucoup and ciao.
    Nancy

    Reply ↓
    1. frank Post author

      Bah, l’Italie c’est pas mal quand-même, non? La Belgique par contre … ;-)

      Concerning W3TC; you could use the CSS/JS optimization in there, in which case you don’t even need Autoptimize. Alternatively you can run just the page caching of W3TC (as do many people) and continue to use Autoptimize for CSS/JS aggregation & minification.

      Hope this helps!
      Ciao,
      Frank

      Reply ↓

  14. Pingback: Wordpress Site Speed Optimization Case Study http://sweetbeats.com.au

    1. frank Post author

      thanks for the feedback Chris; that clearly is a bug, I’ll look into the code one of the following days and provide with a small fix (an improved regex in wp-content/plugins/autoptimize/classes/autoptimizeStyles.php probably)

      Reply ↓
    2. frank Post author

      OK, in wp-content/plugins/autoptimize/classes/autoptimizeStyles.php, could you replace
      if(preg_match_all('#url?\((?!data)(.*)\)#Usi',$code,$matches))
      on line 385 with
      if(preg_match_all('#url\((?!data)(.*)\)#Usi',$code,$matches))

      and see if that solves that bug?

      frank

      Reply ↓
      1. Chris

        Thanks for the fix Frank !
        that’s ok, i’ve just test now

        I still have an issue with jetpack (./plugins/jetpack/_inc/spin.js for the while)

        Uncaught TypeError: object is not a function autoptimize_855e83cae96c14423af04a2184937742.js:70
        (anonymous function)

        70: (function(root,factory){if(typeof exports==’object’)module.exports=factory()
        71: else if(typeof define==’function’&&define.amd)define(factory)
        72: else root.Spinner=factory()}

        Did you hear about this issue ?

      2. frank Post author

        No JetPack experience, so no idea I’m afraid. I would start with excluding spinner and the check what dependencies cannot be optimized either?

      3. frank Post author

        do you happen to know what JetPack-feature uses “spin.js”? I’ve got a testblog with JetPack (don’t want it on my proper blog, don’t like it), so I could have a look if you’d like.

  16. Chris

    I had the following to js exclude list to make jetpack work… if it can be usefull.
    jquery,spin,jquery.spin,tiled-gallery

    Plugin approved ! .)

    Reply ↓
  17. Jeffrey Junig

    I set up auto-optimize with super cache, expound theme– the page displayed without any formatting or colors. I then deactivated the plug-in; ever since, I cannot get the images to show up using internet explorer. I’ve emptied every cache I can find, turned off supercache (and deactivated it), dumped all the i.e. cookies, shut off cloudflare…. the images will display in firefox, but not in i.e.– at least not the ones from the posts I looked at with the plug in activated. I assume something is in the image headers now, that keeps them from displaying? Any way to undo that process?

    Reply ↓
    1. frank Post author

      Hi Jeffrey; Just checked in Internet Explorer 8; all your images are hosted on the wp.com-domain, there’s nothing WP Super Cache or Autoptimize could have done to change headers (as those are set by the wp.com-domain).

      Now the weird thing; in my test all images but one (the top one, with the graph) are showing. When switching to compatibility view, that image is visible as well. I think this is somehow related to the combination of HTML5-shiv & the CSS. Hope this helps, somehow.

      Regarding formatting of colors when using Autoptimize; you could optionally run AO without CSS optimization or you could exclude some of the CSS from being optimized?

      Reply ↓

  19. Pingback: Sélection des meilleurs plugins gratuits pour WordPress | blog.clickpanic.com

  20. Pingback: Jishnu 1.1.0 released - mattgadient.com

    1. frank Post author

      Hi Christian;
      Not sure; what options aren’t loaded? Can you copy/paste the entire blob of HTML/ CSS you use to load the fonts? Or provide me with a URL where it does work, so I can look at the code?

      frank

      Reply ↓
    1. frank Post author

      well, this really should work; imports are parsed, if they’re on an external domain (such as the one you’re using), they get added to the top of the stylesheet (since version 1.7.3 or .2, if I’m not mistaking). can you check in the aggregated CSS if the imports are there (assuming you are on the most recent version of Autoptimize)?

      Reply ↓
  24. Christian

    Hmm, ok, then this can’t be a solution ;-)

    I’m not so sure how to get the infos you need. That’s why I use a plugin for this..

    Could this be a timing problem?

    first loaded css starts with:

    @import “http://fonts.googleapis.com/css?family=Fjalla+One:400,700,400italic”;
    @import “http://fonts.googleapis.com/css?family=Mouse+Memoirs:400,700,400italic”;

    but takes >700ms to load, meanwhile the other css are loaded..!?

    btw: Can I use cachify plugin side by side? is this useless?

    Reply ↓
    1. frank Post author

      What happens when you enable CSS Autoptimization? The import-statements should be at the top of the stylesheet for media=all, are they? If not; are they anywhere else? If they are; can you check in your browser’s console if there’s an error-message which explains why the fonts aren’t loaded?

      Regarding cachify; haven’t tested with that plugin specifically, but it’s a page caching plugin, right? In that case; it’s far from useless, as this will avoid the overhead of having Autoptimize being activated on each page load, linking to the aggregated CSS/JS immediately instead.

      Reply ↓
  27. Christian

    All i can say is that the fonts aren’t shown after CSS-Optimization. I don’t really get your question, as I don’t see more than you in the screens. Do you want to login to my site?

    Reply ↓
    1. frank Post author

      For those having the same problem; the reason was the fonts were referenced in a css-file served by PHP, which will stop Autoptimize from aggregating it but the child theme CSS was aggregated and as such loaded before the font-CSS. So when the child theme CSS was applied, there were no fonts yet to render. This was solved by excluding the child theme CSS from being autoptimized as well.

      Reply ↓
  28. Jen

    Loving this plugin. It has drastically sped up my site. However, it is breaking a few plugins and not allowing inlinkz linkies to run if I have Optimize JS clicked :( How can I make them work and still optimize the JS?

    Reply ↓
    1. frank Post author

      I don’t know “inlinkz linkies”, but it’ll be based on javascript in your HTML. If optimizing that breaks it, you should exclude that JavaScript from being autoptimized in the autoptimize settings screen.

      Reply ↓
  29. Panson

    After update to Autoptimize version 1.8.1,it caes a bug,everytime I click to http://mydomain.net/wp-admin/update-core.php ,it case an error on my browser shows below：
    Internal server error
    This website might have encountered a technical problem and cannot fullfill your request.
    please try again later.
    Error code 500(Internal Server Error)

    Once I uninstall the plugin,it will be right as usual.
    Could you fix it? thanks!

    Reply ↓
    1. frank Post author

      that is very weird panson, as autoptimize in no way intervenes with update-core.php. I did a quick check on my blog (this one, here) and I can’t reproduce this behavior. Can you check your PHP error-log for anything relevant?

      Reply ↓
      2. frank Post author

        That depends on your PHP-configuration (php.ini). Your hoster should be able to tell you where to find that file.

  30. iMadalin

    Hello.

    the .htaccess that is created in %/cache/autoptimize/.hataccess doesn’t works on apache 2.4

    You’re setting “deny” for php files for apache 2.2 and it’s not working on apache 2.4 (well, on kind of strict hosting).

    that line should change to “Require all denied”.

    You could make a test before creating the file to see if it’s httpd 2.4 or 2.2 and use the corresponding config line.

    Additional info here: Apache 2.4 migration guide from 2.2″.

    By the way, I’ve been enjoying your plugin for more then a year and I’m very happy with it.

    Reply ↓
    2. frank Post author

      Did some reading, this little hack from StackOverflow should work:
      # Apache 2.2
      <IfModule !mod_authz_core.c>
      Satisfy Any
      </IfModule>

      # Apache 2.4
      <IfModule mod_authz_core.c>
      Require all granted
      </IfModule>

      A pity the module didn’t get renamed as that would have allowed for a less … hackish approach.

      This will go in 1.8.2, I’ll ping here when a test-version is available.

      Reply ↓

  31. Pingback: The Accidental Website Bloke’s Site Performance Toolkit | davidjwbailey dot com

  32. Pingback: 30+ Awesome Wordpress Plug-ins - The Daily Michael

  33. Pingback: Wordpress site Versnellen met 4 Gratis Plugins | Hosting Vergelijken

  35. Pingback: Optimizar la velocidad de carga de WordPress (para tener contento a Google) | Un lugar en el mundo…

  36. Glyn

    Recommended. The plugin worked well for me – improved my Google score from 73% (amber) to 86% (green). I also tried some Caching plugins from other publishers, but none made any difference which surprised me because I know the css and html is not as efficient as it could be.

    Reply ↓
    1. frank Post author

      Autoptimize has no impact on the backend, it’s only active when rendering articles in the frontend, so there must be something else going on there.

      Reply ↓
      2. frank Post author

        Works OK for me and really see no way how AO could interfere in saving articles.

        Maybe if you would find something relevant in your phperror-logfile, else there’s no way for me to help you. Sorry mate.

    1. frank Post author

      No experience with that, but -when looking at the HTML of your site- excluding “www.googletagmanager.com” from JS optimization should do the trick?.

      Reply ↓

  40. Pingback: Il plugin Autoptimize blocca il Google Tag Manager

    1. frank Post author

      You can do that using the API Makuna, there’s example code for that in /wp-content/plugins/autoptimize/autoptimize_helper.php_example.

      Reply ↓
      1. koren

        Hi,
        Can you please explain how to exclude a single page (woocommerce cart page) from being optimized?
        The optimization is breaking the Paypal digital goods express checkout completely.

        I have looked at the example at wp-content/plugins/autoptimize/autoptimize_helper.php_example but i don’t understand how to use it or where to put it.

        Thanks in advance.

      2. frank Post author

        Sure Koren;

        1. open autoptimize_helper.php_example
        2. copy this part into your theme’s functions.php (assuming the page you want to exclude is woocommerce-cart-page.php):
          add_filter('autoptimize_filter_noptimize','my_ao_noptimize',10,0);
          function my_ao_noptimize() {
          if (strpos($_SERVER['REQUEST_URI'],'woocommerce-cart-page.php')!==false) {
          return true;
          } else {
          return false;
          }
          }

        And that’s it, it should work immediately. Alternatively you could make a small plugin in the plugins-folder, advantage being that you wouldn’t have to worry about theme updates.

        hope this helps,
        frank

  43. Rene Simonsen

    Just installed the plugin and now my site is not avaliable ;-(

    What can i do to make it work again – i uninstalled and deleted the plugin and that didn’t help.???

    Reply ↓
    2. frank Post author

      Empty W3 Total Cache’s cache and all should be fine Rene. Autoptimize itself has no impact after it is removed.

      Reply ↓
  45. Joost

    Hi Frank,

    I just installed your plugin and it really improved by website speed performance thanks for that!
    I would like to optimize the CSS but when I do that the layout of the theme will brake.

    I tried to exclude CSS but i’m not sure if im doing it the correct way… I used firebug to detect the CSS which i wanted to exclude: style.css, bootstrap-responsive.css, bootstrap.min.css and responsive.css but this doesn’t really help.

    Any tips? Thanks!!

    Reply ↓
      1. Joost

        Hallo Frank,

        Thanks for your help! I’m using the neighborhood theme from swift: http://neighborhood.swiftideas.net/
        It seems that the the text is getting bigger or something. I think dramatized a bit in my previous post it’s mainly the text that is bigger than normal.

        Here are some screens:
        Before above the fold: http://s000.tinyupload.com/?file_id=30180788822513137087
        Before footer: http://s000.tinyupload.com/?file_id=48700573794316937057

        It happens when I mark “optimize CSS code” (rest was already checked in screens you see above);
        http://s000.tinyupload.com/?file_id=14804446065452035958

        After above the fold: http://s000.tinyupload.com/?file_id=00982549684955656718
        After footer: http://s000.tinyupload.com/?file_id=73352331006830763512

        I think I need to exclude some .css file but not sure which one and how.
        Any ideas?

        Bedankt!
        Gr. Joost

      2. frank Post author

        Not an easy problem; best would be to use the inspector in your browser’s developer console to compare the properties of e.g. one tab in the navigation before and after optimization (tip: you can enable it and then one a per-page-base disable it by adding ?ao_noptimize=1 to the URL). the difference should tell you something about what is going wrong. It is possible that you’ll find a relevant CSS-related error logged in the developer console, in which case the above “investigation” might even not be needed.

  46. Joost

    Hi Frank,

    Thanks for getting back.
    Couldn’t find anything when using the inspector tool.

    I did some theme modifications in a Custom CCS box on the backend of the theme could thise cause the issue? The customization I made I added in the Custom CCS box so they won’t be effected by a Theme-update. They are not hard-coded in the CSS file directly.

    It seems that it shows the orignal (not modified) css…

    Best,
    Joost

    Reply ↓
    1. frank Post author

      I would expect the custom CSS box (is that a plugin?) output is added as inline javascript. you should be able to exclude that by adding a string that is in your custom CSS (I guess you could even put such a string in remark in the CSS).

      Reply ↓
  47. Joost

    Oh this is strange; Page speed shows a 66/100 mobile and 77/100 mobile when I check optimize css. Without optimize css checked it gives me 77/100 mobile and 87/100 maybe I just don’t need my css to be optimized?

    Best,
    Joost

    Reply ↓
    1. frank Post author

      hmmm, you should compare the detailed remarks between pagespeed with and without CSS optimization. there’s quite a lot of CSS in there, so optimizing that should be better then not optimizing :-)

      Reply ↓
      1. Joost

        Hi Frank,

        Haha, I had the same tought! Thanks for your reply.
        The Custom CSS box is just a box where I can fill in the CSS it’s in the general theme options: http://s000.tinyupload.com/?file_id=82202394607733146805

        I found out that it is loaded in a custom.css file but that’s probably linked to the main css
        If I find the string how can I exclude it? Can you give an example how to put it in the exclude field within Autoptimize?

        Thanks again for you help!
        Joost

      3. Joost

        Hi Frank,

        Thanks again.
        I’m not sure what is happening and how it works. I asked it on the support formum of the themebuilder.
        They told me that it’s added in the head section of the site.

        Not sure how or what, I’m going to ask if they can be more specific.
        Best,
        Joost

      4. frank Post author

        OK, now I found it; “in the head section” indeed means the custom CSS code is inline, in your HTML. You can exclude it by adding “User Custom CSS Styles” to your CSS exclusion list (preceded by a comma).

  49. Marcello

    Hi Frank, suddenly Rev. Slider disappear from mine homepage. How can I manage this situation? Should I remove Autoptimize? Thank you :-)

    Reply ↓
    1. frank Post author

      you could remove autoptimize (but you don’t really want to do that, do you?), you could disable JS optimization (I wouldn’t do that) or you could configure autoptimize for rev. slider to work. to do so, you can try with “force in head” or you could exclude the javascript that rev. slider uses (and maybe jquery as well as that probably is a dependancy)?

      Reply ↓
  50. Dan

    Hi there, I just installed autoptimize to help decrease loading time, but it actually increased my load time from 2-3s to a 28s – how is this possible? I’m using WP 3.9 + Woocommerce Theme + Rev Slider. The number of request did drop to 75 from 102 which is a good thing, but my site is loading much slower now after installing the plugin…could it be I do not have my autoptimize setting correct? Also I just installed your recommendation of W3 Total Cache – not sure how this ties in or how to run it yet. Please help. Thanks

    Reply ↓
    1. frank Post author

      28s is unacceptable, clearly. have you tried switching off javascript optimization or css optimization? any difference? you might also want to add “nonce, post_id” to the list of excluded javascript, that might help as well (you’re in that case excluding all inline JS which has those strings, which typically breaks Autoptimize’s caching mechanism, more info on that topic here)

      regarding W3TC; doesn’t really matter if it’s that or another (I use WP Super Cache), but you do need a page caching mechanism. as far as W3TC is concerned; do not use it’s minifying features if you already use Autoptimize.

      If you can provide me with the URL to your site, I can have a quick look to see if I can figure out what is going on.

      Reply ↓
  51. Dan

    when I activate the plug-in it causes rev slider issue – 2 sets of navigations.
    when javascript is turned off and css is turned on, load time varies from 3.50s-60s
    when javascript and css are both turned off, load time varies from 22s-160s
    when javascript is on and css is turned off, load time varies from 25s-60s

    jQuery.js,nonce,post_id – excluded scripts, 60s
    jQuery.js,nonce,post_id,inline.js, 10s-60s
    nonce,post_id,inline.js, 9s-26s

    when I disable the plugin, it loads much faster but not fast enough – people have stated that it is slow.
    url: http://jessicasdesigns.net/

    thanks

    Reply ↓
    1. frank Post author

      I see 2 problems (or maybe 3, but let’s not blame the server/ hoster for now ;-) );

      1. you have W3TC enabled, but you did not seem to configure it to do page caching, which means your page is rebuild at every request (hence the slowness even without autoptimize). solution: enable page caching
      2. revslider (I think) is adding javascript which is different on every pageload, which results in autoptimize having to redo all (cpu-intensive) minification time and time again. solution: add “.owlCarousel” to the (comma-seperated) exclusion-list for javascript

      Do that, re-test and let’s see if anything else needs tweaking.

      Reply ↓
  52. Dan

    I enabled Page Caching and the page cache method is Disk: Enhanced. Load time varies from 1s-60s. Can you check it on your end as well?

    BTW, I really appreciate the help! Thank you.

    Reply ↓
  53. Dan

    Also, I forgot to mention that I excluded .owlCarousel for javascript as well. Here is my full javascript exclusion-list below.

    javascript exclusion-list:
    s_sid,smowtion_size,sc_project,WAU_,wau_add,comment-form-quicktags,edToolbar,ch_client,nonce, post_id,inline.js,.owlCarousel

    Here is a screenshot of my autoptimize settings:
    https://www.mediafire.com/?hq66f262c20lbi6

    Reply ↓
    1. frank Post author

      Performance indeed is way better. Those highest load times still surprise me, seems like the javascript-optimization is still taking too long. Can you disable W3TC page-caching to see if there still are problems with cache-busting values in the JS?

      Reply ↓
  54. Dan

    I currently have W3TC page-caching disabled, it appears to be loading slower now on my end. Please check it on your end as well.

    Reply ↓
  55. Dan

    I just looked at the site and I found a problem… when I add “.owlCarousel” to the javascript exclusion-list, it destroys the layout of the site (product images do not appear online) that’s why the page started loading faster upon your last review – less pictures, less load time. I have removed “.owlCarousel” exclusion.

    Also, there is something causing the double navigation again as well.

    It’s back to the drawing board…I can provide login details for you, if you like. just let me know.

    Reply ↓
    1. frank Post author

      hmmm, excluding owlCarousel also makes sure autoptimize can reuse aggregated JS between page loads. if it is not excluded, Autoptimize will have to re-aggregate and re-minify on each seperate request, leading to longer time to first byte for your HTML, visitors that will re-request aggregated JS on every new page they request and a huge cache-size. You will probably need to either “force JS in head” or exclude jquery (and maybe some jq plugins) while excluding owlcaroussel. But for sites with lots of JS (and esp. jquery) optimizing JS can be … challenging.

      but do provide me with a login (futtta at gmail dot com), I’ll be happy to take a look!

      Reply ↓
  57. Bryan

    I thought you might want to know that there is a conflict with this plugin and Headway themes slider, the Meta Slider plugin and Parallax Slider plugin.
    In all three cases you will get a blank area where the slider should be. Turn off Autoptimize and the sliders magically appear. Turn it back on and they are gone.

    Reply ↓
    1. frank Post author

      That’s a configuration issue Bryan, you’ll have to exclude the JS needed by the sliders from being optimized. No magic involved ;-)

      Reply ↓
  58. Alison Williams

    I’m having a weird issue… When I have autoptimize activated, my page speeds read as much better, but my site never seems to load when I’m on it. The screen just stays white. Can you help me? I’m not great with code, etc, as I’m self-taught, so really detailed instructions help me tons. Thank you!

    Reply ↓
    1. frank Post author

      sure; a white page means something is broken, so you might want to try this;
      1. I see you’re already using WP minify, there might be a conflict, so try AO with minify temporarily disabled?
      2. There might be a problem the CSS or JS optimization specifically, try with HTML only, CSS only and JS only first and use that to identify what is causing the “white page of death”
      3. If based on (2) we know what is broken (my bet is on CSS), we can try to hunt down the specific JS or CSS-file and try to exclude that.

      hope this helps,
      frank

      Reply ↓
  59. Arturo

    Hi!
    This brakes the customization style of my site., Hypperlinks colors. How do I fix this?

    Reply ↓
    1. frank Post author

      In general some trial & error may apply (see the FAQ and specifically the troubleshooting part), but I can’t tell what you should do without looking at your site Arturo :-)

      Reply ↓
  60. Shawn

    I added Autoptimize to by site to fix some speed problems. However, I just noticed that it took my ads from the ad server Conversant and removed them from their widget spots on the side and moved them under my blog. I disabled Autoptimize and it fixed the problem. I saw that you mentioned that most problems could be fixed. Is this one of those known problems that can be fixed with tweaking?

    Reply ↓
    1. frank Post author

      This is not a known problem, but it most certainly can be fixed. As described in the FAQ (which really is worth your time), Autoptimize allows you to indentify javascript which cannot be optimized. Looking at your site I think adding “vclk_options” to the comma-separated list of not to optimize JS could be enough.

      Reply ↓

  61. Pingback: Build-a-Blog: 3 Must-Have WordPress Plugins to Help Speed Up Your Site - creative geekery

  62. Dragos

    Hi,

    I hope you can help me. Everytime I run google page speed test is telling me that a .php file under the autoptimze folder is loading above the fold.

    This is making my website load slowly on mobile phones.

    Could you please tell me how I could move that file or do something about it so that it loads faster or not above the hold?
    Any help is much appreciated.

    Regards,

    Dragos

    Reply ↓
    1. frank Post author

      Hi Dragos;
      If you inline your CSS and if the JS not forced in head, this message will not be shown any more.

      Hope this helps,
      frank

      Reply ↓
      1. dragos

        Please escuse my ignorance but which css are you refering to?

        I know about style.css that helps to load all the css from an external file basically.

        Regards,

      2. frank Post author

        Well, if you enable the option “inline all CSS”, Autoptimize will try to put all CSS (style.css and if on the same domain all imports) inline.

  63. nicole

    Hi! I installed this plugin on 3 sites and it was great. It improved the performance a lot. I just realized though that it caused all the images in the posts to disappear. After disabling all plugins and enabling them one by one I realized that this plugin is what caused the images to disappear. I would love to keep using it but I have an image based site so I need users to see my images. The images disappeared on all 3 sites after activating the plugin. Any idea what could have caused this or how I can solve it?

    Reply ↓
    1. frank Post author

      hi nicole;
      you’re probably using a lazy load plugin, which uses javascript to load images. you’ll need to identify that JS and exclude it (and possibly also jquery) from being optimized.

      hope this helps,
      frank

      Reply ↓
      2. frank Post author

        In the HTML source. But if you give me a URL, I’ll have a quick look.

        You could alternatively also try with options “force JS in head” and/ or “look only in head” enabled, which (depending on the javascript that doesn’t like to be optimized) might solve the problem as well as per the “troubleshooting” paragraph in the FAQ.

    1. frank Post author

      Hi Nicole;
      I would try to add “jquery.js” and “lazy-load” to the (comma-seperated) JS exclusion list.

      Alternatively you could try with “force in head” (and maybe “look only in head”).

      hope this helps,
      frank

      Reply ↓
  65. David

    Hello!
    Foremost, thank you for the plugin. With your plugin I was able to reach my target page speeds but it also disabled my disqus and navbar navigation. Certainly, those two affect my speed, and disabling them would naturally improve my speed but is there a way to keep them while also using this plugin?

    Thank You!
    Dave

    Reply ↓
    1. frank Post author

      is there a way to keep them while also using this plugin

      Sure David! First of all you could keep HTML & CSS optimizing active, while disabling JS optimization. If you do want JS optimization, you could try switching on the try/catch wrapping (under advanced settings), this will probably fix the Disqus-thingie (which works OK in my previous tests). An easy thing to try is enable “force in head” and/ or “look only in head”. If those don’t work, you’ll have to try to deduce what javascript is inserted by navbar and add that to the JS exclusion-list. Most of the above (and some more) is explained in the FAQ, which is definitively worth a read ;-)

      hope this helps,
      frank

      Reply ↓
  66. George

    Using your plugin I’m getting an error on the console:

    Uncaught ReferenceError: jQuery is not defined jsfiles.php?ver=3.9.1:903
    Timeout Happened. Page view fired autoptimize_820e84b51e1dcf7c6f07bf9bb255ecaa.js:49
    Page Revisit autoptimize_820e84b51e1dcf7c6f07bf9bb255ecaa.js:53
    Session Active

    Also, after optimizing js files, in IE, the site didn’t work anymore. Any suggestions?

    Reply ↓
  67. Neil

    The plugin works 99% superbly and has decreased page load time BUT there are two lines of css that remain with the message “Eliminate render-blocking JavaScript and CSS in above-the-fold content
    Your page has 2 blocking CSS resources. This causes a delay in rendering your page.”

    Is there a way I can resolve this:
    Here they are:
    http://www.londontheatre1.com/wp-content/cache/autoptimize/autoptimize_8ab1b75993fd7f7f8a074c961579ec3a.css

    http://fonts.googleapis.com/css?family=Lato%3A300%2C400%2C700%7CPT+Sans%3A400%2C700&ver=2.0.2

    Many Thanks

    Reply ↓
  68. Hardik Pandya

    Hi There !!
    I have just started with the field of blogging. I’m Frosty is my new blog. I’m Quite conscious about my “Site Performance”. so i found that minifing CSS, Javascript can improve my site’s performance, so i have Googled and found About “Autoptimize”, Thanks for plugin. it have optimized my site performance damn good !!

    BUT my problem is After installing this plugin. Submenus of site are not displaying well, i am using “MesoColumn” Theme with WordPress 3.9.1. Please Test and Fix The Problem With SubMenus of “Primary Menu” in MesoColumn or tell me how to fix that.. It only displays good when i “Uninstall” this plugin called “AutOptimize”. Desabling this plugin doesn’t even working for me. Please reply Quick, For Good performance of my site I can not Afford this Buggy Sub Menu GUI.
    My Blog : I’m Frosty

    Reply ↓
    1. frank Post author

      Had a quick look at your site; seems sub-menus are CSS-based. Start of with using AO with just HTML & JS optimization, making sure all caches are flushed (e.g. Cloudflare) while trying to configure AO. For more info on configuration, I can recommend reading the FAQ ;-)

      Oh, and I would also disable W3 Total Cache debug output, should make a difference as well :-)

      Reply ↓
  71. Ben Herzog

    Hi. Just letting you know that the ,,nextgen gallery plugin,, doesnt work with autoptimize. I had the deactive your plugin to get nextgen working again

    Reply ↓
    1. frank Post author

      Based on the screenshot, it seems the fonts are downloaded, correct? And the problem is “just” the font weight? Seems like a small conflict in the CSS, due to the aggregation. This sometimes happens and in general an “!important” can fix that. My approach generally is to enable CSS optimization and compare styling in Firefox’ developer tools between http://your.url/ and http://your.url/?ao_noptimize=1.

      Hopes this helps,
      frank

      Reply ↓
      1. Petar

        Thanks. Adding !important, totally dismisses the Open Sans font, and uses a generic “sans” font. When comparing the optimized and unoptimized styles, there’s is no difference at all.

  73. Petar

    I’ve read several problems with the google fonts not loading correctly. Is there a fix, a proper way to include them without having problems?

    Reply ↓
    1. frank Post author

      Well, in general do as WordPress themes do, as seen in e.g. twenty fourteen;

      <link rel='stylesheet' id='open-sans-css' href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=3.9' type='text/css' media='all' />.

      I’ve test extensively with Twenty Fourteen and have never seen problems with that approach.

      Reply ↓
      1. Petar

        I was able to locate the problem. There is interference with the admin bar on top. When seeing the page as a regular user, the fonts are ok. I don’t know why is this happening.

        Cheers

  74. Dennis

    First, thanks for your plug in.
    Two things. One of the people who gave it a 5 star said that it automatically solves all js and css problems. this issue has persisted;

    Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
    Optimize CSS Delivery of the following:

    http://growtallerwithshinlengthening.com/…ize_dadfbc2970fd6f0759fac20a3b3a8668.css
    http://growtallerwithshinlengthening.com/…ize_fa4579dffe357511db4f80df4c2d88fc.css

    Secondly, my social icons are jumbled after activating the plug in. non is visible. Any advise ?

    Reply ↓
    1. frank Post author

      the faq has information on both “blocking css” (hint; inline css might help) and “troubleshooting” (hint; exclude the social icons plugin js) Dennis.

      hope this helps,
      frank

      Reply ↓
  75. Jetgwd

    Bij de Javascript optie:
    is het daar mogelijk om ze alle 4 aan te vinken? optie 2 en 3 lijken mekaar tegen te spreken. Maar anders breekt de site.. Ik hoor heel graag of ik hier zo mee verder kan gaan, wil echt graag dit gebruiken. Werkt super enorme verbetering.

    Reply ↓
  76. Dennis

    Okay, thanks for reply.
    when i un check optimize css the social icons work perfect but my page speed falls slightly. how do you think i can eliminate the css for social icons. leaving the rest of css optimized.
    Thanks for your generous help.

    Reply ↓
    1. frank Post author

      In that case I’d try excluding “simple-social-icons/css/style.css” (or just “simple-social-icons”) from CSS optimization?

      Reply ↓
  79. Toma

    Hi!
    Could you please help me urgently? I downloaded Autoptimize and enabled the plugin to generate uri for images. The problem now is that my page cant load any images and I cant navigate anywhere. Can you please help me? What is wrong and how do I go back to how it was?

    Reply ↓
    1. frank Post author

      You could;

      1. disable and remove autoptimize
      2. keep autoptimize, disabling js optimization (you probably have image lazy loading and a js-based navigation)
      3. keep js optimization, going through the troubleshooting steps in the FAQ

      Hope this helps,
      frank

      Reply ↓
  80. DON NIAM

    Hello and thanks for the plugin. I am using autooptimize and it speeded up my site about 5 points. I had to uncheck the optimize java script button. It removed everything from content area and my titile and sub title. I am using it on a few different themes and sites and seems to be workiing on all. Always looking to speed up my sites!
    Thank you,

    Reply ↓
    1. frank Post author

      You probably use an infinite-scroll-type of plugin or something else that includes javascript to load your posts, excluding that javascript-file from being optimized (and probably jquery and/or ‘force js in head’) should allow you to run with optimized JS as well.

      frank

      Reply ↓
  81. Hardik Pandya

    Hello Frank !!
    Just Transferred my Blog To Blogger : I’M FROSTY
    That AutOptimize Plugin Was Working Well For me But was Problem with Web Hosting Provides..
    May Be I Plan To Setup Blog using WordPress in Future. I’ll surely used this plugin..\
    I Liked It Man !! You Rock !! :-)

    Reply ↓
  82. Hazlo

    Hello Frank,
    I’m having a trouble with the slide on my landing page which worked good till now, together with Autoptimize (even with the Optimize Javascript Option checked).
    Today updated the slide and changed some images and the page is unable to load it anymore.
    I’m obliged to uncheck “Optimize JavaScript Code” to let it work.
    I tried the different options and possibilities in the Optimize-JS box without success.
    I also tried to write it in the “Exclude scripts from Autoptimize” box. No way!
    Didn’t I write the name of the plugin properly in the box (I tried “slideshow” “slideshow_jquery” and even “slideshow_jquery_image_gallery_script”)?

    Any idea?
    – WP 4.0 with a twentytwelve child theme. Name of the plugin : “Slideshow” by Stefan Boonstra. –

    Sorry if the topic came out already!
    Many many thanks in advance.
    Hazlo

    Reply ↓
  83. Hazlo

    Hello Frank
    I think i finally found it.
    I excluded jquery from js optimization and the slideshow worked again.
    But I still don’t know why it worked till now and not anymore.
    Maybe WP 4.0?
    So ok It works! And your plugin makes my page loads much faster.
    Thanks a

    Reply ↓
    1. frank Post author

      So the problem was with a WP SEO update, which introduced some freaky script (type “ld/json”) which broke optimized JS. I pushed out 1.9.1 to hard-exclude that block of inline code (identified by string “potentialAction”). Thanks for your help Hazlo!

      Reply ↓
  85. Hazlo

    Hello Frank,
    Thx for pushing your release 1.9.1 so fast!
    Another little question?
    I recently found a theme I like for the mobile version of my site but I had to forget it because the Google Insights note decreased. And this was due to … the google fonts used by this theme!
    And the “Inline all Css” box is already set to “on”.
    So I wonder how to defer the loading of those font.googleapis css?
    Any idea?
    Thank you!
    Hazlo

    Reply ↓
    1. frank Post author

      Bonjour Hazlo!
      Google fonts (and all downloadalble fonts) always slow down a site. If you would defer loading those, you’d get the weird effect of first seeing one font (the fallback browser-native one) and the second Google one after half a second (or more, esp. on mobile). So my opinion; don’t use custom fonts. So if I were you, I would create a child theme and in it’s functions.php dequeque the Google Fonts style. But AO doesn’t do that :-)

      frank

      Reply ↓
      1. Hazlo

        Thanks Frank for your early Sunday answer!
        I understood how to dequeue a web font.
        I’d like to explore the path of enqueuing the same web font then, but locally hosted instead of getting it everytime from Gooogle api’s or whatever.
        I got from your test that it was slightly worse in performance terms than using the basic wp font but I’d like to try it anyway.
        So a last question and I won’t bother you with this topic (since it does not directly concern AO): Would you know about a detailed tuto for enqueuing a local hosted font? I could not find it on stackexchange (maybe I did not look for the right tag?)

        Nogmaals bedankt Frank!
        Hazlo

  87. wout

    Hey Frank,

    Ik heb gemerkt dat je plugin een conflict veroorzaakt met de plugin UK Cookie Consent. De UKCC plugin toont een bar onderaan of bovenaan de pagina waarop staat dat de site cookies gebruikt. Wanneer AutoOptimize aanstaat, verschijnt de bar echter niet.

    AutoOptimize staat hiervoor bij mij jammer genoeg gedeactiveerd. Denk je dat dit te verhelpen valt?
    Alvast proficiat met de goeie plugin!

    groeten,
    Wout

    Reply ↓
      1. wout

        Klopt, ik heb het ondertussen ook getest en het lukt inderdaad als ik de optie “De CSS buiten de niet mee optimaliseren. Kan helpen om de cache-omvang te beperken.” aanvink.

  88. Joost

    Hi Frank,

    In the recent past you helped my out setting up Autoptimize for my website which really speeded up my site. I still experiencing that the site is performing below average.

    I’ve read alot about setting up a CDN to improve website performance but it’s not that easy to set up when you have a SSL cert. installed on your site (+ it’s quite expensive for some kind of reason when you have a SSL cert, not hosted by CDN provider). I’ve contacted my host to see if they could help me out a bit and they told me I’ve got a lot of scripts CSS/JS and it takes some time to deliver the dynamic content…

    Besides that they said that a CDN wouldn’t help much for these kind of problems.

    I did run my website through Google Page Speed test, and got a lot of “bad” response by google. I need to compress some images (which I will do) but still get suggestions like:
    – minify Js
    – minify CSS
    – minify HTML
    – Use browser caching (I’ve got WP Super Cach installed)

    I don’t understand why google is giving me those suggestions because I use WP Minify/Autoptimize and WP Super Cach.

    Here a screensnap from my current settings of Autoptimize: http://monosnap.com/image/46jFVptPj2M22J80cZGB8HhiptSfEh#

    Any idea what is causing the bad google rating an slow response time of the site?

    I thought I write you in Engish so other people can read along.. ;)

    Thanks again.

    Best,
    Joost

    Reply ↓
    1. frank Post author

      Hi Joost; main problem is that your CSS & JS still is “render blocking”.

      For JS the reason is that you (had to) force(d) JS in head and that you had to exclude certain JS from being optimized. JS is only non-blocking if it is deferable (i.e. at the end of the HTML with flag defer set). To accomplish that, you would have to redevelop your theme not to rely on jQuery and jQuery-plugins to the same extend (or in the same way). The JS that was excluded from optimization is the reason for the “minify JS” advice.

      CSS render blocking something else; you could “inline” or “inline + defer” your CSS, you can find more info on that here.

      But I would start with the image optimizations, if I were you :-)

      Hope this helps,
      frank

      Reply ↓
  89. Wolfgang

    Hello Frank,

    I just want to let you know that I think that Autoptimize is a great plugin and it works well with wp Super Cache.
    When checking my site with Google page speed service it told me that the plugin is that none of my content above the fold could not be rendered, so I checked thew element.
    Here it is.
    https://www.lifenaturalremedies.com/wp-content/cache/autoptimize/css/autoptimize_5fee879024c5a866f83148a6547d3060.css
    I thought that I should let you know this, and perhaps you have a work around for it.

    Thank’s again for the plugin.

    Wolfgang

    Reply ↓
    1. frank Post author

      Evening Wolfgang;
      CSS by default is render blocking and so is the CSS added in AO’s default configuration. You can however change that by using “inline” (easier) or “defer&inline” (better). There’s more info on this in the FAQ.

      Hope this helps,
      frank

      Reply ↓
    1. frank Post author

      that’s an autoptimize-file that somehow got deleted Don. can’t say what is causing this (but ao never removes files and the other two won’t touch those files either). best way to solve this is to clear your wp super cache’s cache, this will force the page that is referring to that js to be rebuilt, which in turn will trigger AO to recreate that file.

      hope this helps,
      frank

      Reply ↓
  91. Don Osborne

    Hi Frank! Quick question for you — I am running a membership site plugin (WishList Member), and I’d love your thoughts about autoptimize interacting with it. The membership plugin polls the wp usertable as the user makes requests of the site for pages / posts to determine permissions. As a result, I can’t use any caching plugins, and I exclude these pages from my CDN via regex. This keeps the membership plugin operating correctly.

    What do you think the impact of autoptimize might be on a plugin that is this ‘heavy’? Will I need to exclude all the membership pages from autooptimize? Thanks!

    Reply ↓
    1. frank Post author

      Hi Don.
      If a page cannot be cached by a page caching plugin, there is some extra overhead for Autoptimize, as it will for every request of such a page start aggregating all CSS/JS and will then check if a cached optimized version exists (vs AO not being triggered at all for a page is served from cache). Other then that, as the CSS and JS probably are not affected by permissions, I don’t think there is an impact really.

      Hope this helps,
      frank

      Reply ↓
  92. Chris Bunting

    I didn’t realize you were the author when I replied on the other post.. But thank you for Autoptimize.. This is the best minify plug-in I’ve ever used! I will never switch!

    Chris

    Reply ↓
  93. Joe

    Really like the plugin, it has helped my site. I have a similar issue with Yet Another Related Plugin loading below the footer. I realize the fix is to exclude the script but I’m a novice and afraid to break my site again. What is the exact script I would enter to exclude YARPP?

    Joe

    Reply ↓
    1. frank Post author

      HI Joe;
      YARRP does not have a script in the page, problem is likely CSS. You could try adding “styles_thumbnails.css.php” to the comma-seperated CSS exclusion list, but I doubt it’s being aggregated at all (as it’s a .php-file, which AO does not take into account). In that case you might have to play with the CSS itself, adding !important to specific styles, to make sure they’re not overruled.

      Hope this helps,
      frank

      Reply ↓
  94. TIanyi

    This plugin is amazing! It saved my day! I was messed up by some other plugins which function is minify and combine js and css files. They are too complicated and ineffective.

    Is there any plan for i18n? I am eager to help for Simplified Chinese version. Contact me if you do have a plan.

    Thank you soooooo much!

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *