Es bastante común que, al cargar una página creada con Divi, esta se muestre temporalmente en blanco, sin ningún estilo y casi sin mostrar nada de contenido, una total decepción y mala experiencia para el usuario.
Esto es normalmente debido a que el navegador carga la página limpia, antes de que se carguen los estilos de la página, y se conoce como FOUC, o pantallazo de contenido sin estilos.
A continuación, normalmente en menos de 1 segundo, dependiendo de cuán optimizada esté tu web, cargarán ya los estilos de Divi, lo que supone un cambio de estilos, que penalizan las métricas web principales, en el apartado de CLS, o de cambios sustanciales de estilo.
Índice de contenidos
¿Cómo es el efecto FOUC de Divi?
Como el mismo nombre indica, es una especie de pantallazo en el que, momentáneamente, se ve la página casi en blanco, sin prácticamente aplicarse los estilos de la misma, como en la siguiente captura que he realizado de este efecto.
Posteriormente, a veces muy rápido si tu hosting es bueno y la página está optimizada para ser rápida, se verá ya el contenido, con todos sus estilos, así:
¿Por qué se produce el efecto FOUC en Divi?
Curiosamente hay 2 ajustes de mejora de rendimiento del mismo tema Divi que pueden provocar este indeseado efecto FOUC en tus páginas:
- Activar el ajuste de CSS crítico.
- Activar la carga aplazada de JavaScript
¿Cómo se soluciona el problema del efecto FOUC en Divi?
Lo primero que debes hacer es desactivar todos los ajustes que antes te he indicado, y que tienes activos en la captura de pantalla. No obstante es posible que ni así se solucione el problema.
Si, tras desactivar los ajustes de rendimiento de Divi que facilitan el efecto FOUC, aún sigues viendo esos indeseables pantallazos blancos, la solución está en este código:
<script type="text/javascript">
var elm=document.getElementsByTagName("html")[0];
elm.style.display="none";
document.addEventListener("DOMContentLoaded",function(event) {elm.style.display="block"; });
</script>Copia el código anterior y pégalo en la cabecera de tu web, ya sea manualmente o, si lo prefieres, desde los ajustes de integración de las opciones de Divi, activando el código en cabecera y pegando el código en la sección de agregar código al <head> (pero mira que es mala la traducción de Divi) y guardando los cambios.
Entonces ¿cómo optimizo Divi si sus ajustes de rendimiento dan problemas?
Mi consejo es que no utilices ninguno de los ajustes de rendimiento de Divi (Actuación en la infame traducción de Divi), que los desactives todos, y que utilices un buen plugin de optimización: SG Optimizer si estás alojado en SiteGround o WP Rocket en cualquier otro alojamiento.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
Hola Fernando, una pregunta:
¿Este código es compatible con plugins de optimización como WP Rocket o Perfmatters? Si se usan las opciones de minimizar y aplazar la ejecución de scripts ¿no tendremos el mismo resultado?
Un saludo.
Francisco
Yo lo he probado con el Rocket sin problemas
Excelente post!!!
Siempre se tratan temas que no se encuentran en ningún otro sitio. Muy útil, como siempre
Que decepción que Divi no tenga un buen optimizador, y por otra parte que hace un tiempo se está abocando mas a sacar addons pagos que a mejorar el propio builder, pero en fin, de algo hay que vivir, no?