All my drop down menus broke

Hi @maria-grace, thank you for your interest in Jetpack Boost and sorry to hear it is breaking your site.

Would you please let us know a little more details on your site setup such as the theme you are using and the plugins you have installed so we can try to replicate your setup and the reason why it is failing.

Best,
David

That you for your response. Tested by the CSS and java script options individually either one breaks the menus. Lazy Load removes all pictures from posts.

I am using Graphene theme 2.8.4

Installed and active plugins are:
Advanced editor tools (Tiny MCE Advanced)
Akismet
ARchived Post Status
Boxzilla
Category Tag pages
Conditonal CAPTCHA
Easy google fonts
jetpack
jetpack boost
Kadence Blocks
MC4WP: Mailchimp for word press
Really simple SSL
Redirection
Shariff wrapper
Supreme goodgle webfonts
Updraft plus
Qordfence
WordPress Editorial Calendar
WP fastest Cache
WP GDPR compliance
WP Optimize
WPS Hide Login
Yoast SEO

Thank you for your assistance

Hi @maria-grace,

Thank you for providing the extra information.

From our first round of investigation it looks like the “Defer Non-Essential Javascript” option from the Jetpack Boost plugin is incompatible with the “Enable Minify ->Process HTML” option of the “WP Optimize” plugin. If you disable this option in the “WP Optimize” plugin as shown in the screenshot at https://cldup.com/o0PrNvw9MG.png, it should work. Please note that this is also the cause of the problem of the issue with the image too because Image Lazy Loading is done using JavaScript but since the JavaScript is not working due to the combination of the 2 options mentioned above, it breaks too.

Please note that both the Wp Optimize and Jetpack Boost plugins provide site performance optimizations working on the same site resources (such as JavaScript, CSS and imageS). Due to the technical nature of these optimizations, there is always a possibility that it will create conflicts and issues.

Now that we know the root of the issue we are trying to create a fix if at all possible to make it work with the WP Optimize plugin. We will let you know of the outcome and if we manage to release an update for it.

Best,
David

I have made the suggested change. Now the JAVA script and lazy load are all working. However, the optimize CSS still breaks the drop down menus.

I have enabled the later two components on my site https://randombitsoffascination.com
but still cannot use the CSS optimization.

Any further assistance in making that work would be appreciated.

Thank you

Hi @maria-grace,

Thank you for the further information. Just to confirm that with the “Defer Non-Essential Javascript” and “Lazy Image Loading” Jetpack Boost feature enabled and the “Process HTML” feature from WP Optimize disabled, then Lazy Loading works as well JavasScript (and the menu).

However with the “Optimize CSS Loading” feature from Jetpack Boost (on its own or with the 2 other features?) and still the “Process HTML” feature from WP Optimize disabled, the JavaScript menu breaks (but other JavasScript features work?).

Best

Yes, that is correct. With the process html feature disabled, and Optimize CSS loading on the menus break. What other java script features should I check to see if they work? I haven’t noticed anything else broken but it is quite possible I missed something.

I updated the plug in and tried again. Using the CSS optimization still breaks the drop down menus.

UPdated to 1.03 and the optimize CSS still breaks the dropdown menus.

Hi @maria-grace

Thank you for staying with us and working through these problems with us. I really appreciate your time and effort.

I’ve run some tests on my own test sites using the same combination of plugins and themes that you are using on your site. So far, I haven’t been able to reliably recreate the problem you have described – though I did briefly manage to get the menus to fail to load.

In order to recreate that problem, I:

1. Ensured WP Fastest Cache was enabled, with “Minify HTML”, “Minify Css” and “Combine Css” all enabled
2. Turned on Jetpack Boost’s “Optimize CSS Loading” feature
3. Reloaded my test site.

However, the problem only occurred once. When I visted the WP Fastest Cache settings page, and told it to clear its cache, the problem cleared up and I was unable to recreate the situation.

Can I please ask you to try turning on “Optimize CSS Loading” one more time – but clear WP Fastest Cache’s cache immediately afterward? That may clear up the problem.

If not, would you mind letting me know which features you have enabled in WP Fastest Cache, to help me recreate the same problem?

Finally, I know this is an odd request – but you can please check if your menus show a small down arrow to the right of their labels when broken? If the small down arrow is visible, then I know we are debugging a JavaScript issue. If the small down arrow has been replaced by an empty square or other symbol, then I know we are looking at a CSS loading issue.

Thanks again for bearing with us, and I hope we can get to the bottom of this.

Thank you for your continued assistance with this issue.

I have turned on the optimize CSS loading and cleared fastest Cache’s cache, both the whole cache and the minify cache immediately afterwards. The menus remain broken, with a down arrow beside the menus. (I also purged the optimize minify cache at the same time)

The settings turned on for Fastest Cache are:

cache system enable
Logged-in users: don’t show the cached version for logged in users

***Significant observation, when I looked at the page while logged in(on chrome), the menus worked, but when I went to an incognito window on chrome and again on Firefox, the menus did not work. I tried clearing all the caches, and cleared the browser caches as well, but found the problem persisted.

mobile: Don’t show the cached version for desktop to mobile devices
New post: clear cache files when a post or page is published
update post: clear cache files when a post or page is updated
minify html: you can decrease the size of the page
minify css: you can decres the size of css files
combine css: reduce http request through combine css files
combine js: reduce http request through combined js files (header)
gzip: reduce sizes of files sent from your server
browser caching: reduce load times for repeat visitors

In case it is of use, the setting on WP-Optimize are:

enable minify
process Java Script files
ENABLE MINIFICATION OF JAVA SCRIPT FILES
ENABLE MERGING OF JAVASCRIPT FILES
NO EXCLUSIONS OR DEFERED FILES
Process Css files
ENABLE MINIFICATION OF CSSFILES
ENABLE MERGING OF CSS FILES
NO EXCLUSIONS OR ASYNCHORNOUS LOADING FILES

Last night I updated WP fastest cache and WP optimize and tested the JetPack boost CSS optimize afterward, clearing the cache immediately after turning on the CSS optimize. The dropdown menus continued to be broke with the CSS feature turned on.

Hi @maria-grace –

Thanks for your patience on this. We had a chance to look into this and had some difficulty reproducing the issue.

This is probably happening because the dropdown menus are driven by JavaScript that isn’t loading.

As a first step, can you try updating to Jetpack Boost v1.0.4? There are some updates to how our “Defer render-blocking javascript” feature works and it is possible that may resolve the issue.

If this doesn’t fix the issue, please ensure that the “Defer render-blocking javascript” feature in Boost is turned off.

Let us know if either of these fix the issue for you.

I have installed every JetPack Boost update as they come out to no avail.

I tried turning off the JSS option and running it with only the CSS option turned on and the drop down menus were not functioning. I tried with both turned on and the menus did not function.

All caches were cleared immediately after the Boost setting changes.

With the JSS turned on and the CSS turned off the menus function (but that is only when I have the minify html on WP-optimize turned off.)

Thank you for your continued assistance.

Hi again @maria-grace,

Thanks for sticking with us while we investigated. After diving through the plugin source code for WP Fastest Cache, I think I’ve figured out the problem you’re running into.

It looks like WP Fastest Cache’s “Combine CSS” option is not compatible with Jetpack Boost’s “Optimize CSS” option.

When using optimized CSS, Jetpack Boost figures out the most important CSS to render your page as quickly as possible and embeds it directly in your page. Then, it uses a trick involving a small bit of JavaScript to tell your browser not to hold up rendering your page while the rest of your CSS files load. This is called “deferred loading” – and helps ensure your page displays as quickly as possible.

However, WP Fastest Cache’s “Combine CSS” feature filters your page’s HTML source – and replaces all links to CSS files with one link to its combined CSS file. The trouble is that WP Fastest Cache doesn’t recognize Boost’s little “deferred JS” trick, and ends up generating a CSS link which is never used (its media type is set to “print”).

As a result, only Jetpack Boost’s optimized CSS loads at all – which only includes the stuff that appears on your page when it is first displayed on your screen. i.e.: that won’t include elements that appear later, like dropdown menus.

We will investigate a proper fix for this issue in future versions of Jetpack Boost – but in the mean time, these two options can’t be used together.

Please either leave the “Optimize CSS” option in Jetpack Boost off, or alternately turn off the “Combine CSS” option in WP Fastest Cache.

Thank you for your efforts on this. I appreciate both the solution and the explanation very much.

I turned off the Combine Css option and turned on the Optimize CSS and the site is working properly now. Thank you.