Loading issues can cause a FOUC (flash of unstyled content). Several specific reasons can explain this.
First of all, this can be due to the way that Elementor embeds its templates.
Why are template stylesheet embedded in the footer and not on the <head>?
When a page is loading, we cannot recognize which templates have been embedded in the page. This is why we load them in the footer.
In some cases, this can cause a small flash (flicker or FOUC) when the page loads.
How To Solve FOUC?
You can solve this issue by using one of the following methods:
1. Define the CSS Print Method to be inline instead of using external files. This can be done by going to the Elementor > Settings > Advanced > CSS Print Method > Internal Embedding
2. The second option is to load the CSS files with an action in the functions.php file of your child theme. For example:
add_action( 'wp_enqueue_scripts', function() {
if ( ! class_exists( '\Elementor\Core\Files\CSS\Post' ) ) {
return;
}
$template_id = 123456;
$css_file = new \Elementor\Core\Files\CSS\Post( $template_id );
$css_file->enqueue();
}, 500 );Instead of $template_id = 123456, enter the ID of your template, and it will always load in the site’s header. You can use this method for specific pages only.
3. Some optimization plugins can solve this as well.
The above solutions are relevant if you embedded a template or a global widget of Elementor in your header or your footer via your theme options.
Note: Please note that a FOUC (flash of unstyled content) can be experienced when the “stretch section” feature is used because this option works with a JS code and flickers can happen while loading scripts.
Note: Flash of unstyled content can also happen if you use large/heavy pictures.
Tip: In some cases, such as when a section of large images is causing the FOUC, a quick workaround can be used. Just add an Entrance Animation, such as Fade In, to the specific SECTION that is having the problem. In many cases, this will easily solve the problem.