Network dependency tree no Lighthouse: como ler e corrigir

O que é a Network dependency tree no PageSpeed Insights?

A Network dependency tree no Lighthouse ("Avoid chaining critical requests" antes do Lighthouse 13) mostra os arquivos que a página precisa primeiro e por qual arquivo cada um esperou: cada arquivo encontrado dentro de outro gera uma espera. Hospede as fontes no próprio domínio, vincule as folhas de estilo no HTML em vez de usar @import e faça preconnect só quando um arquivo crítico vier de um domínio inevitável.

Quer apenas a solução rápida? Vá para web fonts, @import no WordPress, Shopify ou arquivos que um script adiciona.

Como ler a Network dependency tree?

O Lighthouse 13 e o PageSpeed Insights descrevem o 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". Ele substituiu "Avoid chaining critical requests" (antes "Minimize critical requests depth") e "Preconnect to required origins", motivo pelo qual duas tabelas de preconnect ficam abaixo da árvore.

O relatório abaixo vem da página inicial de um consultório odontológico que montei na estrutura de um site WordPress: a folha de estilo do tema filho importa a do tema pai, que importa o Google Fonts, e os ícones vêm do Font Awesome em uma CDN.

Lighthouse 13.6 no celular, throttling do DevTools (Slow 4G, 4x CPU).

• Uma linha recuada representa um arquivo que o navegador só encontrou dentro do arquivo do nível acima — e por isso teve que esperar por ele. Linhas no mesmo nível baixam em paralelo, como os três arquivos de fontes sob a folha de estilo css2 do Google.
• O tempo e os KiB em cada linha: quando o arquivo terminou de baixar, a partir do início do carregamento da página, e o tamanho dele.
• Maximum critical path latency é o tempo da cadeia mais lenta, em destaque laranja. Na página do consultório, é a fonte de ícones de 155 KiB dois níveis abaixo: ela chega depois das fontes do Google, que estão quatro níveis abaixo.
• LCP e Unscored: o aviso não tem peso na nota de Performance, mas as folhas de estilo atrasam o first paint, e o LCP nunca acontece antes dele.

O PageSpeed Insights registra o carregamento sem throttling: a árvore exibe tempos bem menores do que esta captura de tela.

Por que uma cadeia de arquivos atrasa a página?

Na página do consultório, o visitante vê primeiro uma tela branca, depois o texto em uma fonte de fallback que muda quando as web fonts chegam, com círculos vazios no lugar dos ícones.

O navegador lê o HTML com antecedência (o preload scanner) e requisita de uma vez todos os arquivos que encontra ali. Ele só encontra um arquivo declarado dentro de outro depois que esse outro arquivo chegou: uma fonte em uma folha de estilo, uma folha de estilo atrás de um @import, um script adicionado por outro script. Cada nível adiciona um round trip ao servidor antes que a próxima requisição possa começar.

Um arquivo em outro domínio espera ainda mais: o navegador precisa primeiro estabelecer uma conexão (DNS, TCP e TLS), o que em uma rede móvel demora várias vezes mais do que uma requisição em uma conexão aberta. Na página do consultório, as fontes do Google ficam quatro níveis abaixo do HTML, atrás de dois @imports — os dois últimos em novos domínios (fonts.googleapis.com, fonts.gstatic.com). O artigo sobre render-blocking requests explica por que uma folha de estilo trava o first paint.

Quanto a página ganha com uma árvore nivelada?

Após o fix, a página do consultório renderiza um segundo mais rápido e exibe as próprias fontes quase dois segundos antes. Testei três versões. A Antes tem os dois @imports. A Links traz os mesmos arquivos vinculados no HTML, como o WordPress faz com wp_enqueue_style. A Depois reúne as folhas de estilo do tema pai e do filho em um só arquivo, coloca as fontes no domínio do próprio site, aplica preload nas três e usa ícones em SVG inline.

Tempos em segundos, em um celular com throttling (Slow 4G, CPU 4x mais lenta). Níveis e cadeia mais lenta (Maximum critical path latency no relatório) obtidos no Lighthouse 13.6 com o mesmo throttling.

Dois segundos após o início do carregamento no mesmo celular com throttling.

A versão Links já entrega a maior parte do ganho no first paint porque elimina os dois níveis de @import, embora as fontes e os ícones ainda precisem esperar pelos próprios domínios. O LCP, que é a foto de destaque, acontece 0,4 s mais cedo após o fix. A Links alcança o LCP mais rápido porque ali a foto tem a largura de banda quase toda para si; na Depois, as três fontes com preload dividem a banda — por isso o fix aplica preload em apenas uma ou duas.

Para ver se os visitantes reais sofrem com essa cadeia, divida o LCP no celular em fases no CoreDash: folhas de estilo e fontes atrasadas aparecem como um render delay longo — a espera após a chegada da imagem de LCP ou, no caso de texto, após o primeiro byte.

CoreDash no celular, p75, com texto como elemento de LCP: compare o Render Delay com o Time To First Byte.

O que significam Preconnected origins e Preconnect candidates?

Um preconnect (<link rel="preconnect">) abre a conexão com um domínio antes que o navegador precise de um arquivo de lá. Preconnected origins lista os domínios para os quais a página faz preconnect; Preconnect candidates lista os domínios cujos arquivos ainda precisaram estabelecer conexão, indicando o tempo que um preconnect poderia economizar (Est LCP savings).

A mesma página do consultório com uma foto de destaque grande usando lazy loading, no Lighthouse 13.6 com throttling do DevTools.

• "Unused preconnect. Only use preconnect for origins that the page is likely to request." A página não carregou nada daquele domínio — neste caso, maps.googleapis.com e www.youtube.com. Remova a tag assim que confirmar que nenhum outro template, como o checkout, usa o domínio.
• "Unused preconnect. Check that the crossorigin attribute is used properly." Uma fonte exige uma conexão aberta com crossorigin; folhas de estilo ou scripts exigem uma conexão sem o atributo. O cdnjs.cloudflare.com envia para a página a folha de estilo e a fonte do Font Awesome. Com isso, a folha de estilo aproveitou o preconnect, e a fonte abriu uma segunda conexão. Hospede a fonte no próprio domínio; só quando não for possível, adicione um segundo preconnect para esse domínio com crossorigin.
• "More than 4 preconnect connections were found." Cada preconnect estabelece uma conexão em paralelo aos arquivos que a página precisa primeiro. Hospede o que puder no próprio domínio e mantenha o preconnect só para arquivos críticos de domínios inevitáveis.
• Um domínio em Preconnect candidates. Mova o arquivo para o próprio domínio; se isso não for possível e o arquivo for crítico, faça preconnect para ele.

Se ainda não der para hospedar o Google Fonts no próprio domínio, vincule a folha de estilo no HTML e faça preconnect para fonts.gstatic.com com crossorigin; o navegador se conecta ao fonts.googleapis.com assim que lê o link. Mas isso ainda mantém uma cadeia.

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

As configurações de preconnect em plugins nem sempre acertam o crossorigin: o DNS Preconnect do LiteSpeed Cache não coloca o atributo em nenhum domínio, e o Perfmatters só inclui onde você marca a caixa de seleção. Inspecione o código-fonte da página: apenas domínios de fontes precisam dele.

Como corrigir a Network dependency tree?

Comece pela cadeia mais lenta — a que o Lighthouse destaca em laranja —, na linha mais profunda. Para cada arquivo nela, pergunte: esse arquivo pode ser declarado direto no HTML ou vir do próprio domínio?

Google Fonts e outras web fonts

Sem mexer em código, ative a opção que hospeda o Google Fonts no próprio domínio: Self-host Google Fonts no WP Rocket ou FlyingPress, Local Google Fonts no Perfmatters, Load Google Fonts Locally no Elementor (Configurações, Performance) ou use o plugin OMGF. A configuração do WP Rocket não pega o @import do Google Fonts dentro da folha de estilo do tema; portanto, se fonts.googleapis.com continuar na árvore depois disso, remova o @import (próxima seção). Opções que carregam o Google Fonts de forma "assíncrona" usando um script font loader, como no LiteSpeed Cache e no Autoptimize, adicionam mais um nível à cadeia: em vez disso, hospede as fontes no próprio domínio.

Manualmente, insira as regras @font-face na própria folha de estilo, com os arquivos woff2 em uma pasta de fontes no mesmo diretório:

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

Como uma fonte só pode ser declarada dentro de uma folha de estilo, apenas o preload encurta essa cadeia. Use menos arquivos de fonte e aplique preload em um ou dois — começando pela fonte do maior texto visível na primeira tela — e meça o LCP em seguida:

<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">

O preload exige crossorigin, inclusive no próprio domínio; caso contrário, a fonte será baixada duas vezes. O artigo sobre font-display explica como funcionam os preloads de fonte.

No Next.js, o next/font já hospeda e aplica preload nas fontes automaticamente: substitua qualquer @import url(https://fonts.googleapis.com/...) manual no CSS pelo next/font.

Temas WordPress com @import

Se você apagar o @import do Google Fonts no tema pai, ele voltará no próximo update: procure uma opção de fontes nas configurações do tema ou peça ao desenvolvedor para fazer o enqueue das fontes.

Um @import da folha de estilo do tema pai dentro do style.css do tema filho adiciona um nível à cadeia. Peça ao criador do tema um tema filho sem esse import, ou envie ao desenvolvedor a árvore do relatório e este código para o functions.php do tema filho, que substitui o @import:

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

Depois, confira o código-fonte da página: a folha de estilo pai deve carregar apenas uma vez.

Fontes de ícones

O Font Awesome e os ícones do Elementor carregam uma folha de estilo que, por sua vez, carrega uma fonte com todos os ícones do pacote. No Elementor, ative a opção Inline Font Icons: ela substitui a folha de estilo e a fonte por SVG inline. Em outros casos, substitua os ícones usados na página por SVG inline ou hospede o Font Awesome no próprio domínio.

Shopify

Escolha as fontes direto no editor do tema (Configurações do tema, Tipografia) em vez de colar o código do Google Fonts no theme.liquid: assim, o tema passa a servi-las a partir do próprio domínio da loja, e o Dawn (junto com temas baseados nele) aplica preload automaticamente. App embeds que inserem folhas de estilo aparecem na árvore: desative um por um e rode o Lighthouse de novo. A Shopify envia os próprios preconnects nos headers da página — para a CDN dela e para os três primeiros domínios de onde vêm arquivos bloqueantes —, e o Lighthouse contabiliza essas conexões no limite de quatro. Remova qualquer preconnect antigo para cdn.shopify.com no theme.liquid e adicione tags próprias só para domínios que a árvore ainda exigir; cada app embed desativado pode eliminar um preconnect automático da Shopify. Se o aviso "More than 4 preconnect connections" continuar mesmo restando apenas os preconnects da própria Shopify, deixe como está.

Arquivos que um script adiciona e serviços que não dá para mudar

Uma folha de estilo adicionada por um script precisa esperar por ele: se a primeira tela depende desse CSS, insira a tag de link direto no HTML; se não, use defer no script. Ferramentas de consentimento que precisam rodar antes de tudo continuam bloqueando a renderização; se elas carregam arquivos de um segundo domínio que você não consegue evitar, faça preconnect para esse domínio. Se o servidor demora para gerar o HTML, o 103 Early Hints envia o preconnect e o preload das fontes antes do próprio HTML.

Por que a árvore continua vermelha depois do fix?

O Lighthouse marca o aviso em vermelho assim que o HTML carrega uma folha de estilo sequer — ou seja, uma página sem nenhuma cadeia ainda fica vermelha. Esse é o vermelho que pode ficar: o HTML e os arquivos declarados diretamente por ele. Toda linha recuada sob outro arquivo é uma cadeia que você deve corrigir:

• Fontes sob a própria folha de estilo. Use menos arquivos e aplique preload em um ou dois. Uma fonte que não aparece na primeira tela é a única cadeia que pode continuar ali.
• Arquivos adicionados por serviços. O Email Obfuscation da Cloudflare (email-decode.min.js) e o beacon do Web Analytics, ou o guest.vary.php do Guest Mode no LiteSpeed Cache. Desative o recurso.

Um bug conhecido do PageSpeed Insights às vezes coloca requisições de outros sites na árvore: basta rodar o teste de novo.

A página do consultório sem nenhuma cadeia restante, no Lighthouse 13.6 com throttling do DevTools.

Como verificar se a árvore ficou mais curta?

Rode o Lighthouse de novo e compare primeiro a quantidade de níveis e a cadeia mais lenta, já que Maximum critical path latency varia um pouco a cada teste. A coluna Initiator no painel Network do Chrome DevTools mostra qual arquivo requisitou cada recurso. Para visitantes reais, acompanhe o FCP e o LCP no celular pelo CoreDash a partir dos acessos seguintes; o Search Console leva até 28 dias.

A cadeia mais longa vem de um tema ou page builder que você não consegue editar, ou de um app que carrega fontes próprias? Em uma power hour de Core Web Vitals, analisamos a árvore juntos, arquivo por arquivo, para definir quais arquivos vão para o próprio domínio, quais entram direto no HTML e qual domínio ainda precisa de preconnect.