¿La aplicación tardía del css es debido al hosting?

JoseZabaleta · 9 Jul 2021

Hola compañer@s... Me sucede que la cabecera de mi página se carga sin estilos, y los estilos se aplican una fracción de segundo después... Escuché en un webinar que la causa de esta carga en 2 pasos, suele estar en el hosting... ¿En qué característica o funcionalidad del hosting estaría la causa?

Se agradece cualquier pista... Abrazo...

Goomaru · 9 Jul 2021

JoseZabaleta dijo:
Hola compañer@s... Me sucede que la cabecera de mi página se carga sin estilos, y los estilos se aplican una fracción de segundo después... Escuché en un webinar que la causa de esta carga en 2 pasos, suele estar en el hosting... ¿En qué característica o funcionalidad del hosting estaría la causa?

Se agradece cualquier pista... Abrazo...

tus estilos principales (CSS/JS) estan dentro del <head></head> de tu sitio web?

La velocidad de carga del sitio depende de muchos factores tanto el CMS utilizado, el CSS/JS mal incorporado, PLUGINS, Base de Datos, el hosting (ubicación) etc.

Para saber si es el hosting, abre tu CMD de tu PC y coloca el codigo:

Insertar CODE, HTML o PHP:

ping misitioweb.com

Aunque es raro esto, tengo sitios tanto en luxemburgo (400ms) como en USA (100ms) y ambos cargan de maravilla.

Seria muy raro que se descuadre tu diseño ...

JoseZabaleta · 9 Jul 2021

Gracias Goomaru... El sitio está construido con Wordpress y el tema Divi... por lo que los <link rel='stylesheet' están dentro de <head></head>. El código es correcto... Por otra parte, mediante un plugin he creado una versión estática del sitio, y utilizo Cloudflare, por lo que el sitio carga rápido... La cuestión es que se imprime el título inmediatamente, y una fracción de segundo después se aplican los estilos... y ese efecto no mola...

Como he dicho, el sitio es estático y utilizo CLoudflare... y si lo tengo bien entendido, Cloudflare lo tiene completamente cacheado, con los que me surge otra duda: ¿La causa de esta carga en 2 pasos está en mi hosting o en Cloudflare? Abrí un ticket en la comunidad de soporte de Cloudflare hace varios días, pero nadie ha respondido...

Esto es lo queme dice el ping:

Respuesta desde 104.21.23.250: bytes=32 tiempo=30ms TTL=55
Respuesta desde 104.21.23.250: bytes=32 tiempo=31ms TTL=55
Respuesta desde 104.21.23.250: bytes=32 tiempo=92ms TTL=55
Respuesta desde 104.21.23.250: bytes=32 tiempo=34ms TTL=55

Estadísticas de ping para 104.21.23.250:
Paquetes: enviados = 4, recibidos = 4, perdidos = 0
(0% perdidos),
Tiempos aproximados de ida y vuelta en milisegundos:
Mínimo = 30ms, Máximo = 92ms, Media = 46ms

Goomaru · 9 Jul 2021

JoseZabaleta dijo:
Gracias Goomaru... El sitio está construido con Wordpress y el tema Divi... por lo que los <link rel='stylesheet' están dentro de <head></head>. El código es correcto... Por otra parte, mediante un plugin he creado una versión estática del sitio, y utilizo Cloudflare, por lo que el sitio carga rápido... La cuestión es que se imprime el título inmediatamente, y una fracción de segundo después se aplican los estilos... y ese efecto no mola...

Como he dicho, el sitio es estático y utilizo CLoudflare... y si lo tengo bien entendido, Cloudflare lo tiene completamente cacheado, con los que me surge otra duda: ¿La causa de esta carga en 2 pasos está en mi hosting o en Cloudflare? Abrí un ticket en la comunidad de soporte de Cloudflare hace varios días, pero nadie ha respondido...

Esto es lo queme dice el ping:

Respuesta desde 104.21.23.250: bytes=32 tiempo=30ms TTL=55
Respuesta desde 104.21.23.250: bytes=32 tiempo=31ms TTL=55
Respuesta desde 104.21.23.250: bytes=32 tiempo=92ms TTL=55
Respuesta desde 104.21.23.250: bytes=32 tiempo=34ms TTL=55

Estadísticas de ping para 104.21.23.250:
Paquetes: enviados = 4, recibidos = 4, perdidos = 0
(0% perdidos),
Tiempos aproximados de ida y vuelta en milisegundos:
Mínimo = 30ms, Máximo = 92ms, Media = 46ms

si utilizas cloudflare entonces la velocidad de ping sera mucho mas bajo (cloudflare busca el CDN mas cercano a tu zona y te muestra ese contenido por lo que posiblemente estes utilizando cloudflare default (proxy) , por eso tiene 30ms a 90ms.

No utilizo DIVI pero hasta donde se tanto DIVI como elementor trabajan de esa forma ya que primero se ejecuta tu sitio, luego sigue los plugins por lo que DIVI necesita construir tu sitio a base del código guardado.

Si imprime el titulo y luego unos segundos aplica los estilos es posible que sea por DIVI (esta ejecutando JS/CSS aparte de los ya mencionados en el <head></head>
Que alguien que utilize DIVI/ELEMENTOR nos confirme eso...

Por ultimo, utiliza un plugin de cache como WP Rocket para que te genere paginas estáticas por un determinado tiempo, esto se verá muy notable tanto visual como estadístico (puedes analizarlo en pagespeed de google: https://developers.google.com/speed/pagespeed/insights/?hl=es )

Nota: Mencionaste que ya utilizas un plugin para lo de paginas estáticas, revisa que este bien configurado.
Tal vez pusiste "OMITIR" los JS/Javascript , recuerdo que eso me paso con WP Rocket y tuve que editar manualmente en OXYGEN.

JoseZabaleta · 9 Jul 2021

Gracias de nuevo... Planteé la cuestión en un foro de Divi, y a nadie le sucede lo mismo... Alguien me dijo que de los más de 100 sitios que ha hecho con Divi le sucedió en uno... He comprobado que los estilos a aplicar se encuentran en un fichero de los que están en <head></head>. Y en la versión estática generada, el fichero con el css sigue estando en <head></head>. Por tanto el código es correcto... y la causa ha de estar o en mi hosting o en Cloudflare... Por supuesto, también abrí un ticket en soporte del hosting... y me han respondido que la causa no está en el hosting... pero yo no veo otra explicación... por lo que he abierto este hilo, preguntando en qué característica o funcionalidad del hosting podría estar la causa, para así poder comentarlo a soporte del hosting...

JoseZabaleta · 15 Jul 2021

Pensé que la causa estaría fuera de Divi, quizá en el hosting, ya que creía que estos estilos estaban en alguno de los archivos .css contenidos antes de </head>, pero he descubierto que se encuentran al final del código, en una etiqueta <style id="et-builder-module-design-6403-cached-inline-styles"></style>

Había planteado la cuestión en varios foros, y por las respuestas, creí que esto solo me sucede a mí... pero finalmente he descubierto que no soy el único y que hay solución: https://www.designerless.com/stop-flash-of-ugly-site-while-divi-loads/

Me pregunto por qué esta carga en 2 pasos solo sucede en algunos sitios y no en todos, si Divi coloca el código de los estilos al final de la página...