Configurações do painel Network do Chrome DevTools para o Core Web Vitals
As configurações do painel Network que eu uso em todas as auditorias do Core Web Vitals
O painel Network do Chrome DevTools é uma das ferramentas mais úteis para depurar o Core Web Vitals. Mas as configurações padrão ocultam metade das informações que você precisa. Veja como eu configuro o painel Network em todas as auditorias.
Última revisão por Arjen Karel em março de 2026
Table of Contents!
Configurando o painel Network
Para acessar o painel Network, abra o Chrome DevTools (F12 ou Ctrl+Shift+I) e clique na aba "Network".
Throttling
Seus visitantes não estão no Wi-Fi do seu escritório. Globalmente, 30% das conexões móveis ainda estão no 3G e outros 55% estão no 4G (GSMA Mobile Economy 2025). O network throttling permite que você veja 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 seu público normalmente usa dispositivos móveis de ponta em condições de rede rápidas, ative "Fast 4G". Se as condições típicas da rede forem um pouco piores, selecione "Slow 4G". Caso contrário, jogue pelo seguro e 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 que você responda a perguntas como: o que acontece com meu LCP se esse script de terceiros carregar lentamente? Ou: como minha página se comporta quando a CDN está lenta, mas a conexão do usuário é rápida? É a maneira mais rápida de isolar o impacto no desempenho de um único recurso.
Disable Cache
Para garantir que você está testando seu site como um visitante iniciante o faria, marque a caixa de seleção "Disable cache" no painel Network.
Habilite as linhas grandes de requisição
As linhas grandes de requisição mostram detalhes críticos que a visualização compacta padrão oculta:
- A coluna size mostra tanto o tamanho compactado (transferência) quanto o tamanho descompactado (real) de cada requisição.
- A coluna name mostra o caminho completo, e não apenas o nome do arquivo.
- A coluna priority mostra o fetch priority inicial e final. É assim que você verifica se a sua imagem do LCP é carregada com prioridade High ou detecta quando o Chrome altera a prioridade de um recurso.
Habilite as capturas de tela
Habilite as capturas de tela e o Chrome fará uma tira de filme de cada mudança visual durante o carregamento da página. É assim que você detecta os layout shifts e verifica se o seu elemento LCP é renderizado quando você espera.
- Com a aba Network em foco, pressione Ctrl+F5 (Cmd+R no Mac) para recarregar a página.
- O Chrome irá capturar telas durante o processo de carregamento da página.
- Miniaturas dessas capturas de tela aparecerão abaixo da linha de caixas de seleção no painel Network.
A visão geral de capturas de tela tem alguns recursos práticos que você talvez ainda não conheça:
- Passe o mouse sobre uma captura de tela para ver quando ela foi feita. Isso será indicado por uma linha vertical amarela no gráfico de Overview.
- Clique na miniatura de uma captura de tela para filtrar as requisições que ocorreram após a captura ter sido feita.
- Dê um clique duplo em uma miniatura para aumentar o zoom e ver a captura de tela com mais detalhes.
Habilite as melhores colunas no Network
As colunas padrão perdem dados críticos. Clique com o botão direito em qualquer cabeçalho de coluna para adicionar mais. Estas são as que eu habilito em todas as auditorias:
| Nome da Coluna | Descrição | Por que isso importa para o Core Web Vitals |
|---|---|---|
| Name | Nome da requisição | Identificar cada recurso que o navegador faz download |
| Status | Códigos de status HTTP | Detectar redirecionamentos (301, 302) que adicionam latência ao seu TTFB, e 404s para recursos que desperdiçam uma viagem de rede (round trip) |
| Protocol | Protocolo de rede usado | O HTTP/3 elimina o bloqueio head-of-line. De acordo com o Cloudflare Radar, apenas 21% das requisições usam HTTP/3. Se a sua CDN suporta e você não vê h3 nesta coluna, verifique sua configuração de DNS |
| Domain | Domínio do recurso | Separar as requisições primárias das de terceiros. O 2024 Web Almanac descobriu que 92% das páginas carregam pelo menos um recurso de terceiros. Classificar por domínio revela o quanto do seu waterfall está fora do seu controle |
| Type | Tipo de recurso | Filtrar por tipo para isolar scripts, imagens ou fontes que competem por largura de banda |
| Initiator | Gatilho da requisição | Descobrir qual script ou folha de estilo disparou cada requisição. É assim que você rastreia uma cadeia lenta de requisições críticas de volta à sua origem |
| Size | Tamanho real e de transferência | Identificar recursos não compactados ou excessivamente grandes. A página móvel mediana carrega 66 requisições totalizando 2,3 MB (2024 Web Almanac) |
| Priority | Prioridade de carregamento do recurso | Mostra o fetch priority inicial e final. Verifique se a sua imagem do LCP é carregada com prioridade High e se os scripts não críticos são carregados com prioridade 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 seu LCP e FCP |
Habilite cabeçalhos de resposta personalizados
| Nome da Coluna | Descrição | Por que isso importa para o Core Web Vitals |
|---|---|---|
| Cache-Control | Comportamento de cache do recurso | Verifique se os ativos estáticos têm longos tempos de vida de cache e se o HTML tem revalidação apropriada. O armazenamento em cache deficiente força os visitantes recorrentes a baixar os recursos novamente, prejudicando todas as métricas. Veja também: Configuração de cache do Cloudflare |
| Link | Cabeçalho de resposta Link | Verifique se o seu servidor envia dicas de preload ou preconnect, incluindo via 103 Early Hints |
| Content-Encoding | A codificação usada | Verifique se o seu servidor envia Brotli (br) em vez de gzip. O Brotli compacta o JavaScript de 15 a 20% a menos que o gzip. O 2024 Web Almanac mostra que o Brotli ultrapassou o gzip para recursos JavaScript (45% vs 41%) |
Se você deseja analisar os cabeçalhos de resposta em massa sem abrir o DevTools para cada página, experimente o HTTP Header Performance Analyzer.
Conecte-se ao painel Performance
O painel Network mostra o que carrega e quando. Para ver como cada recurso afeta o Core Web Vitals, mude para o painel Performance. Agora ele mostra as pontuações ao vivo de LCP, CLS e INP sem gravar e pode sobrepor dados de campo do CrUX de usuários reais. Use o painel Network para diagnosticar e o painel Performance para confirmar.
Para o monitoramento contínuo além de uma única sessão de depuração, conecte uma ferramenta de Real User Monitoring para que você possa acompanhar se as correções do painel Network realmente melhoram os dados de campo ao longo do tempo.
A configuração completa
Recarregue a página com essas configurações e o seu painel Network ficará assim. Cada coluna mapeia algo que afeta o Core Web Vitals.
Escrevo código, não relatório.
Entro no seu time por 1 ou 2 sprints. Monto o monitoramento e garanto que o time mantém as métricas no verde depois que eu saio.
Entra em contato
