Detalle de la situación
Estoy diseñando una web en HTML y CSS, para un PMV (Producto mínimo viable). Observo que, al subir la web al servidor, hay un salto en la carga. Problema:
Primero aparece una imagen y después el HTML.
La prueba de renderización la hago desde diferentes dispositivos y características de red. En 4G, conexiones de fibra pura, y conexiones de fibra mediante enlace de radiofrecuencia (con una baja considerable de la velocidad); el salto se aprecia de la misma manera.
También se prueba en varios navegadores por si fuese una incompatibilidad con el renderizado.
Los datos del servidor son los siguientes:
La copia en local (mismo equipo: servidor virtual de Visual Studio Code) funciona perfectamente. Y la carga es instantánea.
El servidor en Internet es un compartido de gama baja que usa Varnish y tiene la caché deshabilitada (no me permitía ver los cambios sobre la marcha). Se usa certificado SSL Let’s Encrypt. La versión de HTTP es superior a http/1.1.
Para descartar problema con la configuración del servidor, se sube a otro servidor de otra empresa de hosting y el resultado es el mismo.
Recuerdo que todo el contenido es estático (HTML y CSS). El CSS apenas tiene estilos anidados para optimizar la carga en el navegador. De esta manera se simplifica el árbol de renderización, y por tanto se optimiza el tiempo de carga.
Casi todos los elementos están cargados en el mapa de clases. Salvo 3 elementos que cargan en el árbol de id. Y no hay nada de estilos en línea (dentro del HTML).
Todos los elementos se encuentran en el mismo contexto de pila, en decir la misma capa z-index. A excepción de la imagen que da el problema del salto visual. Esta se encuentra en una capa superior (z-index: 10), por lo que debería de ser el último en pintarse, y sin embargo es el primero que aparece en pantalla.
INVESTIGACIÓN Y PROCESO:
Analizo la cascada de carga en la pestaña de rendimiento en el navegador Mozilla (F12):
Advierto los gaps en la carga, e intento buscar qué lo causa. No lo consigo.
Opto por hacerlo en modo bruto:
- Reestructuro el CSS cambiando el orden de los elementos. Y todo sigue igual.
- Elimino los elementos de CSS que conlleva una carga extra como: *{} y var{}.
Reviso que no hay mucho CSS pisado (que se aplique un diseño y luego se vuelve a rediseñar). Lo que hay no es significativo.
Curichí, Curichí…
Me siento más perdido que una perdiz huidiza…
Sigo buscando pistas sobre la solución al problema. Mirando la carga de elementos en el inspector…
Todos cargan correctamente. Estado 200. Si no se atasca ahí, reviso los tiempos de carga:
Me llama la atención las cargas más altas (marcado en amarillo). Son tres imágenes relativas a fotos de clientes en un carrousel de opiniones.
¡Brutal! ¿Casi 1MB cada foto de 100px? No es normal…
Vale ya… están a 1024px…
Optimizo las imágenes al tamaño que aparecen en la web (100x100px).
Pierden demasiada calidad. Hay que ampliar el tamaño. Prefiero sacrificar un poco de velocidad de carga por tener que esperar a que el navegador redimensione la imagen al cargar. Las redimensiono a 200x200px. Tiene una calidad aceptable, aunque mejorable y el problema de carga de la web ha mejorado.
En el siguiente gráfico puedes ver cómo se ha reducido el número de operaciones por parte del navegador para realizar la misma tarea y los tiempos de carga:
CONCLUSIONES
El problema sigue ahí, pero se ha reducido considerablemente. Se ha mejorado de manera considerable el tiempo de carga. 1 segundo menos aproximadamente.
Realizo pruebas desde las ubicaciones anteriormente descritas y los resultado son los siguientes:
- En la conexión por radiofrecuencia no se aprecia el salto.
- En la conexión 4G, es prácticamente instantánea.
- En el caso de la Fibra, es donde más se nota un pequeño delay de renderización. Solo apreciable si conoces el proceso de renderización del navegador. Mientras comienza la carga de la imagen se carga por detrás el HTML.
Tras la investigación llego a la conclusión que el proceso de carga, se ve influido por la velocidad de conexión, pero es el adecuado y está optimizado. Probablemente con mejoras, pero llego hasta aquí.
¿Cómo lo mejoraría aun más?
- Retrasando la carga de los elementos que no aparecen en pantalla (lazy loading).
- Regeneraría el CSS entero, desde cero.
El resultado es más que aceptable por lo que las mejoras, para cuando evolucione de PMV a proyecto monetizable. Así que…
Hoy no. Mañana…