Configurações do painel Network do Chrome DevTools para os Core Web Vitals
As configurações do painel Network que uso em toda auditoria de Core Web Vitals
O painel Network do Chrome DevTools é uma das ferramentas mais úteis para depurar os Core Web Vitals. Mas a configuração padrão esconde metade das informações necessárias. Veja como configuro o painel Network em toda auditoria.
Última revisão por Arjen Karel em março de 2026
Table of Contents!
Como configurar o painel Network
Para acessar o painel Network, abra o Chrome DevTools (F12 ou Ctrl+Shift+I) e clique na aba "Network".
Throttling
Os visitantes não usam o Wi-Fi do seu escritório. No mundo todo, 30% das conexões móveis ainda são 3G e outros 55% são 4G (GSMA Mobile Economy 2025). O throttling de rede permite ver o que eles veem.
Clique no menu suspenso "No throttling" no painel Network. Selecione "Fast 4G", "Slow 4G" ou "3G" para simular condições de rede móvel. A melhor opção depende do seu público. Se o público costuma usar celulares topo de linha em redes rápidas, ative "Fast 4G". Se as condições típicas de rede forem um pouco piores, selecione "Slow 4G". Para garantir, selecione "3G".
Throttling em requisições individuais (Chrome 145+)
Desde dezembro de 2025, você pode aplicar throttling a uma única requisição em vez da página inteira. Clique com o botão direito em qualquer requisição no painel Network e selecione "Throttle request". Isso permite responder a perguntas como: o que acontece com o LCP se este script de terceiros carregar devagar? Ou: como a página se comporta quando a CDN está lenta, mas a conexão do usuário é rápida? É a forma mais rápida de isolar o impacto de um único recurso no desempenho.
Desativar o cache
Para testar o site como um novo visitante experimentaria, marque a opção "Disable cache" no painel Network.
Ativar linhas grandes de requisição
As linhas grandes de requisição mostram detalhes críticos que a visualização compacta padrão esconde:
- A coluna size mostra tanto o tamanho compactado (transferência) quanto o descompactado (real) de cada requisição.
- A coluna name mostra o caminho completo, não apenas o nome do arquivo.
- A coluna priority mostra o fetch priority inicial e final. É assim que você confirma se a imagem do LCP carrega com prioridade High ou percebe quando o Chrome reprioriza um recurso.
Ativar capturas de tela
Ative as capturas de tela e o Chrome registrará um filmstrip de cada mudança visual durante o carregamento da página. É assim que você identifica layout shifts e confirma se o elemento LCP renderiza no momento esperado.
- Com a aba Network em foco, pressione Ctrl+F5 (Cmd+R no Mac) para recarregar a página.
- O Chrome capturará telas durante o processo de carregamento.
- Miniaturas dessas capturas aparecerão abaixo da linha de caixas de seleção no painel Network.
A visualização de capturas de tela traz recursos úteis que talvez você ainda não conheça:
- Passe o cursor sobre uma captura para ver quando ela foi feita. Uma linha vertical amarela indicará o momento no gráfico Overview.
- Clique na miniatura de uma captura para filtrar as requisições feitas após aquele momento.
- Dê um clique duplo na miniatura para aproximar e ver a captura em detalhes.
Ativar as melhores colunas do painel Network
As colunas padrão deixam passar dados críticos. Clique com o botão direito no cabeçalho de qualquer coluna para adicionar outras. São estas que ativo em toda auditoria:
| Nome da coluna | Descrição | Por que importa para os Core Web Vitals |
|---|---|---|
| Name | Nome da requisição | Identifica cada recurso que o navegador baixa |
| Status | Códigos de status HTTP | Identifica redirecionamentos (301, 302) que aumentam a latência do TTFB, além de erros 404 de recursos que desperdiçam um round trip de rede |
| Protocol | Protocolo de rede utilizado | O HTTP/3 elimina o bloqueio de início de fila (head-of-line blocking). Segundo o Cloudflare Radar, apenas 21% das requisições usam HTTP/3. Se a sua CDN for compatível e você não vir h3 nesta coluna, confira a configuração de DNS |
| Domain | Domínio do recurso | Separa requisições first-party de third-party. O Web Almanac 2024 constatou que 92% das páginas carregam pelo menos um recurso de terceiros. Ordenar por domínio revela quanto do seu waterfall está fora do seu controle |
| Type | Tipo de recurso | Filtre por tipo para isolar scripts, imagens ou fontes que disputam largura de banda |
| Initiator | Gatilho da requisição | Descubra qual script ou folha de estilo disparou cada requisição. É assim que você rastreia uma cadeia lenta de requisições críticas até a origem |
| Size | Tamanho de transferência e real | Identifica recursos não comprimidos ou pesados demais. A página mediana no celular carrega 66 requisições totalizando 2,3 MB (Web Almanac 2024) |
| Priority | Prioridade de carregamento do recurso | Mostra o fetch priority inicial e final. Confirme se a imagem do LCP carrega em High e se scripts não críticos carregam em Low |
| Waterfall | Linha do tempo visual das requisições | A linha do tempo que mostra onde o tempo é gasto. Barras longas antes da primeira renderização afetam diretamente o LCP e o FCP |
Ativar cabeçalhos de resposta personalizados
| Nome da coluna | Descrição | Por que importa para os Core Web Vitals |
|---|---|---|
| Cache-Control | Comportamento de cache do recurso | Confirme se os recursos estáticos têm longos períodos de cache e se o HTML conta com a devida revalidação. Um cache mal configurado força visitantes recorrentes a baixar os recursos de novo, prejudicando todas as métricas. Veja também: configuração de cache da Cloudflare |
| Link | Cabeçalho de resposta Link | Verifique se o servidor envia hints de preload ou preconnect, inclusive via 103 Early Hints |
| Content-Encoding | A codificação utilizada | Confirme se o servidor envia Brotli (br) em vez de gzip. O Brotli compacta JavaScript deixando o arquivo de 15% a 20% menor que o gzip. O Web Almanac 2024 mostra que o Brotli já ultrapassou o gzip em recursos JavaScript (45% contra 41%) |
Se você quiser analisar cabeçalhos de resposta em lote sem abrir o DevTools página por página, use o HTTP Header Performance Analyzer.
Conectar ao painel Performance
O painel Network mostra o que carrega e quando. Para ver como cada recurso afeta os Core Web Vitals, mude para o painel Performance. Ele agora exibe pontuações de LCP, CLS e INP em tempo real sem precisar gravar, além de poder sobrepor field data do CrUX de usuários reais. Use o painel Network para diagnosticar e o painel Performance para confirmar.
Para monitoramento contínuo além de uma única sessão de depuração, conecte uma ferramenta de Real User Monitoring. Assim, você acompanha se os ajustes feitos no painel Network realmente melhoram o field data ao longo do tempo.
A configuração completa
Recarregue a página com essas configurações e o painel Network ficará assim. Cada coluna mapeia algo que afeta os Core Web Vitals.
Fiz o CoreDash pras minhas próprias auditorias.
Menos de 1KB. Hospedado na UE. Sem banner de cookies. Agora com suporte a MCP.
Testa o CoreDash grátis
