Network dependency tree en Lighthouse: cómo leerlo y corregirlo

¿Qué es el Network dependency tree en PageSpeed Insights?

El Network dependency tree de Lighthouse («Avoid chaining critical requests» antes de Lighthouse 13) muestra los archivos que la página necesita primero y a qué archivo esperó cada uno: cada archivo encontrado dentro de otro añade una espera. Aloja las fuentes en tu propio dominio, enlaza las hojas de estilo en el HTML en lugar de usar @import y haz preconnect solo cuando un archivo crítico venga de un dominio que no puedas evitar.

¿Solo buscas el fix rápido? Salta a fuentes web, @import en WordPress, Shopify o archivos que añade un script.

¿Cómo leer el Network dependency tree?

Lighthouse 13 y PageSpeed Insights describen el aviso como: «Avoid chaining critical requests by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load». Sustituyó a «Avoid chaining critical requests» (antes «Minimize critical requests depth») y a «Preconnect to required origins»; por eso hay dos tablas de preconnect debajo del árbol.

El informe de abajo procede de la página de inicio de una clínica dental que monté como un sitio WordPress: la hoja de estilo del tema hijo importa la del padre, que a su vez importa Google Fonts, y los iconos vienen de Font Awesome en una CDN.

Lighthouse 13.6 en móvil, throttling de DevTools (Slow 4G, 4x CPU).

• Una fila con sangría es un archivo que el navegador solo encontró dentro del archivo del nivel superior, por lo que tuvo que esperar por él. Las filas del mismo nivel se descargan en paralelo, como los tres archivos de fuentes bajo la hoja de estilo css2 de Google.
• El tiempo y los KiB de cada fila: cuándo llegó ese archivo, contado desde el inicio de la carga de la página, y su tamaño.
• Maximum critical path latency es el tiempo de la cadena más lenta, en naranja. En la página de la clínica es la fuente de iconos de 155 KiB a dos niveles de profundidad: llega después de las fuentes de Google situadas cuatro niveles más abajo.
• LCP y Unscored: el aviso no tiene peso en la puntuación de Performance, pero sus hojas de estilo frenan el primer pintado, y el LCP nunca puede ocurrir antes.

PageSpeed Insights registra la carga sin throttling: su árbol muestra tiempos mucho más cortos que esta captura.

¿Por qué una cadena de archivos retrasa la página?

En la página de la clínica, el visitante ve primero una pantalla en blanco, luego texto con una fuente fallback que cambia cuando llegan las fuentes web, y círculos vacíos donde van los iconos.

El navegador lee el HTML por anticipado (el preload scanner) y pide a la vez todos los archivos que encuentra allí. Solo descubre un archivo referenciado dentro de otro cuando ese otro archivo ha llegado: una fuente en una hoja de estilo, una hoja de estilo tras un @import o un script que añade otro script. Cada nivel añade un round trip al servidor antes de que la siguiente petición pueda empezar.

Un archivo en otro dominio espera todavía más: el navegador primero debe establecer la conexión (DNS, TCP y TLS), lo que en una red móvil tarda varias veces más que una petición en una conexión abierta. En la página de la clínica, las fuentes de Google están cuatro niveles por debajo del HTML, detrás de dos @import, los dos últimos en dominios nuevos (fonts.googleapis.com, fonts.gstatic.com). Render-blocking requests explica por qué una hoja de estilo frena el primer pintado.

¿Cuánto más rápida es la página con un árbol plano?

Tras el fix, la página de la clínica pinta un segundo antes y muestra sus propias fuentes casi dos segundos antes. Medí tres versiones. Antes tiene los dos @import. Enlaces tiene los mismos archivos enlazados en el HTML, tal como los imprime WordPress con wp_enqueue_style. Después tiene las hojas de estilo del tema padre y del tema hijo en un solo archivo, las fuentes en el propio dominio del sitio, las tres con preload, y los iconos como SVG inline.

Tiempos en segundos, en un móvil con throttling (Slow 4G, CPU 4 veces más lenta). Niveles y cadena más lenta (Maximum critical path latency en el informe) de Lighthouse 13.6 con el mismo throttling.

A los dos segundos de carga en el mismo móvil con throttling.

Enlaces ya aporta la mayor parte de la ganancia en el primer pintado, porque desaparecen los dos niveles de @import, mientras que las fuentes y los iconos todavía esperan a sus propios dominios. El LCP, la foto principal, llega 0,4 s antes tras el fix. Enlaces consigue el LCP más rápido porque allí la foto tiene casi todo el ancho de banda para ella sola; en Después, las tres fuentes con preload lo comparten, así que el fix precarga una o dos.

Para ver si los visitantes reales sufren la espera de la cadena, desglosa el LCP en móvil en sus partes en CoreDash: las hojas de estilo y las fuentes tardías aparecen como un render delay largo, la espera después de que llegue la imagen del LCP o, en el texto, el primer byte.

CoreDash en móvil, p75, texto como elemento del LCP: compara el Render Delay con el Time To First Byte.

¿Qué significan Preconnected origins y Preconnect candidates?

Un preconnect (<link rel="preconnect">) abre la conexión con un dominio antes de que el navegador necesite un archivo de allí. Preconnected origins lista los dominios hacia los que la página hace preconnect; Preconnect candidates muestra los dominios cuyo archivo todavía tuvo que establecer una conexión, junto con el tiempo que un preconnect podría ahorrar (Est LCP savings).

La misma página de la clínica con una foto principal grande con lazy loading, Lighthouse 13.6 con throttling de DevTools.

• «Unused preconnect. Only use preconnect for origins that the page is likely to request.» La página no cargó nada de ese dominio, en este caso maps.googleapis.com y www.youtube.com. Elimínalo una vez que hayas comprobado que ninguna otra plantilla, como la del checkout, lo usa.
• «Unused preconnect. Check that the crossorigin attribute is used properly.» Una fuente necesita una conexión abierta con crossorigin; una hoja de estilo o un script, sin él. cdnjs.cloudflare.com envía a la página de la clínica la hoja de estilo y la fuente de Font Awesome: la hoja de estilo aprovechó el preconnect y la fuente abrió una segunda conexión. Aloja la fuente tú mismo; solo cuando no puedas, añade un segundo preconnect a ese dominio con crossorigin.
• «More than 4 preconnect connections were found.» Cada preconnect abre una conexión a la vez que se piden los archivos que la página necesita primero. Aloja lo que puedas en tu propio dominio y mantén un preconnect solo para un archivo crítico en un dominio que no puedas evitar.
• Un dominio en Preconnect candidates. Mueve ese archivo a tu propio dominio; cuando no puedas y el archivo sea crítico, haz preconnect hacia él.

Si todavía no puedes alojar Google Fonts por tu cuenta, enlaza su hoja de estilo en el HTML y haz preconnect a fonts.gstatic.com, con crossorigin; el navegador se conectará a fonts.googleapis.com en cuanto lea el enlace. Aun así, esto sigue dejando una cadena.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Los ajustes de preconnect de los plugins no siempre configuran bien crossorigin: DNS Preconnect de LiteSpeed Cache no lo incluye en ningún dominio, y Perfmatters solo donde marcas la casilla. Revisa el código fuente de la página: solo los dominios de fuentes lo necesitan.

¿Cómo solucionar el Network dependency tree?

Empieza por la cadena más lenta, la que Lighthouse marca en naranja, en su fila más profunda. Para cada archivo que contenga, pregúntate: ¿puede este archivo enlazarse en el HTML o venir de mi propio dominio?

Google Fonts y otras fuentes web

Sin tocar código, activa el ajuste que aloja Google Fonts en tu dominio: Self-host Google Fonts en WP Rocket o FlyingPress, Local Google Fonts en Perfmatters, Load Google Fonts Locally en Elementor (Settings, Performance) o el plugin OMGF. El ajuste de WP Rocket pasa por alto un @import de Google Fonts en la hoja de estilo del tema: si después fonts.googleapis.com sigue en el árbol, elimina el @import (siguiente sección). Cualquier opción que cargue Google Fonts «de forma asíncrona» con un script cargador de fuentes, como en LiteSpeed Cache y Autoptimize, añade un nivel a la cadena: aloja las fuentes tú mismo en su lugar.

A mano, pon las reglas @font-face en tu propia hoja de estilo, con los archivos woff2 en una carpeta de fuentes junto a ella:

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/poppins-v24-latin-700.woff2") format("woff2");
}

Una fuente solo puede declararse dentro de una hoja de estilo, por lo que únicamente un preload acorta esta cadena. Usa menos archivos de fuentes, luego haz preload de uno o dos (primero la fuente del texto más grande de la primera pantalla) y comprueba el LCP después:

<link rel="preload" href="/wp-content/themes/acme-smile/fonts/poppins-v24-latin-700.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/wp-content/themes/acme-smile/fonts/open-sans-v44-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/wp-content/themes/acme-smile/style.css?ver=2.5.0">

El preload necesita crossorigin, también en tu propio dominio, o la fuente se descargará dos veces. Font display explica los preloads de fuentes.

En Next.js, next/font ya aloja y precarga las fuentes: sustituye cualquier @import url(https://fonts.googleapis.com/...) escrito a mano en un archivo CSS por next/font.

Temas de WordPress con @import

Un @import de Google Fonts que borres del tema padre volverá con la siguiente actualización: busca un ajuste de fuentes en el tema o pide a su desarrollador que encole las fuentes.

Un @import de la hoja de estilo del padre en el style.css de un tema hijo añade un nivel. Pide al creador del tema un tema hijo sin él, o pásale a un desarrollador el árbol del informe y este código para el functions.php del tema hijo, que sustituye al @import:

add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
} );

Revisa el código fuente después: la hoja de estilo del padre debería cargar solo una vez.

Fuentes de iconos

Font Awesome y los iconos de Elementor cargan una hoja de estilo que carga una fuente con todos los iconos. En Elementor, activa Inline Font Icons: sustituye la hoja de estilo y la fuente por SVG inline. En cualquier otro caso, sustituye los iconos que usa la página por SVG inline, o aloja Font Awesome en tu propio dominio.

Shopify

Elige las fuentes en el editor del tema (Theme settings, Typography) en lugar de pegar código de Google Fonts en theme.liquid: así el tema las sirve desde el propio dominio de la tienda, y tanto Dawn como los temas basados en él las precargan. Los app embeds que añaden una hoja de estilo aparecen en el árbol: desactívalos de uno en uno y vuelve a pasar Lighthouse. Shopify envía sus propios preconnects en las cabeceras de la página hacia su CDN y hacia los tres primeros dominios externos de los que proceden los archivos bloqueantes, y Lighthouse los cuenta en su límite de cuatro. Elimina un preconnect antiguo a cdn.shopify.com de theme.liquid y añade el tuyo solo para un dominio que el árbol todavía necesite; cada app embed que desactives puede eliminar uno de los de Shopify. Si «More than 4 preconnect connections» sigue apareciendo cuando solo quedan los de Shopify, déjalo así.

Archivos que añade un script y servicios que no puedes cambiar

Una hoja de estilo que añade un script espera a ese script: si la primera pantalla la necesita, pon su enlace en el HTML; si no, aplica defer al script. Una herramienta de consentimiento que deba ejecutarse primero seguirá bloqueando; cuando cargue archivos de un segundo dominio que no puedas evitar, haz preconnect a ese dominio. Cuando el servidor tarda en generar el HTML, 103 Early Hints envía el preconnect y el preload de la fuente antes que el propio HTML.

¿Por qué el árbol sigue en rojo después del fix?

Lighthouse marca el aviso en rojo en cuanto el HTML carga una sola hoja de estilo, así que una página sin cadenas sigue en rojo. Ese es el rojo que puedes conservar: el HTML y los archivos que referencia directamente. Cada fila con sangría bajo otro archivo es una cadena a corregir:

• Fuentes bajo tu propia hoja de estilo. Usa menos archivos y haz preload de uno o dos. Una fuente que la primera pantalla no muestra es la única cadena que puede quedarse.
• Archivos que añade un servicio. Email Obfuscation de Cloudflare (email-decode.min.js) y el beacon de Web Analytics, o guest.vary.php del Guest Mode de LiteSpeed Cache. Desactiva la función.

Un bug conocido de PageSpeed Insights a veces incluye peticiones de otros sitios en el árbol: vuelve a pasar el test.

La página de la clínica sin ninguna cadena, Lighthouse 13.6 con throttling de DevTools.

¿Cómo comprobar que el árbol se ha acortado?

Vuelve a pasar Lighthouse y compara primero los niveles y la cadena más lenta, ya que Maximum critical path latency varía un poco de una ejecución a otra. La columna Initiator en el panel Network de Chrome DevTools muestra qué archivo pidió cada archivo. Para ver a los visitantes reales, vigila el FCP y el LCP en móvil en CoreDash a partir de las siguientes visitas; Search Console tarda hasta 28 días.

¿Tu cadena más larga viene de un tema o page builder que no puedes editar, o de una app que carga sus propias fuentes? En una Core Web Vitals power hour revisamos el árbol juntos, archivo por archivo, y decidimos qué archivos pasan a tu propio dominio, cuáles van al HTML y qué dominio sigue necesitando un preconnect.