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

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.

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.

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.

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!

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. 🙂