cybertex

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

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!

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.

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

Dear Frank,

if you know what you’re doing (in your case; if you know for a fact your CSS is not render blocking) ??

I know but Google doesn’t! ??

Thanks a lot for explanations.

I would find out how to live with aggregate inline with JS Jquery included and inline and defer CSS as before.

The Webpagetest works like GTmetrix opposite to Google and it loads autoptimize_xxxxx.js first and seems to be ok I get A or B. I can see waterfall and it works as it should be no blocking resources.

As I wrote in previous post Google PageSpeed Insights worked fine some days ago with 95/95 and I suddenly get render blocking css after some updates?

Maybe Google has changed an algorithm?

Maybe that depends from other AO settings and Google simply doesn’t see defer loading. My first task is to satisfy Google but I’am not sure if I could if it takes <noscript> autoptimize_xxxx.css first. In previous versions of the A0 css were placed in footer as I remember.

I want only to get my 95/95 back.

I have been using your plugin for years and from time to time I have to watch the changes related to the working site and look for issues.

And your plugin is my number 3. must have WP plugin. I made a hundreds of experiments with different combinations of plugins and their settings to get stable WordPress and it worked fine until some changes in WordPress 4.5 I think.

I’am not a noob and I will find the right solution but I have to exclude all possible reasons of issues, for example updates and some changes not depended from my settings.

Dear Frank,

Thank you for the filter but I still have JS errors in console because of remaining jquery scripts in head and I have to aggregate inline JS unchecked.

I could have aggregated inline JS checked but I can’t handle a lot of files even with excluded all js variables. There must be a dependency from css too if you checked aggregate inline JS, isn’t it?. I can’t find right solutions to get cache files under control.

There are created almost the same js cache files with the same content but the size difference are in bytes.

Jquery becomes one of the main challenge in order to defer loading without issues. There should be more sophisticated method to get WordPress properly working.

There are 2 ways one:

1. Aggregate inline with JS Jquery included and inline and defer CSS (more complicated but much better for efficiency and performance)

2. Aggregate inline with JS Jquery (in head) excluded and you get blocking render js and not optimized for Google and page loading.

I want to go the first way as usual but there are issues and a lot of manual work. I don’t understand why does Google use <noscript> css like with JS disabled? Why gmetrix for example loads autoptimize_xxxxx.js first?

Thank you Frank,

in the mean time you could add an !important flag to the relevant styles in the deferred CSS?

That is not so easy because there are a lot of theme css generated as min.css and I do not want to touch them and only custom css or above the fold css should be changed.

Thank you for the link I will try to make more experiments with the pages in order to find the solutions.

Thanx

Arek

That is a simple filter script but it could help others to optimize entire site easy way.

Thank you Frank once again.

Thank you for the quick reply.

I am going to use autoptimize_helper and autoptimize_filter_css_defer_inline and it should be working fine.

One question.

Does my custom ATF script for example home page using autoptimize_filter_css_defer_inline replace the common “above the fold script”(ATF) set in autoptimize settings?

I do not want to have 2 ATF scripts working on one page/post.

Thankx,

Arek

An Update:

The7 theme disabled!
Twenty Fifteen Theme active + Visual Composer

Screenshot with 2 images

working image with a3 lazy:

VC simple image

On the same page the same object but not working:

vc image not working/a>

I can’t understand why does one image work and the other not?

Strange.

Hello Steve,

I really appreciate your reply.

Maybe you right that the7 theme is to much customised but I’m not sure if only the theme works strange or other addons like the VC too?

Most of the images on the page are working fine but if the guys from the7 create an object for example “fancy media” called that is a sophisticated image alternative it doesn’t work with lazy load.

There is a piece of html and working image:

image lazyload works

fany-media object not working with the lazy load:

fancy media object

The same is related to VC image objects and derivatives. The simple image works great but banners or “before-after” objects no more.

Another html piece with not working a3 lazy load:

lazy load not working

But even BJ Lazy load couldn’t work with the simple images but A3 works fine.

First I have to investigate if VC images, banners will work on a Twenty Fifteen Theme and if only the theme matters or both the the7 theme and addons like VC.

It is not so easy to talk to the guys from the7 they have a lot of other issues and don’t want to change more.

I am ready to make more tests.

Thankx

Hi,

I solved the issue after I have created a separate “thank you” page and it works now fine. The problem is when you don’t have a thank you page and after click on submit button on the same page you get the issue. The answer is in my firs post:

“reason was that dynamically generated CSS (in this case mailchimp & gd star rating) is not aggregated by Autoptimize as we cannot assume that those plugins won’t change the CSS-output for the next visitor/ request.”

I could recreate the issue but I have to use a copy of existing website but it will take a while.

Thanks,

Ar

Hi Jeff,

Thank you for the links but I have read them before.
Please watch my new post!

Thanks,

Ar