Cómo arreglar el problema [Divi Flashing Unstyled Content FOUC] en Divi

En este tutorial te voy a mostrar paso a paso 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 aunque a primera vista parece un fallo grave, la solución es mucho más sencilla de lo que imaginas. Si alguna vez recargaste tu sitio y viste por una fracción de segundo el contenido completamente desordenado, sin colores, sin tipografías ni espaciados, antes de que todo se acomodara de golpe, entonces ya conoces de qué estamos hablando. En este post no solo te doy el snippet que lo soluciona, sino que te explico por qué ocurre, cuándo aparece más fuerte y qué otras estrategias tienes para eliminarlo de raíz.

Lo bueno es que este es uno de esos problemas que, una vez que entiendes su causa, dejas de temerle. No necesitas tocar el núcleo del tema, ni editar archivos por FTP, ni contratar a un desarrollador. Con un pequeño bloque de código en el lugar correcto, y entendiendo cómo interactúa Divi con el navegador, vas a tener tu sitio cargando de forma limpia y profesional. Vamos por partes.

¿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 medidores 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 óptima. Y si estos no son adecuados, este problema se verá de manera más notable.

Para entenderlo bien, vale la pena saber cómo dibuja una página el navegador. Cuando alguien entra a tu sitio, el navegador descarga primero el HTML, que es la estructura cruda del contenido: textos, imágenes y bloques sin ningún formato. Acto seguido empieza a pedir las hojas de estilo (CSS) que le dicen cómo se debe ver cada cosa: qué color, qué tamaño de letra, qué márgenes. El FOUC ocurre justamente en ese intervalo de tiempo entre que el HTML ya está visible y el CSS todavía no terminó de aplicarse. Por una fracción de segundo el navegador te muestra el "esqueleto" del sitio sin ropa, y eso es lo que percibimos como ese parpadeo molesto.

En Divi este fenómeno se nota más que en otros temas porque Divi genera muchísimo CSS dinámico. Cada módulo, cada fila, cada ajuste de diseño que haces en el constructor visual se traduce en reglas de estilo que el tema tiene que cargar y procesar. Cuanto más rica y personalizada es una página, más CSS hay que aplicar, y por lo tanto mayor es la ventana de tiempo en la que el contenido puede aparecer sin estilo. Esa es la razón de fondo por la que los usuarios de Divi se topan con este problema más seguido que quienes usan temas más livianos.

¿Cómo ver el problema?

El problema se ve de manera evidente cada vez que recargamos alguna página de nuestro sitio. Como 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 página 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.

Un detalle importante para diagnosticar este problema: si quieres reproducirlo de forma controlada, recarga la página con la caché del navegador desactivada. En las herramientas de desarrollo de Chrome (la pestaña "Network") existe una opción para deshabilitar la caché mientras tienes el inspector abierto. Con esa opción activa, cada recarga obliga al navegador a pedir todos los recursos desde cero, igual que le pasa a un visitante nuevo, y ahí verás el FOUC en toda su intensidad. Esto te sirve para confirmar que el problema existe antes de aplicar la solución, y para verificar después que realmente desapareció.

Cómo 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 agrega 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 este código, le diremos al sitio que no despliegue las hojas de estilos en la cabecera del sitio hasta que el documento esté listo. La lógica es simple pero ingeniosa: en lugar de dejar que el navegador muestre el HTML crudo mientras espera el CSS, ocultamos por completo el elemento html (es decir, toda la página) en el instante en que empieza a cargar. Luego, cuando el navegador termina de armar el árbol del documento y dispara el evento DOMContentLoaded, volvemos a mostrar la página de golpe, ya con sus estilos aplicados. El resultado es que el usuario nunca llega a ver la versión "sin ropa" del sitio: pasa directo de la pantalla en blanco al sitio terminado.

Es fundamental que este código vaya en el "Head" y no en el "Body". El motivo es que el navegador procesa el contenido del head antes de empezar a pintar el cuerpo de la página, así que el display:none se aplica justo a tiempo, antes de que aparezca cualquier contenido visible. Si lo pusieras al final del body, el navegador ya habría mostrado parte del contenido sin estilo y el truco perdería todo su sentido.

Consejo: Después de pegar el snippet, no olvides limpiar la caché de tu sitio y la del navegador antes de probar. Es muy común pensar que "el código no funcionó" cuando en realidad estás viendo una versión cacheada del sitio anterior. Recarga con Ctrl+Shift+R (o Cmd+Shift+R en Mac) para forzar una recarga limpia.

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 tú no has notado este problema antes en tu instalación con Divi. Si es así, te explico por qué a continuación, y además te comparto algunas estrategias complementarias que valen mucho la pena.

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é. Sí, así es. Recordemos que los plugins de caché 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 asíncrona, 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á.

Vale la pena entender por qué un buen plugin de caché ataca este problema desde otro ángulo. La técnica clave que usan se llama "CSS crítico" (critical CSS). En vez de esperar a que se cargue toda la hoja de estilos del sitio, estos plugins detectan qué reglas de CSS son indispensables para mostrar la parte visible inicial de la página (lo que se conoce como "above the fold", lo que el usuario ve sin hacer scroll) y las incrustan directamente dentro del HTML. De esa manera, el navegador tiene los estilos esenciales disponibles de inmediato, antes incluso de pedir el archivo CSS completo, y el contenido nunca aparece sin formato.

Tanto WP Rocket como LiteSpeed Cache tienen opciones específicas para esto. En WP Rocket la encuentras como "Optimizar la entrega de CSS" con la generación de CSS usado/crítico. En LiteSpeed Cache está dentro de la sección "Page Optimization", en la pestaña de CSS, con la función "Generate Critical CSS" o "Load CSS Asynchronously". Al activar estas opciones, el plugin precarga lo justo y necesario para que la página se vea correcta desde el primer milisegundo, y difiere el resto del CSS para que cargue sin bloquear el renderizado.

Consejo: Si usas un plugin de caché con generación de CSS crítico, prueba activar primero esa función y verifica si el FOUC desaparece antes de meter el snippet de JavaScript. Combinar ambas soluciones a la vez rara vez es necesario y, en algunos casos, mezclar el ocultamiento por JS con la optimización del plugin puede generar un pequeño retraso visible en la aparición de la página. Una solución bien aplicada suele ser suficiente.

El impacto del FOUC en tu velocidad y posicionamiento

El FOUC no es solo un tema estético. Tiene un efecto real sobre las métricas de Core Web Vitals que Google usa para evaluar la experiencia de tu sitio, y por lo tanto sobre tu posicionamiento. La métrica más directamente afectada es el CLS (Cumulative Layout Shift), que mide cuánto se mueven los elementos de la página mientras carga. Cuando el contenido aparece sin estilo y luego "salta" a su posición final con el CSS aplicado, ese movimiento brusco se contabiliza como un desplazamiento de diseño, y un CLS alto perjudica directamente tu evaluación.

Pero hay un matiz interesante con la solución del snippet de JavaScript. Al ocultar la página entera hasta que el DOM esté listo, eliminas el parpadeo visible, pero introduces una pequeña pausa en blanco. Esto puede afectar levemente otra métrica: el FCP (First Contentful Paint), que mide cuándo aparece el primer contenido visible. Por eso, en sitios donde la velocidad es crítica, mi recomendación siempre es priorizar la solución basada en CSS crítico del plugin de caché, que ataca la causa raíz sin sacrificar el tiempo de aparición del contenido.

La estrategia ideal, entonces, depende de tu caso. Si tienes un buen plugin de caché bien configurado, deja que él se encargue del FOUC mediante CSS crítico y carga asíncrona. Si por algún motivo no puedes o no quieres usar caché avanzada, el snippet de JavaScript es una red de seguridad excelente y prácticamente infalible. Lo importante es que no dejes el FOUC sin atender: un sitio que parpadea en cada carga proyecta una imagen de descuido que afecta la confianza del visitante, sobre todo si vendes servicios o productos.

Optimizaciones de Divi que ayudan a reducir el FOUC

Más allá del snippet y del plugin de caché, Divi trae sus propias herramientas de optimización que reducen la probabilidad de que aparezca el FOUC. Desde la versión 4.10, Divi incorporó un sistema de rendimiento dinámico que vale la pena conocer y activar. Lo encuentras en Divi > Opciones de tema > General > Performance.

Las opciones más relevantes para nuestro problema son las siguientes. "Dynamic CSS" hace que Divi solo cargue el CSS de los módulos que realmente usas en cada página, en lugar de cargar una hoja de estilos gigante con todo el framework. Esto reduce drásticamente el peso del CSS y, por lo tanto, el tiempo en que la página puede quedar sin estilo. "Critical CSS" (la versión nativa de Divi) prioriza el CSS necesario para el contenido visible inicial, de forma parecida a lo que hacen WP Rocket o LiteSpeed. Y "Dynamic Module Framework" carga solo el código JavaScript de los módulos presentes en la página.

Mi recomendación es que actives estas opciones nativas de Divi como primera línea de defensa. En muchos casos, con solo tener bien configurada la sección de Performance de Divi, el FOUC se reduce de manera notable sin necesidad de ningún código adicional. Eso sí, después de activar estas funciones siempre limpia la caché estática de Divi (hay un botón para ello en la misma pantalla) y verifica el resultado, porque a veces conviven con plugins de caché externos y hay que asegurarse de que no se pisen entre sí.

Si quieres profundizar en todo esto y aprender a dejar tu sitio con Divi cargando a máxima velocidad, ese es exactamente el tipo de cosas que cubrimos a fondo en el curso de optimización de velocidad en Divi, donde vemos no solo el FOUC sino todo el ecosistema de rendimiento que necesitas dominar.

Preguntas frecuentes sobre el FOUC en Divi

¿El snippet de JavaScript afecta el SEO de mi sitio?

No, el snippet no perjudica el SEO en términos de indexación. Los buscadores como Google rastrean el contenido HTML de la página independientemente del estado visual, así que ocultar y mostrar el html con JavaScript no esconde tu contenido del rastreador. Lo que sí debes vigilar es el impacto en las métricas de Core Web Vitals que mencioné antes: la pequeña pausa en blanco puede afectar levemente el First Contentful Paint. Por eso, en sitios donde el SEO técnico es prioritario, conviene resolver el FOUC con CSS crítico en lugar de con el ocultamiento por JS.

¿Por qué el FOUC aparece solo en algunas páginas y en otras no?

Esto tiene que ver con la cantidad de CSS que necesita cargar cada página. Una página de inicio cargada de módulos, animaciones y secciones personalizadas genera mucho más CSS dinámico que una entrada de blog simple. Cuanto más pesada es la página en estilos, más larga es la ventana de tiempo en la que puede aparecer el contenido sin formato. También influye si esa página ya está en la caché del visitante: la primera visita siempre es la más vulnerable al FOUC, mientras que las recargas posteriores suelen verse limpias porque el navegador ya tiene el CSS guardado.

¿Funciona esta solución en Divi 5?

Sí, el principio sigue siendo válido. Divi 5 trae mejoras importantes de rendimiento en su nuevo motor, y en muchos casos el FOUC se reduce de forma considerable simplemente por la arquitectura más eficiente de la nueva versión. Aún así, si llegas a verlo, tanto el snippet de JavaScript como las opciones de CSS crítico (ya sean las nativas de Divi o las de tu plugin de caché) siguen siendo herramientas perfectamente aplicables. La recomendación general no cambia: ataca primero la causa raíz con optimización de CSS y deja el ocultamiento por JS como recurso de seguridad.

¿Puedo usar un plugin específico solo para arreglar el FOUC?

Técnicamente sí, existen plugins que insertan código personalizado en el head sin tener que tocar las opciones de Divi, pero honestamente no lo recomiendo para este caso. Agregar un plugin entero solo para inyectar tres líneas de JavaScript es sobrecargar tu sitio innecesariamente. Divi ya te ofrece el campo "Agregar código al Head" directamente en sus opciones de tema, que es el lugar perfecto y nativo para este snippet. Cuantos menos plugins tengas, más liviano y mantenible será tu sitio a largo plazo.

Conclusión

El problema "Divi Flashing Unstyled Content" puede parecer intimidante la primera vez que lo ves, pero como acabamos de comprobar, tiene varias soluciones perfectamente accesibles sin necesidad de conocimientos técnicos profundos. Ya sea con el pequeño snippet de JavaScript en el head, con la activación del CSS crítico de tu plugin de caché, o con las opciones de rendimiento nativas de Divi, tienes todas las herramientas para que tu sitio cargue de forma limpia y profesional en cada visita.

Mi recomendación final es que pienses en capas: empieza por configurar bien la sección de Performance de Divi, suma un buen plugin de caché con CSS crítico, y reserva el snippet de JavaScript como red de seguridad por si algo se escapa. Con esa combinación, no solo eliminas el FOUC, sino que también mejoras de forma general la velocidad y las métricas de tu sitio, que es lo que realmente importa de cara a tus visitantes y a los buscadores.

¿Te ha gustado este tutorial? Si te ha resultado útil, no olvides compartirlo con tus amigos y conocidos, y recuerda que puedes compartirnos el enlace de tu sitio en los comentarios para que veamos cómo quedó después de aplicar la solución.

🎓 ¿Quieres que tu sitio con Divi vuele y se vea impecable en cada carga? En uxdivi.com/planes tienes acceso a todos nuestros cursos de Divi 5 y optimización web, desde los fundamentos hasta las técnicas avanzadas de rendimiento que usan los profesionales. Da el siguiente paso y domina Divi de verdad.