If you're using the Divi theme in tandem with LiteSpeed Cache's Edge Side Includes (ESI) feature and experiencing issues, it might be due to a known interaction between the two. This post explains what to do about it.
Note: this post is a write up of the diagnosis of the issue carried out in this reddit post.
Update: LiteSpeed has now been updated (v6.0) with a fix for the nonce issue described in this post.
To fix a malfunctioning Divi mobile menu with LiteSpeed Cache due to nonce issues:
- Update to LiteSpeed Cache v6.0 for the fix.
- Alternatively, disable LiteSpeed's ESI feature.
- Clear the cache to remove old content.
Overview of LiteSpeed Cache's Edge Side Includes Feature
A "nonce" is a hash used within WordPress / Divi to protect URLs and forms against certain types of misuse. They're unique to each user and have a limited lifespan. When a page with a nonce is cached, behavior such as broken forms and security errors may occur. As such, pages with nonces usually have to be left uncached, which can affect their performance.
To address this, LiteSpeed Cache introduced an ESI solution to cache WordPress nonces and their associated pages fully. When implemented, this allows for individual caching of nonces separate from the rest of the page content.
When ESI is enabled, LiteSpeed automatically registers some of Divi's nonces for ESI processing, including:
- et-pb-contact-form-submit
- et_frontend_nonce
- et_ab_log_nonce
Conflict between LiteSpeed Cache ESI and the Divi Theme
In theory, LiteSpeed's ESI features should therefore be compatible with Divi. However, there is currently (as at 25 Nov 2023) a known issue in the latest version of LiteSpeed Cache (v5.7.0.1) that results in an incorrect replacement of the et_frontend_nonce in the source code.
Specifically, the code containing the frontend nonce gets changed from something like this:
var et_pb_custom = {... ,"et_frontend_nonce":"cd3112a755","...};To something like this:
var et_pb_custom = {... ,"et_frontend_nonce":"
<!-- Block cached by LiteSpeed Cache 5.7.0.1 on 2023-11-22 17:34:45 -->","...};The newline before the comment seems to be breaking the declaration, leaving et_pb_custom undefined. This triggers some JavaScript errors in the page such as:
Uncaught SyntaxError: Invalid or unexpected tokenReferenceError: et_pb_custom is not definedThese errors can block some of Divi's features from working. In particular, it seems to affect the mobile menu "hamburger" button, preventing the mobile menu from being opened.
Resolving the Issue
LiteSpeed has now been updated (v6.0) with a fix for the nonce issue, so upgrading to the latest version of LiteSpeed should resolve the issue.
A workaround, should you be unable to update or continue having issues is to disable the ESI feature for the time being. After disabling ESI, ensure caches are cleared to avoid serving outdated or broken content.
0 Comments