Render blocking css issue with WP 4.5? JQuery issue?

Viewing the source I see the autoptimize_xxxx.css in <noscript> in head that is fine in case of disabled JS. Is that correct?

yes, that is correct

I feel Jquery makes mess and maybe the issue with JS in WP45 because I get 2 errors “Uncaught ReferenceError: jQuery is not defined”

well, this could be due to the jquery-regression or (rather) to a plugin installation or update which all of a sudden requires jquery being loaded early.

I think it should be the order like this:

well, in that case you can use the API to change where the autoptimized JS should be included, for example to insert it after the closing footer-tag;

add_filter('autoptimize_filter_js_replacetag','cybertex_override_js_replacetag',10,1);
function cybertex_override_js_replacetag($replacetag) {
        return array("</footer>","after");
        }

hope this helps,
frank

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?

I don’t understand why does Google use <noscript> css like with JS disabled?

Google is a mere “best practices” tools. If you want to know how your site works in real life, you should use a tool like webpagetest.org to have real browsers hit your site.

Why gmetrix for example loads autoptimize_xxxxx.js first?

that would actually make sense;
1. HTML loads
2. no linked CSS (critical CSS is inlined)
3. JS is loaded in a non-blocking manner (deferred)
4. deferred CSS is loaded on DomContentLoaded
5. other stuff (images and such) are loaded

the goal of AO is not for the JS to load after the images, but to load without interfering with the rendering of the HTML.

hope this clarifies,
frank

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.

I want only to get my 95/95 back.

don’t obsess over GPSI ratings, the results can be flaky (as you noticed) and the ratings are useless if you know what you’re doing (in your case; if you know for a fact your CSS is not render blocking) ??

frank

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

I know but Google doesn’t! ??

try contacting larry@abc.xyz? :-p

Google doesn’t care about Page Speed Insights ranking… It cares about the website load time. It’s better to focus on GtMetrix or Pingdom tools speed tests.