As configurações perfeitas do painel Network do Chrome para otimizar os Core Web Vitals
Configure o painel Network do Chrome DevTools para máxima eficiência
As configurações perfeitas do painel Network do Chrome para otimizar os Core Web Vitals
O painel Network do Chrome DevTools é uma ferramenta indispensável para desenvolvedores web que desejam otimizar os Core Web Vitals. Infelizmente, as configurações padrão não são as melhores para otimizar a velocidade. Ao configurar as definições corretas, você pode simular com precisão as condições do mundo real e obter melhores insights sobre o desempenho do seu site. Este guia vai orientá-lo sobre a configuração ideal do painel Network do Chrome DevTools para analisar e melhorar suas pontuações de Core Web Vitals.
Configurando o painel Network
Para acessar o painel Network, abra o Chrome DevTools (F12 ou Ctrl+Shift+I) e clique na aba "Network".
Throttling
Uma das configurações mais importantes para otimizar os Core Web Vitals é o network throttling. Isso permite simular várias condições de rede que seus usuários podem experimentar.
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 seu público normalmente usa dispositivos móveis de alta qualidade em condições de rede rápidas, ative "Fast 4G". Se as condições típicas de rede forem um pouco piores, selecione "Slow 4G" e caso contrário, jogue pelo seguro e selecione "3G"
Desativar Cache
Para garantir que você está testando seu site como um visitante de primeira vez experimentaria: Marque a caixa de seleção "Disable cache" no painel Network.
Ativar Big request Rows
Big request rows fornece uma visão mais abrangente de cada requisição. As informações novas mais importantes que isso lhe dará são:
- A coluna size agora mostrará o tamanho descompactado e compactado da requisição.
- As colunas name darão informações sobre o caminho.
- A coluna priority mostrará a prioridade de busca inicial e final.
Ativar Screenshots
Quando você ativa Screenshots, o Chrome capturará capturas de tela durante os carregamentos de página. Cada captura de tela representa uma mudança visual na página e pode ser usada para entender as diferentes etapas do carregamento da página e identificar Cumulative Layout Shift.
- Com a aba Network em foco, pressione Ctrl+F5 (Cmd+R no Mac) para atualizar a página.
- O Chrome capturará capturas de tela 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 das capturas de tela possui 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 capturada. Isso será indicado por uma linha vertical amarela no gráfico Overview.
- Clique em uma miniatura de captura de tela para filtrar as requisições que ocorreram após aquela captura de tela ser tirada.
- Clique duas vezes em uma miniatura para ampliar e visualizar a captura de tela em mais detalhes.
Ativar as melhores colunas de rede
Para encontrar problemas de Core Web Vitals, os seguintes painéis fornecerão informações úteis. Basta clicar com o botão direito em qualquer nome de coluna e selecionar suas colunas preferidas
Em seguida, ative as seguintes colunas que têm importância para os Core Web Vitals:
| Nome da Coluna | Descrição | Importância para os Core Web Vitals |
|---|---|---|
| Name | Nome da requisição | Identificar recursos |
| Status | Códigos de status HTTP | Monitorar códigos não-200 (301 e 302 para encontrar redirecionamentos e 404 / 410 para recursos que não existem) |
| Protocol | Protocolo de rede utilizado | Priorizar HTTP/3 para desempenho |
| Domain | Domínio do recurso | Identificar recursos de terceiros |
| Type | Tipo de recurso | Categorizar requisições |
| Initiator | Gatilho da requisição | Entender origens das requisições |
| Size | Tamanho de transferência e real | Identificar requisições grandes |
| Priority | Prioridade de carregamento de recursos | Garantir priorização correta |
| Waterfall | Linha do tempo visual das requisições | Analisar sequência de carregamento |
Ativar estes Custom Response Headers:
Ative estes Custom Response Headers:
| Nome da Coluna | Descrição | Importância para os Core Web Vitals |
|---|---|---|
| Cache-Control | Comportamento de cache do recurso | Identificar recursos |
| Link | Cabeçalho de resposta Link | Verificar cabeçalhos de preloading ou prefetch |
| Content-Encoding | A codificação utilizada | Verificar compressão de recursos |
O resultado final:
Agora é hora de recarregar a página e ver a resposta de rede nova e melhorada na aba Network do Chrome. Ficará parecido com isso e mostra todas as informações que você precisa para começar a depurar os Core Web Vitals!
Performance is a Feature.
Treating speed as an afterthought fails. Build a performance culture with a dedicated 2-sprint optimization overhaul.
- 2-Sprint Overhaul
- Culture Building
- Sustainable Speed
