Experiencing Divi flashing unstyled elements while loading your Divi website can be frustrating. This issue often occurs due to caching settings within the Divi theme. Here’s a step-by-step guide to help you resolve this problem. below image is an example to how my site was displayed with this divi flashing unstyled elements issue. most of the cases divi menu was flashing the mobile menu at loading so I was seeing two menus while loading the divi website.

Step 1: Disable Divi Caching Settings

First, let’s adjust the caching settings in Divi. Navigate to your Divi Theme Options and look for the Performance tab. Disable the following options:

• Dynamic Module Framework
• Dynamic CSS
• Critical CSS

Disabling these options can often resolve the flashing issue. If the problem persists, proceed to the next step.

Step 2: Enable Static CSS File Generation

Enabling Static CSS File Generation ensures that your CSS is compiled into a static file, which helps it load before the HTML content. Follow these steps:

1. Go to the Divi Theme Options.
2. Navigate to the Builder tab and then to the Advanced tab.
3. Ensure that Static CSS File Generation is enabled.

This setting often helps in reducing the flash of unstyled content by preloading the CSS. However, if the issue still persists, you can use a JavaScript solution.

Step 3: Add Custom JavaScript

If the above steps don’t fix the issue, adding a small piece of JavaScript can help. This script will hide the content until the CSS has fully loaded.

Here is the JavaScript code:

<script type="text/javascript">
var htmlElement = document.querySelector("html");
htmlElement.style.display = "none";
document.addEventListener("DOMContentLoaded", function() {
htmlElement.style.display = "block";
});
</script>

To add this JavaScript code:

1. Go to Divi Theme Options.
2. Navigate to the Integration tab.
3. Enable the header code and paste the JavaScript code there.

This code hides the HTML content until the DOM is fully loaded, ensuring that all styles are applied before displaying the content.

Impact on Google Speed Insights

Flashing unstyled elements can cause content to move around while the page is loading, increasing layout shifts and negatively impacting your Google Speed Insight score. By using the JavaScript method provided, you can minimize layout shifts, leading to a better user experience and an improved Speed Insight score.

Need Help?

If you’re having a hard time implementing these solutions, don’t worry! Our company specializes in website fixes and maintenance. We can help you resolve these issues quickly and efficiently. Feel free to contact us for professional assistance.

Conclusion

By following these steps, you can effectively resolve the issue of flashing unstyled elements on your Divi website. Start with adjusting the caching settings, enable static CSS file generation, and if needed, use the custom JavaScript solution. This should ensure a smooth and visually consistent loading experience for your visitors, improving your Google Speed Insight score in the process.