I recently had the fun of tracking down why my finely tuned website would not work as anticipated once I made everything live and active. My buttons did not work and all of a sudden my mobile menu did not pop up as anticipated. It all looked good while in development, why is it not working in real life?

After an intensive look back on all the settings on each item I had set, many google searches and still nothing. Has no one ever experienced this anomoly? This can’t be. I am not the only one.

After reading through some of the results from the searches I kept seeing something mentioning javascript. So I decided to go down this rabbit hole to find out why.

Since most of the functions I was using did involve javascript I thought there has to be some validity to this. I looked though the pages, settings, documentation and so on and could not find the smoking gun as to what I did wrong.

I then decided to to look at the settings my hosting provider had on the site as there were some changes recently. One in particular caught my eye as I have had issues with it in the past and that was caching. So I went to that section of the controls and made sure to turn off all caching and try again.

Still no change, same problem. Let’s dig a little deeper.

As I am reading up on the way the host does caching and what it specifically does, I hit on something that peaked my interest a little. HTML, Css, and JS minification. What the heck is that?

As defined the web host provider — The minification is a process of removing unnecessary characters from your HTML and CSS output to reduce data size and improve your site loading speed. The minification of JavaScript files reduces their size and the number of requests on the server.

So, if you are trying to use a CDN (Content Delivery Network) such as Cloudflare, these features come into play. Not everything plays nice with it either, as we are about to find out.

The CDN makes copies of your WordPress site and will take advantage of these features if it is enabled through whatever plugin you are using, or through the control panel of your hosting provider. I happened to find these settings in the plugin that I use. Once in the plugin and see a lot about minification and a lot of different settings to turn on and off.

The following settings were the offenders of my entire issue:

Manage Javascript Frontend

Minify JavaScript Files

Combine JavaScript Files

Defer Render-blocking JavaScript

I turned all caching options off but more specifically, the 3 items above under javascript settings and clicked save.

Can you guess what happened next? Everything magically worked as intended. I turned on all other settings with the exception of the 3 listed above and it still worked. Unfortunately, the theme was not compatible with javascript minification and didn’t like it at all.

Problem solved. On to the next one….

UPDATE:

After running into this issue once again I decided to narrow it down to exactly what it was that stopped the menu from working on a mobile device. Turning the option below off appeared to be the culprit. I turned everything else back on and the menu still worked.

Defer Render-blocking JavaScript –

Defer loading of render-blocking JavaScript files for faster initial site load.