Dealing with flickers/FOUC

Issue

Your webpage loads with FOUC (flash of unstyled content). 

FOUC is an instance where your web page flickers with the default style of the browser before loading the website’s css.

Possible cause

FOUC or flickering occurs due to the following causes:

• Loading delays.
• Embedding of template stylesheets in the footer rather than the header. 

Solution

You can solve this issue by using one of the following methods:

• Define the CSS Print Method to be inline instead of using external files. You can do this by going to the Elementor > Settings > Performance> CSS Print Method > Internal Embedding.
  
• 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.

• 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.