Mobile menu breaks with Aggregate JS-files enabled

First of all; disable AsyncJS for now; it’s an older plugin of mine, you might simply not need it.

Now does the problem persist? If so, does the same thing happen when you reconfigure AO with “do not aggregate but defer” + “also defer inline JS” (in which case you likely can remove most/ all exclusions)?

frank

Thank you for the fast answer, Frank.

So i deactivated the AsyncJS like you said and aggregate all linked JS-files. The result is that the menu now opens as it should and the image is ok but the website scores an E in GTMetrix.

Doing “do not aggregate but defer” + “also defer inline JS” (the version that is now on) the result is: the mobile menu works and the image is ok but website does not perform very well in terms of mobile and desktop score. (a D/E at GTMetrix)
In this last step I didn’t exclude any script because I don’t know what should I exclude.

• This reply was modified 1 year, 7 months ago by andrebanaco.
• This reply was modified 1 year, 7 months ago by andrebanaco.

OK, so the question is why scores are lower when AsyncJS is not active. When comparing results, do you see render-blocking JS when only using AO that is not render-blocking when AsyncJS is active? local JS or 3rd party JS?

I think the answer for your question is “yes” once some links are different but not sure so i detailed it bellow.

Render-blocking JS when only using AO:
https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_7e59a869857b9708da4f22c48342404c.css
https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_single_bf9c4963764e39c38b64950b77eb4b51.css?ver=6.5.4
https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_single_ff155ceb3b2032f0acbcd07c4794d709.css?ver=6.5.4
https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_single_495dcd82326772d44dafdf403ea0d852.css?ver=6.5.4
https://draiz.pt/wp-includes/js/jquery/jquery.min.js?ver=3.6.0

Render-blocking JS when AsyncJS is active:
https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_fcd89ba860f1b0c66cddcf50939bd459.css
https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_single_bf9c4963764e39c38b64950b77eb4b51.css?ver=6.5.4
https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_single_ff155ceb3b2032f0acbcd07c4794d709.css?ver=6.5.4
https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_single_495dcd82326772d44dafdf403ea0d852.css?ver=6.5.4

• This reply was modified 1 year, 7 months ago by andrebanaco.
• This reply was modified 1 year, 7 months ago by andrebanaco.

Yes, some render blocking doesn’t appear when AsyncJS is also active.
This (https://draiz.pt/wp-includes/js/jquery/jquery.min.js?ver=3.6.0) is one of them.

• This reply was modified 1 year, 7 months ago by andrebanaco.

well; the only difference at first sight is jquery.min.js and (not) coincidentally that is just the one that is causing the problem when AsyncJS is active. something (in the theme or in your plugins) is requiring jQuery to be available early, so it has to be excluded from optimization in both AO and AsyncJS .. :-/

Well i did what you said here and it’s everything ok but it hasn’t change the performance rating yet.

It still appears 4 urls in the resources that may be contributing to render-blocking.

These ones:
https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_fcd89ba860f1b0c66cddcf50939bd459.css

https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_single_bf9c4963764e39c38b64950b77eb4b51.css?ver=6.5.4

https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_single_ff155ceb3b2032f0acbcd07c4794d709.css?ver=6.5.4

https://draiz.pt/wp-content/cache/autoptimize/css/autoptimize_single_495dcd82326772d44dafdf403ea0d852.css?ver=6.5.4

When I have “Aggregate all linked JS-files to have them loaded non-render blocking?” at AO checked i have this list of JS excluded scripts: js/jquery/jquery.min.js, wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.min.js
and this list of CSS excluded scripts:
, admin-bar.min.css, dashicons.min.css, wp-content/cache/, wp-content/uploads/, /wp-content/plugins/mobile-menu/

When “Do not aggregate but defer? + Also defer inline JS?” are checked i have only this list of JS excluded scripts:
js/jquery/jquery.min.js
and the same list of CSS excluded scripts:
, admin-bar.min.css, dashicons.min.css, wp-content/cache/, wp-content/uploads/, /wp-content/plugins/mobile-menu/

Posting this hoping that it can help somehow.

Well, as the only render-blocking resources are CSS, have a look at the “eliminate render-blocking CSS” option, but do take into account you’ll have to either;

a) generate & copy/paste the “above the fold CSS” in the field below (more info in the AO FAQ, look for “inline & defer CSS”) OR
b) create manual rules on the “critical CSS” tab (generating critical css for each rule) OR
c) take a subscription over at criticalcss and paste your API in the field on the critical CSS tab

hope this helps,
frank

Ok i guess i will try to do one of them without breaking anythings. Will give feedback later.

Hello Frank,

Back with some news. Did some changes and right now the situation is like that:

GTMetrix Score: constant C (sometimes B) – at least checking with the closer server location – with good metric values overall except the TBT (more than 750ms sometimes). Do you have some advice that can help me on that?

Despite the desktop score is good – sometimes a 90 at google page speed – the mobile version never been worst. And again I think it got to be because of third parties affecting the TBT (like Google CDN which is responsible for 324,6 KiB).

Looking for your answer to finalize and close the topic.
Thank you in advance,
André

the big culprit seems to be google recaptcha (and google maps, a bit), so you indeed might want to look for a lighter solution (if you need something like that)?

Managed to increase the overall mobile and desktop scores using recaptcha 2 instead of 3 and some other changes. Will keep digging it on it to find even more possible updates. Thanks Frank!

you’re welcome, feel free to leave a review of the plugin and support here! ??

Async Javascript was keeping my mobile menu (iPhone/Safari) from working, as soon as I disabled it the menu works again. My GTmetrix score dropped a tiny bit but I guess it’s worth it….the drop is worth my users being able to navigate through the site.