HTML and CSS
navegador
recursos web
carga
prioridad
rendimiento web
Esta lección no trata sobre analizar HTML ni sobre el renderizado visual de un sitio web. Aquí queremos enfocarnos específicamente en cómo el navegador gestiona las solicitudes HTTP de recursos externos (como hojas de estilo, imágenes o scripts) después de construir el DOM. Comprender este proceso es clave para diagnosticar y optimizar la carga de un sitio web, especialmente cuando surgen problemas de rendimiento.
Asumimos que ya sabes:
Ahora damos un paso más profundo: ¿qué pasa con todos esos recursos que el HTML referencia? ¿El navegador los descarga todos al mismo tiempo? ¿Qué prioriza? ¿Qué puede bloquear la visualización?. ¡Vamos a descubrirlo!
La pregunta sería ¿los carga todos al mismo tiempo? ¿Qué pasa si hay muchos? Aquí es donde entra en juego la priorización de recursos. El navegador detecta en el HTML distintas etiquetas que indican recursos externos:
<link> → CSS<img> → imágenes<script> → JavaScript<video>, <audio>, <source> → medios@font-face → fuentes personalizadasCada uno de estos recursos necesita una solicitud adicional para ser descargado. Pero el navegador no lo hace en cualquier orden, prioriza lo que es esencial para mostrar la página correctamente.
CSS primero: Las hojas de estilo bloquean el renderizado de la página, ya que afectan cómo se ve. El navegador no muestra nada hasta que el CSS esté listo.
JavaScript después del CSS: Los scripts también pueden bloquear la visualización si están en el <head> y no se usa defer o async.
Imágenes y otros recursos visuales: Se cargan en segundo plano, una vez que el contenido principal ya está siendo procesado.
En JavaScript, podemos usarlo así:
1window.onload = function() { 2 console.log('La página completa se ha cargado'); 3 // Aquí es seguro manipular imágenes, estilos aplicados, etc. 4};
Nota:
onloadno es inmediato, ocurre después de que todo está descargado, incluyendo imágenes y videos.
Por eso no deberías usar onload para cosas que necesitan ejecutarse lo antes posible (por ejemplo, inicializar la interacción básica del usuario), sino más bien para tareas que dependen de que todo esté ya visible y disponible.
async: descarga el script en paralelo y lo ejecuta tan pronto como esté listo, sin esperar al resto del HTML. Esto puede hacer que la ejecución de scripts sea impredecible.
defer: descarga el script en paralelo pero espera a que el HTML esté completamente parseado antes de ejecutarlo, sin bloquear el análisis del documento.
En otras palabras, async y defer ocurren antes que onload y ayudan a acelerar la construcción inicial de la página sin afectar la descarga final de todos los recursos. Así que entender async, defer y onload te da control sobre cuándo y cómo corre tu JavaScript en relación al proceso de carga de la página.
Porque afecta directamente el tiempo de carga de la página. Si el navegador espera mucho tiempo para cargar un recurso clave (como un CSS bloqueante o un script grande), el usuario verá una pantalla en blanco por más tiempo.
Saber esto te permite:
defer, async, loading="lazy"Si compararamos este proceso con una cocina profesional, seria algo como esto:
flowchart TD A[El navegador termina de leer el HTML] --> B[Detecta enlaces a recursos externos] B --> C{¿Es CSS?} C -- Sí --> D[Cargar inmediatamente y bloquear renderizado] C -- No --> E{¿Es JS en <head>?} E -- Sí --> F[Ejecutar antes de seguir] E -- No --> G{¿Es imagen o recurso multimedia?} G -- Sí --> H[Cargar en segundo plano] H --> I[Mostrar página al usuario] F --> I D --> I
En el mundo del rendimiento web, hay un concepto clave: above the fold y below the fold.
loading="lazy" y su relación con el foldPara mejorar este comportamiento, existe un atributo muy útil en las imágenes: loading="lazy". Cuando agregamos loading="lazy" a una imagen:
Esto es perfecto para imágenes que están below the fold, porque ahorra ancho de banda inicial, acelera la construcción del DOM visible, reduce el tiempo hasta que el usuario ve algo útil.
1<img src="foto-pesada.jpg" loading="lazy" alt="Una imagen que aparece al hacer scroll">
Nota: Imágenes above the fold NO deberían tener
loading="lazy", porque el usuario las necesita ver enseguida.
Sí. Para lograr una carga más rápida, es una buena práctica:
async, defer, o lazy-loaded).Por ejemplo:
Esta estrategia ayuda a que el usuario vea y use el sitio mucho más rápido, incluso si la carga total de la página aún no ha terminado.
Estos conceptos son fundamentales para identificar y resolver problemas de carga lenta:
Pantallas en blanco por varios segundos: Puede deberse a CSS bloqueante o imágenes críticas con loading="lazy" aplicado erróneamente.
Tiempo hasta primer render muy alto (TTFB bajo, pero pantalla vacía): Suele indicar problemas con el orden de carga de CSS o JavaScript.
Scroll "congelado" o cargando lentamente: Probablemente hay demasiados recursos pesados below the fold que no están optimizados o no usan carga diferida.
Imágenes visibles que aparecen tarde o nunca: Es posible que tengan loading="lazy" pero estén above the fold (mal uso del lazy-loading).
Renderizado visible correcto pero fallos funcionales (botones, formularios): El JavaScript necesario para interacción fue diferido o se cargó demasiado tarde.