Title: Some pages are broken after deferred css. Maybe Javascript trigger?
Last modified: August 31, 2016

---

# Some pages are broken after deferred css. Maybe Javascript trigger?

 *  Resolved [cybertex](https://wordpress.org/support/users/cybertex/)
 * (@cybertex)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/)
 * Hi Jeff,
 * My goal is to optimize as much as possible even most sophisticated WordPress 
   site.
 * I’m using one of the most heavy weight themes with plugins like Visual Composer,
   VC Addons. Woocommerce, Revolution Slider etc. on board and there are very difficult
   to find a best way to optimize the site without breaking some pages.
 * The AO works great with default settings that’s a fact but not always very well
   optimized for load times. But we have more tools and settings in the AO and let’s
   go fighting.
 * I want to **inline and defer CSS** but that breaks some pages but if **I only
   resize the browser the page is immediately fixed** because of Javascript that
   recalculates dynamically css. It worked if I exclude some css and they go to 
   head but it blocks loading more and I don’t like that solution because I could
   choose default settings.
 * Some of the css are dynamically (js) calculated for instance rows and columns
   of products or testimonials masonry. So instead of 3 columns I get 2 and without
   gaps (the page is broken).
 * Maybe after the page is loaded the AO could trigger an JS event and for instance
   simulate resize or other events to fix the page, what do you think about it? 
   How to fix that simplest way?
 * I can’t find a right way to get the site working with inline and defer CSS without
   that triggering. After a hundreds of experiments I can’t find better solutions
   but I have feeling there must be a simple solution.
 * Thanx
 * [https://wordpress.org/plugins/autoptimize/](https://wordpress.org/plugins/autoptimize/)

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

 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321726)
 * not something to put into AO proper really, but what if you would simply add 
   a JS event listener (listening for the window.load event) or hooking into [readystate===complete](https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState),
   which calls the JS method that does the recalculation to your site?
 * frank
 *  Thread Starter [cybertex](https://wordpress.org/support/users/cybertex/)
 * (@cybertex)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321740)
 * Thanks Jeff for quick reply. That is not so easy to find out all scripts that
   recalculates X,Y or Z in many places (plugins, theme). I do not want to dig deeper
   in some plugins and in the theme.
 * Resizing fixes all issues and there would be only one behavior. I will try to
   create a JS trigger without touching plugins and theme inside. This behavior 
   is only for AO minification so I wanted to bind it with the AO only like a trigger
   for cleaning cache you have implemented.
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321754)
 * > This behavior is only for AO minification so I wanted to bind it with the AO
   > only like a trigger for cleaning cache you have implemented.
 * that happens on the server cybertex, what you need is a trigger on the client(
   the browser), hence window.loaded or something similar applies.
 * also; i’m not telling you to change that recalculating JS function, but to call
   it when the window.load event fires.
 * frank
 *  Thread Starter [cybertex](https://wordpress.org/support/users/cybertex/)
 * (@cybertex)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321775)
 * > also; i’m not telling you to change that recalculating JS function, but to 
   > call it when the window.load event fires.
 * Not only one function, there are a set of different functions in plugins and 
   theme as I see now.
 * I agree changing themes or plugins are always to risky and it would be a waste
   of time. I do not want to change AO too but only use tools like filters or exclude
   css, js settings.
 * I do not want to analyse all code to find all calls. I only wanted to find a 
   simplest solution to trigger only once for all plugins and theme after AO optimization
   in case of JS/css issues.
 * The main problem is to force recalculating/redrawing/etc. but maybe that is a
   wrong way because it becomes more complicated for analyse if there are more functions.
   Each theme are different and plugin combination is a pain for WordPress.
 * **My conclusion:**
 * I give up and leave it as it is and use AO default settings with filters and 
   exclusions. It’s impossible to get best solution without wasting time and digging
   deep into plugins and themes. If you add or remove only one plugin you had to
   start from scratch to optimize the site.
 * For instance “above the fold” setting if you use Ultimate Visual Composer Addons
   and after some time change only one row your “above the fold” css must be re-
   optimized and for each page or even post. That is good way for hobbyists but 
   not for professional work.
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321794)
 * well, try adding this snippet of JS (in a widget for example), it _**might**_
   force the redraw;
 *     ```
       document.onreadystatechange = function () {
         if (document.readyState == "complete") {
           document.body.style.width="99.9%";
         }
       }
       ```
   
 *  Thread Starter [cybertex](https://wordpress.org/support/users/cybertex/)
 * (@cybertex)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321802)
 * Thanks Frank,
 * > document.body.style.width=”99.9%”;
 * It doesn’t work. We need to resize entire Window and not only document body.
 * What I have investigated:
 * “There is no way for a web page to resize the main browser window in Chrome. 
   JavaScript code is only permitted to resize popup windows.”
 * This could work if you resize Window we can recalculate css:
 *     ```
       window.onresize = function(event) {
           ...
           recalculate
           redraw
           change style
           etc.
           ...
       };
       ```
   
 * I realize we should leave it because there are no good solutions for specific
   themes or plugins or too much manual work needed. And it’s not worth to go further
   that way.
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321818)
 * too bad ..
 *  Thread Starter [cybertex](https://wordpress.org/support/users/cybertex/)
 * (@cybertex)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321828)
 * Hi Frank,
 * Not so bad, we live with limitation and we know that. 🙂
    That is simply our 
   life.
 * If I find better way to fix dynamically created css and its issues I’ll tell 
   you for sure.
 * **Conclusions once again**
 * My goal in last months/years was to get not render blocking resources at all 
   on the site.
    The best optimization I can get the with best scores in Google 
   95, GTMetrix 97 etc. with following settings:
 *     ```
       "Also aggregate inline JS"
       "Inline and Defer CSS"
       "Also aggregate inline CSS"
       ```
   
 * but only if I manually create css for “above the fold” field. That works for 
   95% pages and posts on the website.
 * This method has limits because of dynamically created styles by theme or plugins
   and there must by some manual work and js/css exclusions and thus not all pages
   are free of render blocking resources.
 * On the other hand with **aggregate inline JS** I get a huge cache even if I find
   all js variables. I hate manual unnecessary work at all. If you add or remove
   only one plugin or even change some settings of the plugin all optimizations 
   will be lost.
 * And I noticed that all that settings above have slow down my site after cleaning
   the cache and if you prime a cache again. Recreating cache is very slow.
 * One page cache has been generated for over 30 seconds. Very bad for user experience.
   After the cache has been created the pages was loaded very fast.
 * But now cleaning the cache is very often because of theme and plugin updates 
   even every day.
 * I have now following settings and scores:
 * **JavaScript Options**
 * Optimize JavaScript Code checked
 * **CSS Options**
 * Remove Google Fonts checked
 * —————————-
    Google PI 63/83 (worst score) GTmetrix 98/93 (great) Pingdom 93 (
   over average)
 * I am going to make more optimizations with css options in the future. But I have**
   Inline and Defer** CSS intentionally unchecked.
 * The pain is to extract the critical CSS if you have a havy weight theme and plugins
   like Visual composer, Addons, Revolution slider etc.
 * The extracted css doesn’t work as expected and is sometimes over 100k size.
 * You should do that for all pages in most cases otherwise you get ugly page load.
   The manual work is huge and time consuming because all must be optimized for 
   all mobile devices.
 * That could work for simple blogs if you do not use content plugins like Visual
   composer and you don’t modify the page look very often.
 * Try to change something on the page for example disable Revolution slider and
   instead leave a Visual composer row with video.
 * I like the Autoptimize plugin very much and with default settings it works like
   charm but further optimization could be a pain. This is my conclusion after 2
   years of checking some settings with other plugins.
 * I’ll give me a try with other themes like Genesis framework to get better results
   and I hope to get better optimizations.
 * The worst experience is with some over-bloated Themeforest themes and plugins.
   My recommendation for others before you buy a theme take a test drive first!
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321841)
 * > On the other hand with aggregate inline JS I get a huge cache even if I find
   > all js variables. […] And I noticed that all that settings above have slow 
   > down my site after cleaning the cache and if you prime a cache again. Recreating
   > cache is very slow. One page cache has been generated for over 30 seconds. 
   > Very bad for user experience. After the cache has been created the pages was
   > loaded very fast.
 * only one possible conclusion: the inline JS is too often different between pages,
   indeed leading the JS having to be minified (which takes time) and cached (which
   uses disk space). so you should eitehr not aggregate inline JS or excluding even
   more really
 * > If you add or remove only one plugin or even change some settings of the plugin
   > all optimizations will be lost.
 * not always, not necessarily; your optimizations are not lost, but they might 
   require further tweaking.
 * > The pain is to extract the critical CSS if you have a havy weight theme and
   > plugins like Visual composer, Addons, Revolution slider etc. You should do 
   > that for all pages in most cases otherwise you get ugly page load. The manual
   > work is huge and time consuming because all must be optimized for all mobile
   > devices.
 * in that case [the above-the-fold optimization plugin](https://wordpress.org/plugins/above-the-fold-optimization/)
   might prove helpful?
 * > The extracted css doesn’t work as expected and is sometimes over 100k size.
 * that’s more fundamental and no tool will be able to help you with that; you should
   either simplify your page, allow for some unstyled content in the above-the-fold
   CSS or indeed not inline critical CSS at all for such pages?
 * > My recommendation for others before you buy a theme take a test drive first!
 * yeah, performance should never be an after-thought, it should be part of the 
   technical design from day 1. and sometimes you’ll have to compromise.
 * nice talking to you! 🙂
 * frank
 *  Thread Starter [cybertex](https://wordpress.org/support/users/cybertex/)
 * (@cybertex)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321851)
 * Dear Frank,
 * Nice talking to you too, Frank 🙂
 * You have a lot to do with all more and more sophisticated jquery/js bloated themes
   and plugins.
 * Your **AO plugin** and **Lazy load** and the **Plugin Organizer** and **Cache
   Plugin** (W3 TC I’m using now) could help to reduce the load time significantly.
 * **Plugin organizer** is my second favorite plugin too!
 * I would try to get my sites best optimized without render blocking resources 
   once again using your plugin with only a few css and js scripts in cache folder.
   That must by working with minimal manual work only some exclusions for inline
   js or css set on the beginning.
 * It would be maybe good idea to have a knowledge base for most used plugins and
   themes and how to optimize them with the AO? For instance what to exclude.
 * I recommend you to create more extended FAQ or articles on blog. That support
   have all theme authors and they do not respond directly but they show links to
   blog or FAQ topics like “How to…”. You have great articles related to AO.
 * But I have to find best optimized themes and plugins that could place all js 
   sources in footer without issues and manual work.
 * I’m working with themes like the7, Avada, Divi, The Core. All themes with plugins
   like Visual Composer, Ultimate VC Addons, Woocommerce, SEO Yoast, Revolution 
   Slider are “heavy weight” for a website and minimal css size is around 2MB or
   even more if you only write “Hello world”!!!
 * >  that’s more fundamental and no tool will be able to help you with that; you
   > should either simplify your page, allow for some unstyled content in the above-
   > the-fold CSS or indeed not inline critical CSS at all for such pages?
 * Believe me, try to write “Hello Wold” and use **About the fold** in bloated themes
   and plugins, please try do that. 🙂 I could show you “Hello World” using The7
   based on Visual composer and Ultimate Addons now. It is so complicated to get
   it working for all devices without ugly page load. You can get it working of 
   course with manual optimizing of all scripts from the7, Visual Composer etc.
 * There are complicated dependencies for instance menus and Visual Composer staff
   must be initialized. I agree if you had simple theme without it could work.
 * WordPress is a great idea and I’m fan of it but I like as coder programming using
   Ruby on rails and I can create websites like WordPress very fast and easy and
   all works smoother. Not so heavy in usage. Maximal css for the entire website
   is around 300kb with Bootstrap themes looking like Avada themes or other best
   looking Themeforest themes.
 * There are some sites created with WordPress based on great but over-bloated themes
   like the7 (this is my nightmare related to optimization for instance if they 
   change styles a little bit).
 * > in that case the above-the-fold optimization plugin might prove helpful?
 * I would like to see how it works, but I do not believe it could work for combination
   of “havy” plugins and complicated themes for mobile and desktop without ugly 
   page load. That must be an artificial intelligence involved.
 * But the7 has “about the fold” inbuilt as separate JS script and there could be
   issues if you try optimize in other plugins. I am not sure if the The7 ATF solution
   really works.
 * I was giving the authors some ideas to reduce the scripts and styles and they
   introduced some options to enable and disable blocks.
 * All multi-purpose themes are bloated and to “heavy” in most cases and they require
   optimizations but that is not so easy!
 * That is a challenge for you Frank, to fix them in easy way as possible. 🙂
 *  Plugin Author [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * (@futtta)
 * [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321901)
 * Some intersting ideas there Cybertex! 🙂
 * > I would like to see how it works, but I do not believe it could work for combination
   > of “havy” plugins and complicated themes for mobile and desktop without ugly
   > page load. That must be an artificial intelligence involved.
 * I wouldn’t call it artificial intelligence, but the plugin uses [PhantomJS](http://phantomjs.org/),
   a headless browser, to extract the critical CSS (same tool use by Jonas’s critical
   CSS) for every page you throw at it.
 * frank

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

The topic ‘Some pages are broken after deferred css. Maybe Javascript trigger?’ 
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/)

 * 11 replies
 * 2 participants
 * Last reply from: [Frank Goossens](https://wordpress.org/support/users/futtta/)
 * Last activity: [10 years, 1 month ago](https://wordpress.org/support/topic/some-pages-are-broken-after-deferred-css-maybe-javascript-trigger/#post-7321901)
 * Status: resolved