Cómo solucionar el pestañeo de estilos que se produce con Elementor

Foto de Đồng Phục Hải Triều en Unsplash

Foto de Đồng Phục Hải Triều en Unsplash

Elementor da una facilidad de maquetación que bien vale su precio. Es una de las herramientas con las que me siento más cómoda. Eso sí, soy consciente de las desventajas que supone para la velocidad de la web. Y, por tanto, el desastrito que puede ser para el posicionamiento SEO de la misma. Uno de los temas que me tiene loca en los últimos tiempos es la necesidad de pintar las páginas lo más rápido posible y con los estilos correctos desde la primera milésima de segundo. Es necesario para no tener penalizaciones SEO y es algo que con Elementor, está difícil. Han ido añadiendo mejoras, hay plugins que pueden ayudar. Pero de pronto te encuentras con algo como lo que me trae en este post entre manos. Voy al grano:

Tengo una web con Woocommerce y Elementor. Maqueto la plantilla de archivo de productos, le pongo el widget para que muestre el listado y me da problemas con el número de productos, número de líneas… Decido utilizar el widget de Loop, en vez de el de Woocommerce. Elementor acaba de sacarlo para productos y funciona genial. Todos contentos hasta que mirando cómo carga la página ¡chín! se ve un blink. Así lo llamé yo pero luego, buscando a otras personas que se hayan encontrado con el mismo problema, me enteré de que se llama: Flash of Unstyled Content (FOUC)
Aquí te dejo el vídeo que me salvó la vida de horas y horas de desesperación y explicaciones vanas al cliente:

Y aquí te dejo el código explicado por Elementor:
https://elementor.com/help/dealing-with-flickers-fouc/

Por supuesto, si necesitas ayuda, puedes contactar conmigo, explicarme el proyecto y te lanzo un presupuesto.