Antes de que una página termine de mostrarse, el navegador tiene que descargar en orden una cadena de recursos: primero el HTML, que hace referencia a una hoja de estilo, que a su vez importa una fuente tipográfica, que depende de otro archivo adicional. El árbol de dependencia de red (o cadenas de solicitudes críticas) es precisamente la representación de esa secuencia: qué recursos dependen de otros para poder cargarse, y en qué orden se van solicitando unos a otros.
Por qué esta cadena puede convertirse en un cuello de botella
Cada recurso de la cadena tiene que esperar a que el anterior se descargue (al menos parcialmente) antes de poder empezar su propia descarga, especialmente cuando existe una dependencia real entre ellos. Cuanto más larga sea esta cadena, y cuanto más pesado sea cada eslabón, más tiempo tarda en completarse el proceso completo antes de que la página quede totalmente renderizada.
Un ejemplo típico de cadena problemática
- El navegador descarga el HTML principal de la página.
- Dentro de ese HTML, encuentra una referencia a una hoja de estilo CSS y empieza a descargarla.
- Esa hoja de estilo hace referencia, a su vez, a una fuente tipográfica personalizada, que se descarga después.
- Hasta que no se completa toda esta cadena, ciertos elementos de la página no pueden mostrarse correctamente con su estilo final.
Cómo se detecta y se visualiza
Las herramientas de desarrollador de Chrome, y específicamente el informe de Lighthouse sobre «cadenas de solicitudes críticas», muestran de forma visual esta jerarquía de dependencias, señalando qué recursos forman parte de la ruta crítica que retrasa el renderizado principal de la página.
Cómo se acorta esta cadena en la práctica
Reducir el número de recursos que dependen unos de otros, por ejemplo integrando estilos críticos directamente en el HTML en lugar de en un archivo CSS externo separado. Usar precarga (preload) para recursos críticos que se sabe de antemano que van a necesitarse, permitiendo que empiecen a descargarse antes en paralelo. Y eliminar dependencias innecesarias, como fuentes o scripts de terceros que no son estrictamente esenciales para la carga inicial visible de la página.