Seleccionar página
4
Volver al contenido del HUB: Hub | Snippets Divi

Cómo arreglar el problema «Divi Flashing Unstyled Content» en Divi

En este HUB Content te mostraremos cómo arreglar «Divi Flashing Unstyled Content» en Divi. Este problema es conocido también como problema de carga de estilos CSS en Divi y en este pequeño tuto t mostraremos como solucionarlo.

Índice

¿Qué es Flash of unstyled content?

¿Tu sitio con Divi muestra contenido sin estilos al cargar la página? Esto se llama FOUC (Flash of unstyled content) y lo que sucede es que Divi muestra brevemente el estilo predeterminado al navegador antes de que se carguen las hojas de estilo por defecto del tema. Con FOUC, tu contenido hará un pequeño efecto de Flashing que puede hacer ver al sitio poco profesional. Y con el cambio de contenido, es probable que tengas algunos problemas con CLS en los resultados de carga de los medidos más comunes del mercado.

El problema de Divi «Flashing Unstyled Content» también se mostrará en mayor o menor medida dependiendo de la cantidad de contenido que tengas en la página, o de la velocidad de tu servidor. Recuerda que Divi necesita ciertos recursos del servidor para poder funcionar de manera optima. Y si estos no son adecuados, este problema se verá de manera más notable.

¿Cómo ver el problema?

El problema se ve de manera evidente cada vez que recargamos alguna página de nuestro sitio. Cómo he comentado antes, el problema puede verse más o menos en función de los recursos del servidor y del peso de tu página.

Ejemplo del error:

Como ves, ese pequeño salto o «Flashing» del sitio es completamente molesto y visible, sobre todo si la pagina está cargando muchos recursos e imágenes.
El problema de Divi «Flashing Unstyled Content» sucede incluso después de la optimización de performance de Divi anunciada en Divi 4.10, lo que hace que sea un verdadero dolor de cabeza. Pero acá tenemos la solución, y será a través de la adición de un pequeño snippet de código dentro de Divi.

Como solucionar el problema «Divi Flashing Unstyled Content»

La solución a este problema en Divi es mucho más sencilla de lo que parece y funcionará en la mayoría de los casos.

Ve a Divi > Opciones de tema > Integración> Agregar código al «Head» del sitio y agregué el siguiente Snippet:

<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
</script>

Con esté código, le diremos al sitio que no despliegue las horas de estilos en la cabecera del sitio.

Y después de aplicarlo, el sitio cargará de esta manera. Ejemplo de la solución:

Como ves, el problema de Divi «Flashing Unstyled Content» ha desaparecido por completo, y hasta da la impresión de que el sitio carga más rápido.

¡Y listo! Así hemos podido arreglar el problema «Divi Flashing Unstyled Content» en Divi de manera sencilla y rápida. Pero antes de irte, seguramente te preguntarás que tu no has notado este problema antes en tu instalación con Divi, si es así te explico por qué a continuación.

Solución alternativa (más común)

Si no has notado este problema en tu sitio, es probable que sea por tu plugin de caché. Si, así es. Recordemos que los plugins de cache como WP Rocket o Litespeed corrigen el problema de FOUC porque optimizan las hojas de estilos del sitio web, y además las ponen a cargar de manera asincrona, así que es bastante probable que solo con un plugin de caché como los antes mencionados, este problema desaparezca.

En caso de que aún así el plugin de caché no lo corrija, usa el código anterior, y con ello es casi seguro que el problema se solucionará.

¿Te ha gustado este tutorial?

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este post.

Nos vemos en el próximo Divi Snippet en uxdivi.

Contenido Relacionado

1 Comentario

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *