Archived topic
Autoptimize
8 replies · Started by Leighton on January 31, 2021
Hello!
I'm using Autoptimize with my GeneratePress theme, and when I have 'Aggregate JS Files' enabled (https://imgur.com/ssUFGew), it makes the search icon and hamburger menu unclickable on mobile.
I've set up Autoptimize using the GP-recommended settings (https://docs.generatepress.com/article/configuring-autoptimize/), and this includes enabling Aggregate JS Files, as well as excluding two files (seal.js, js/jquery/jquery.js). The problem disappears when I disable Aggregate JS Files, but for optimization purposes, I'd prefer to leave this enabled and exclude the affected files, if possible.
There is an Autoptimize-related error in the console ("Uncaught Reference Error: offSide is not defined"), but I'm not tech-savvy enough to find out which file(s) to exclude. My site is here: https://burbro.com/
I'd really appreciate any help with this! =)
Resolved... Thanks!
Glad you got it sorted. Thank you for letting us know. :)
Hi, I'm having the exact same problem.
Per the guidance on your help page, I have Autoptimize set to optimize and aggregate all Javascript except for jQuery – however GeneratePress' Search and Menu icons are not opening in the mobile header on iPhone Safari.
Turning off 'aggregate' restores the correct operation, but aggregation is recommended/desired.
How was/is this resolved?
Thanks!
It shouldn't really be a problem unless there is another script that is breaking because of the aggregation.... but you can try excluding the: main.min.js
Thanks so much for your fast response, David!
Excluding main.min.js in Autoptimize restored the hamburger menu, but not the search icon...
I tried excluding navigation-search.min.js as well, and that worked to bring back the search functionality on iPhone Safari.
So I had to add both of these to Exclude scripts from Autoptimize:
wp-content/themes/generatepress/assets/js/main.min.js, wp-content/themes/generatepress/assets/js/navigation-search.min.js
Obviously I'd prefer not to do this, and it doesn't match your recommended settings for Autoptimize with GeneratePress.
Any idea how this can be addressed? Did you mean to say that some other script could be breaking the behavior of the aggregated GeneratePress JS on mobile?
Thanks again!
Hi Acela,
Obviously I’d prefer not to do this, and it doesn’t match your recommended settings for Autoptimize with GeneratePress.
Did you mean the settings from the docs? If so, that's the basic setting for minimal sites w/ few scripts.
As the site grows in plugin count, the risk of broken scripts from aggregation increases.
Any idea how this can be addressed? Did you mean to say that some other script could be breaking the behavior of the aggregated GeneratePress JS on mobile?
If I may suggest, consider excluding all scripts from wp-content/themes/generatepress/assets/js/ and wp-content/plugins/gp-premium.
This is so we're sure nothing interferes with these scripts as these are vital for theme functions.
Thanks Elvin. I figured it out.
With Autoptimize, you typically cannot aggregate jquery.min.js, but you can sometimes load it asychronously (via the "Async Javascript-files" setting under AO's "Extra" tab).
This is my first experience with GeneratePress and loading jQuery async appeared to work fine in testing of all sizes/widths running on different desktop browsers.
However, it seems to have caused the iPhone Safari issue mentioned above. When I removed the jQuery async designation, the issue went away – and I was able to return to aggregating all of GP's JS files with no exclusions.
So, problem solved. Thanks for your assistance; you guys offer amazing support. And you're right that things get more complicated the more things you try to do. Hope this helps someone else.
Nice one! Glad you got it sorted. Thank you for letting us know. :)
