Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

Primeiros passos com a análise do desempenho de rede no Chrome DevTools

Aprenda a usar o painel Network do Chrome DevTools para entender em um tutorial interativo passo a passo por que uma página tem carregamento mais lento.

Etapa 1: configurar o DevTools

Suponha que usuários de dispositivos móveis informem que uma página específica do seu site esteja lenta. Seu trabalho é fazer com que essa página fique rápida.

  1. Clique em Open Slow Page. A página será aberta em uma nova guia.

  2. Com a página ainda em foco, pressione Command+Option+I (Mac) ou Control+Shift+I (Windows, Linux) para abrir o DevTools na página.

  3. No DevTools clique na guia Network.

    O painel Network do Chrome DevTools aberto sobre a
          página lenta a ser diagnosticada.
    Imagem 1. O painel Network do Chrome DevTools aberto ao lado da página lenta a ser diagnosticada.

  4. Ative a função Capture Screenshots Capture
   Screenshots. Ela fica na cor azul ao ser ativada. O DevTools faz capturas de tela durante o carregamento da página.

Etapa 2: emular a experiência de um usuário de dispositivo móvel

O teste de desempenho em laptops ou em computadores desktop pode causar enganos. Sua conexão com a internet é muito mais rápida do que a de um usuário de dispositivo móvel e seu navegador armazena informações de visitas anteriores em cache.

  1. Marque a caixa de seleção Disable Cache. Quando essa caixa de seleção está ativada, o DevTools não disponibiliza nenhum recurso do cache. Isso emula com mais precisão a experiência dos usuários que acessam sua página pela primeira vez.

  2. No menu suspenso onde há a informação No Throttling, selecione a opção Regular 2G. O DevTools limita a conexão de rede para simular uma experiência 2G comum. Essa é a experiência que usuários de dispositivos móveis têm ao acessar seu site em locais de conexão fraca.

O painel Network do Chrome DevTools após a configuração de capturas de tela,
         a desativação de cache e a limitação.
Imagem 2. O painel Network do Chrome DevTools configurado para emular a experiência de um usuário de dispositivo móvel. As capturas de tela, a desativação do cache e a limitação estão contornadas de azul, respectivamente da esquerda pra direita.

Essa é uma configuração no pior dos casos. Se você conseguir fazer com que sua página tenha um rápido carregamento nesse tipo de configuração, isso garantirá que ela seja rápida para todos os usuários.

Etapa 3: analisar as solicitações

Verifique os motivos que estão causando lentidão. Recarregue a página e analise as solicitações que aparecerem.

Parte A: encontre scripts bloqueadores de renderização

Ao encontrar uma tag <script>, o navegador precisa pausar a renderização e executar o script imediatamente. Encontre scripts que não são necessários para o carregamento da página e marque-os como assíncronos ou postergue a execução deles para carregar mais rapidamente.

  1. Pressione Command+R (Mac) ou Control+R (Windows, Linux) para recarregar a página. Em uma conexão Wi-Fi de qualidade a página leva mais de 10 segundos para carregar completamente.

    O painel Network do Chrome DevTools após recarregar a página.
    Imagem 3. O painel Network do Chrome DevTools após recarregar a página.

  2. Verifique o valor de DOMContentLoaded no painel Summary
    na parte inferior do painel Network. Você verá um valor de pelo menos quatro segundos. Ao visualizar o evento com esse atraso no acionamento, procure pelos scripts que estão atrasando o carregamento e a análise do documento principal.

  3. Clique em main.js para continuar investigando essa solicitação. O DevTools exibe um conjunto de novas guias que fornece mais informações sobre a solicitação.

  4. Clique na guia Preview para visualizar o código-fonte da solicitação. Perceba que o script trava por apenas 4.000 ms. Ao marcar o script com o atributo async e movê-lo para a parte inferior do <body> do documento, a página pode ser carregada sem precisar aguardar o script.

    Visualização do código-fonte para o main.js no painel Preview.
    Imagem 4. Visualização do código-fonte para o main.js no painel Preview.

Veja Bloqueio de analisador versus JavaScript assíncrono para saber mais sobre scripts bloqueadores de renderização.

Parte B: encontre solicitações extensas

Você percebeu que após o carregamento da página o logotipo do DevTools levou bastante tempo para carregar? Não há bloqueio do carregamento, mas isso faz com que a página apareça lentamente. Os usuários gostam quando as páginas aparecem rapidamente.

  1. Clique em Close Close para visualizar o painel Requests novamente.

  2. Clique duas vezes na captura de tela no canto superior esquerdo.

  3. Pressione a tecla direcional à direita para explorar o conjunto de capturas de tela. O tempo abaixo da captura de tela indica o momento em que ela foi feita. A captura de tela leva alguns segundos para carregar. Isso significa que provavelmente se trata de um arquivo muito extenso.

  4. Clique em qualquer local fora da captura de tela para minimizá-la.

  5. Passe o cursor sobre Waterfall para a solicitação logo-1024px.png. A solicitação leva grande parte do tempo fazendo o download da imagem. Isso confirma que a imagem é muito grande.

    A cascata para logo-1024px.png.
    Imagem 5. A cascata para logo-1024px.png.

Etapa 4: verificar correções na página atualizada

Você está quase terminando. Suponha agora que você já tenha feito duas mudanças na página:

  • Movimentou o script para o inferior do <body> e marcou como async para evitar que haja bloqueio de carregamento da página.
  • Converteu o logotipo para SVG, reduzindo seu tamanho.

Só falta testar a página atualizada para verificar que suas correções tornam o carregamento de fato mais rápido.

  1. Clique em Open Fast Page. A página corrigida é aberta em uma nova guia.

  2. Configure o DevTools da mesma forma que antes. A captura de tela e a desativação de cache devem estar habilitadas e a limitação de rede deve estar configurada como Regular 2G.

  3. Recarregue a página. A página é carregada muito mais rapidamente.

    Gravação do carregamento da página após a aplicação das correções.
    Imagem 6. Gravação do carregamento da página após a aplicação das correções. A página costumava levar cerca de 10 segundos para aparecer visualmente completa. Agora leva apenas cerca de um segundo.

Próximas etapas

Bom trabalho! Agora você é um verdadeiro expert no painel Network do Chrome DevTools. Bom... talvez um expert ainda não. No entanto, você tem um excelente embasamento de habilidades e conhecimentos.

Feedback

Was this page helpful?