Elementor Inline CSS missing after every CI/CD deployment

The issue you’re describing, where Elementor pages are missing their inline CSS until you manually clear the opcache, can be challenging to diagnose and resolve. It seems like a caching problem, and it might be a combination of factors, including how your caching system, Elementor, and other plugins interact. Here are some steps you can take to troubleshoot and potentially resolve this issue:

1. Check for Plugin and Theme Conflicts:
   • Temporarily deactivate all other plugins except Elementor and see if the issue persists. If it doesn’t, reactivate each plugin one by one to identify the conflicting one.
   • Switch to a default WordPress theme (e.g., Twenty Twenty-One) to see if the issue is related to your theme.
2. Caching Plugins:
   • Ensure that the settings in your caching plugins (Autoptimize, W3 Total Cache, or others) are correctly configured, and there are no conflicts in their settings.
   • If you are using a combination of caching plugins, there could be conflicts. Consider using only one caching plugin.
3. Caching Mechanism:
   • Ensure that your server’s opcache is configured correctly and not interfering with the caching of Elementor or WordPress.
4. Elementor Version:
   • Although you mentioned that it doesn’t seem to be related to a specific version of Elementor, ensure that you are using the latest version of Elementor and that it’s fully up to date.
5. Server-side Caching:
   • Check if your web hosting server has server-side caching mechanisms (e.g., Varnish) that might be affecting the output of Elementor pages.
6. Security Plugins:
   • Some security plugins, such as Wordfence or Sucuri, can sometimes cause caching-related issues. Check if you are using any security plugins and make sure they are not interfering with Elementor.
7. Database Optimization:
   • Optimize your WordPress database regularly to ensure it’s not a factor in this issue. You can use plugins like WP-Optimize or WP-Sweep for this.
8. Monitoring and Debugging:
   • Implement monitoring tools or debugging methods to track the issue. This could include monitoring logs, examining the caching headers, and using browser developer tools to inspect what’s happening when the issue occurs.
9. Content Delivery Network (CDN):
   • If you are using a CDN, ensure that it’s configured correctly and not causing issues with Elementor’s assets.
10. Content Expiration Policies:

• Review your caching plugin’s content expiration policies. Ensure that cached content isn’t being stored for too long, causing outdated content to be displayed.

11. Hosting Support:

• If you’ve exhausted all options, consider contacting your hosting provider’s support. They might have insights into server-level caching or other configurations that could be contributing to the issue.

Remember to back up your website before making any significant changes, and if possible, try these troubleshooting steps on a staging environment to avoid disrupting your live site. Caching-related issues can be complex, and it may take some trial and error to identify the root cause and find a solution.

Ok, I’ll check all these points and let you know how it goes.

For now, we still don’t have a solution.

However, we’ve noticed an Elementor section, added to several pages through a short code, is partly missing (not the whole section, some parts remain visible) after clearing the cache, and being primed again.

It’s seems that the most nested objects might get skipped, when the server is busy priming pages.

Any idea of what can cause this, or maybe how to troubleshoot these cases further?

Thanks