Los problemas de carga pueden causar un FOUC (destello de contenido sin estilo). Varias razones específicas pueden explicar esto.
Ante todo, esto puede deberse a la forma en que Elementor incrusta sus plantillas.
¿Por qué la hoja de estilo de la plantilla está incrustada en el pie de página y no en el <head>?
Cuando se carga una página, no podemos reconocer qué plantillas se han incrustado en la página. Es por eso que los cargamos en el pie de página.
En algunos casos, esto puede causar un pequeño destello (parpadeo o FOUC) cuando se carga la página.
¿Cómo resolver FOUC?
Puede resolver este problema mediante uno de los siguientes métodos:
1. Defina el método de impresión CSS para que esté en línea en lugar de usar archivos externos. Esto se puede hacer yendo a la Elementor> Configuración> Avanzado> Método de impresión CSS> Incorporación interna
2. La segunda opción es cargar los archivos CSS con una acción en el functions.php archivo de su tema hijo. Por ejemplo:
add_action( 'wp_enqueue_scripts', function() {
if ( ! class_exists( 'ElementorCoreFilesCSSPost' ) ) {
return;
}
$template_id = 123456;
$css_file = new ElementorCoreFilesCSSPost( $template_id );
$css_file->enqueue();
}, 500 );
En vez de $template_id = 123456, ingrese el ID de su plantilla, y siempre se cargará en el encabezado del sitio. Puede utilizar este método para solo páginas específicas.
3. Algunos complementos de optimización también pueden resolver esto.
Las soluciones anteriores son relevantes si incrustó una plantilla o un widget global de Elementor en su encabezado o pie de página a través de las opciones de su tema.
Nota: Tenga en cuenta que se puede experimentar un FOUC (destello de contenido sin estilo) cuando se usa la función «estirar sección» porque esta opción funciona con un código JS y pueden ocurrir parpadeos al cargar scripts.
Nota: también puede ocurrir un destello de contenido sin estilo si usa imágenes grandes / pesadas.
Propina: En algunos casos, como cuando una sección de imágenes grandes está causando el FOUC, se puede utilizar una solución rápida. Simplemente agregue una animación de entrada, como Fade In, a la SECCIÓN específica que está teniendo el problema. En muchos casos, esto resolverá fácilmente el problema.
