Link Search Menu Expand Document

Caching & Optimization

Elemental Menu was developed with performance in mind. Everything is well optimized.

There’re a few issues you might have when using Elemental Menu with a caching plugin. In this document, we use WP-Rocket as an example.

Table of Content

  1. 1. Mobile Menu not showing
  2. 2. Toggle Button not working (Double clicks issue)

1. Mobile Menu not showing

This often happens when you enabled “Disable Double Rendering” but didn’t enable “Separate cache files for mobile devices” on WP-Rocket:

WP-Rocket - Separate cache files for mobile devices

As we mentioned before, when “Disable Double Rendering” enabled, menu will be rendered based on users’ device, not the viewport. Meanwhile, if “Separate cache files for mobile devices” is not enabled, WP-Rocket only caches Desktop version of Elemental Menu.

So, to fix the issue, make sure that you enable separate cache files for Mobile.

2. Toggle Button not working (Double clicks issue)

You may read a detailed article explaining the root cause and solutions here.

Basically, this often happens when you enabled “Delay JavaScript execution”, either via a caching plugin or a plugin like Flying Scripts plugin. And while being delayed, there’s no script to handle the very first user interaction.

WP-Rocket - delay javascript execution

To fix the issue:

First, copy and paste the following script into your theme footer (before the closing </body> tag).

<script id="timingDelayExecution">
// 500 milliseconds after a page loaded, trigger a fake user interaction.
if ('ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0) {
	window.onload = () => setTimeout(() => window.dispatchEvent(new Event('touchend')), 500); // 500 milliseconds
}
</script>

Then, exclude the timingDelayExecution script from Delay JavaScript Execution:

WP-Rocket - excluded timingDelayExecution script


Last modified: Jan 8 2022 at 06:32 PM.