Render blocking css issue with WP 4.5? JQuery issue?

Resolved

(@cybertex)

Hi Frank,

I am a happy user of your great plugin. There is is a weird behavior of the AO not seen before on my site.

It worked all fine even one week ago but I don’t know if after the WP4.5 upgrade something’s changed. Inline and Defer CSS checked as usual but I get render blocking css in Google PageSpeed Insights and results now are 79/98 and before 95/95. Viewing the source I see the autoptimize_xxxx.css in <noscript> in head that is fine in case of disabled JS. Is that correct?

<noscript><link type="text/css" media="all" href="http://www.domain.com/wp-content/cache/autoptimize/css/autoptimize_d1fe34ed4cf56e23b3db89d99287216b.css" rel="stylesheet" /><link type="text/css" media="screen" href="http://www.domain.com/wp-content/cache/autoptimize/css/autoptimize_edcb76d99f17ef5a13dd8f7bed29d0df.css" rel="stylesheet" /></noscript>

But there is something more and I do not understand if I use pingdom tools or gtmetrix I see first loaded autoptimize_xxxx.js and after this autoptimize_xxxx.css and that means no render blocking css?

What is wrong?

I feel Jquery makes mess and maybe the issue with JS in WP45 because I get 2 errors “Uncaught ReferenceError: jQuery is not defined”. I have seen your post about it.

My thoughts:

Let’s assume I do not want JQuery in head.
Also aggregate inline JS? unchecked
Force JavaScript in <head>? unchecked

On the bottom in source code we have JS./JQ scripts now.
But I see some JS/JQ scripts above the AO block of code and that could be one of the issues. The scripts order matters too.

So that looks like this

</footer>
<script>
  some jS/JQuery scripts
</sript>
...
deffer AO block:
<script type="text/javascript" defer src="http://www.domain.com/wp-content/cache/autoptimize/js/autoptimize_848629b5eb52600e9cdbcac697a50961.js"></script><script data-cfasync='false'>function lCss(url,media) {var d=document;var l=d.createElement('link');l.rel='stylesheet';l.type='text/css';l.href=url;l.media=media;aoin=d.getElementsByTagName('noscript')[0];aoin.parentNode.insertBefore(l,aoin.nextSibling);}function deferredCSS() {lCss('http://www.domain.com/wp-content/cache/autoptimize/css/autoptimize_d1fe34ed4cf56e23b3db89d99287216b.css','all');lCss('http://www.domain.com/wp-content/cache/autoptimize/css/autoptimize_edcb76d99f17ef5a13dd8f7bed29d0df.css','screen');}if(window.addEventListener){window.addEventListener('DOMContentLoaded',deferredCSS,false);}else{window.onload = deferredCSS;}</script>

I think it should be the order like this:

</footer>
<script>
  .... deffer AO Scripts (JQuery inside)
</script>
<script>
  other scripts, because they first need Jquery (agrregated in AO_xxx.js)
  some jS/JQuery scripts
</script>

https://wordpress.org/plugins/autoptimize/

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

Plugin Author Frank Goossens
(@futtta)

7 years, 12 months ago
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
Thread Starter cybertex
(@cybertex)

7 years, 12 months ago

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?

Plugin Author Frank Goossens
(@futtta)

7 years, 12 months ago

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

Thread Starter cybertex
(@cybertex)

7 years, 12 months ago

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.

Plugin Author Frank Goossens
(@futtta)

7 years, 12 months ago

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

Thread Starter cybertex
(@cybertex)

7 years, 12 months ago

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

Plugin Author Frank Goossens
(@futtta)

7 years, 12 months ago

I know but Google doesn’t! 🙂

try contacting larry@abc.xyz? :-p

Scott Hartley
(@destac)

7 years, 12 months ago

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.

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

The topic ‘Render blocking css issue with WP 4.5? JQuery issue?’ is closed to new replies.