Oferta SiteGround Black Friday

Cómo evitar el pantallazo inicial en blanco y sin estilos al cargar una página con Divi

pantalla blanco

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.

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

efecto fouc en divi

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í:

sin efecto fouc en divi

¿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

ajustes rendimiento divi que provocan efecto fouc

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

agregar codigo para evitar fouc head divi

 

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.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en los emoticonos para valorarlo!

Promedio de puntuación 4.2 / 5. Total de votos: 5

Hasta ahora ¡no hay votos!. Sé el primero en valorar este contenido.

Ya que has encontrado útil este contenido...

¡Sígueme en las redes sociales!

¡Siento que este contenido no te haya sido útil!

¡Ayúdame a mejorar este contenido!

Por favor, dime, ¿cómo puedo mejorarlo?

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

Sobre el autor

4 comentarios en “Cómo evitar el pantallazo inicial en blanco y sin estilos al cargar una página con Divi”

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

  2. 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?

Deja un comentario

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

Información base sobre privacidad:
- Responsable: Fernando Tellado ([email protected])
- Fin del tratamiento: Moderación de comentarios para evitar spam
- Legitimación: Tu consentimiento
- Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal
- Derechos: Acceso, rectificación, portabilidad, olvido

 

Scroll al inicio