WP Go Maps works well with WP Rocket, but in some cases, when deferred script loading is enabled, you may notice your map will not load on the frontend as expected.
This happens because WP Rocket defers not only the script assets that we load (great for performance) but also defers the execution of any inline scripts within the page.
More specifically, our internal settings component will be deferred, which means that your global settings will only be loaded after the page fully loads. This would not cause any issues if our scripts also only loaded at this point, but with deferred loading the priority of assets loading can change, meaning sometimes our scripts might load before your settings are available.
This will result in an error which looks something like this:
WP Rocket has a built in mechanism that we can leverage to prevent this timing issue, because they scan any inline scripts for the following phrases:
- DOMContentLoaded
- document.write
If either of these are found anywhere within that script, it is automatically excluded from this process. This means we can add one of these phrase to the settings to prevent the timing issue all together.
You can learn more about this here: https://docs.wp-rocket.me/article/1265-load-javascript-deferred#technical-notes
Fixing the timing issue #
To solve this issue, without changing your WP Rocket settings, navigate to our Custom Scripts section:
Maps > Settings > Custom Scripts
Add the following line of code:
// DOMContentLoaded - Added to prevent deferred execution of settings object from WP RocketWithin our Custom JavaScript block:
Save your settings and clear your WP Rocket Cache.
With this complete the comment will be detected within our global settings and the loading order and timing will be respected. This will resolve the error we showcased earlier, while maintaining your script deferred loading.
Why does this work? #
Our more technical users may have noticed that the script does not actually do anything, and instead is simple a JavaScript comment, which means it contains no logic/code.
The reason this works is because WP Rocket scans every inline script for these special phrases, and if they are found the entire block is skipped from the deferred execution (what we want). When our global settings load it also includes the JavaScript, which is later added to the page, but because it is embedded within our settings component, this is a great way of leveraging the custom script block to trigger this exclusion.
In the longterm, we will add an automatic exclusion within our core code, to remove the need for this additional step.
