Question

Hola....Tengo un navbar con position fixed la cual la tengo en un archivo aparte llamado cabezera.php,y ademas de eso lo utilizo en varias paginas haciendo uso de include().

Problema?

Bien.El problema esta en que cuando actualizo o simplemente hago refresh a las paginas todo los elementos que conforman este navbar se ven sin el CSS por un momento hasta que termina de refrescarse la pagina.¿Cual es la solución a este problema?

Answer 1

Hola @luis2016,

no tiene mucha solución, pero no debería ser un problema en producción.

Para que el CSS cargue lo más rápido posible, debe estar al principio del head HTML del sitio. Luego los JavaScript y otras cosas de la página.

El navegador cargará la página, y al encontrar la primer referencia a oro archivo, abrirá una nueva tarea y la empezará a cargar.

Mientras no se carguen las reglas, estas no se podrán aplicar el HTML que se está descargando, y por eso por un momento se puede ver el HTML sin el estilo.

Sin embargo, con el sitio publicado, el CSS quedará cacheado en el navegador y esto podría pasar solo a un visitante que vaya al sitio por primera vez. Para todas las demás páginas, el CSS ya está en el disco del visitante y se aplica a medida que se descarga el HTML.

Vos lo verás más seguido, porque durante el desarrollo forzarás la carga completa de toda la página, con lo que tenés el efecto de la primera vez más seguido.

Podés mejorar un poco esto minificando el CSS y poniendo la definición del navbar al principio.

Recordá que al navegador le llega el HTML generado: no tiene que ver esto con que la cabecera esté en un include() o no.

Saludos cordiales!