Painel de desempenho: analise o desempenho do seu site

Dale St. Marthe
Dale St. Marthe
LinkedIn

Use o painel Performance para analisar o desempenho do seu site.

Visão geral

O painel Performance permite gravar perfis de desempenho da CPU dos seus aplicativos da Web. Analisar perfis para encontrar possíveis gargalos de desempenho e formas de otimizar o uso de recursos.

Use o painel Performance para fazer o seguinte:

  • Grave um perfil de performance.
  • Mudar as configurações de captura.
  • Analisar um relatório de performance.

Para ver um guia completo sobre como melhorar o desempenho do seu site, consulte Analisar o desempenho em tempo de execução.

Abrir o painel de desempenho

Para abrir o painel Performance, abra as Ferramentas do desenvolvedor e selecione Performance em um conjunto de guias na parte de cima.

Como alternativa, siga estas etapas para abrir o painel Performance com o menu de comando:

  1. Abra o DevTools.
  2. Abra o menu de comando pressionando:
  3. macOS: Command+Shift+P
  4. Windows, Linux e ChromeOS: Control + Shift + P Menu de comando com
  5. Comece a digitar Performance panel, selecione Mostrar painel de desempenho e pressione Enter.

Observar as Core Web Vitals ao vivo

Quando você abre o painel Desempenho, ele imediatamente captura e mostra suas métricas locais Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS) informa a pontuação (boa, precisa de melhorias ou ruim).

Se você interagir com a página, o painel Performance também vai capturar a Interaction to Next Paint (INP) local e a pontuação dela, que, além do LCP e do CLS, oferece uma visão geral completa das Core Web Vitals da sua página usando sua conexão de rede e dispositivo.

O painel Desempenho apresenta uma lista de interações capturadas nos três cards de métricas. Para limpar a lista, clique em Limpar.

Para conferir um detalhamento da pontuação de uma métrica, passe o cursor sobre o valor dela para ver uma dica.

Compare sua experiência com a dos usuários

Você também pode buscar dados de campo no Chrome UX Report e comparar a experiência dos usuários do site com as métricas locais.

Para adicionar dados de campo:

  1. Em Performance > Próximas etapas > Dados de campo, clique em Configurar.

    O botão "Configurar" na seção "Próximas etapas".

  2. Na caixa de diálogo Configurar busca de dados de campo, observe a Divulgação de privacidade e clique em Ok.

    Avançado: configure um mapeamento entre os ambientes de desenvolvimento e de produção...

    Para receber automaticamente os dados de campo mais relevantes, configure (vários) mapeamentos entre as origens de desenvolvimento e de produção:

    1. Na janela de diálogo, expanda a seção Avançado e clique em + Novo.

    2. Na tabela de mapeamento, insira os URLs de desenvolvimento e de produção e clique em +.

      O mapeamento entre as origens de desenvolvimento e produção na seção avançada.

      Por exemplo, um mapeamento de http://localhost:8080 para https://example.com vai mostrar os dados de campo de example.com/page1 quando você navegar para localhost:8080/page1.

      Além disso, se por algum motivo você não conseguir acessar os dados de campo automaticamente, ative a opção Sempre mostrar dados de campo para o URL abaixo e informe um URL. O painel Desempenho tentará buscar dados de campo para esse URL primeiro e, em seguida, mostrará esses dados de campo independentemente da página que você acessar.

      Para mudar as configurações de busca de dados de campo após a definição, clique em Dados de campo > Configurar

    Com a busca de dados de campo configurada, o painel Desempenho agora mostra uma comparação entre suas pontuações de métricas locais e as que seus usuários utilizam. O período de coleta pode ser encontrado na seção Dados de campo à direita.

    A coleção permeou os dados de campo após a busca.

    Para mais detalhes sobre a pontuação de uma métrica, passe o cursor sobre o valor dela para ver uma dica.

Configurar o ambiente para que ele corresponda melhor ao dos usuários

Com a busca de dados de campo configurada conforme descrito na seção anterior, o painel Performance oferece recomendações sobre como configurar seu ambiente para corresponder melhor à experiência dos usuários.

Para configurar o ambiente:

  1. Em cada card de métrica, abra a seção Considere as condições de teste locais, se houver, e leia as recomendações.

    As seções "Considere suas condições de teste locais" expandidas em cada card de métricas.

    Parece que, neste exemplo, para corresponder melhor à experiência dos usuários, você pode usar um tamanho de tela de computador comum e limitar a CPU e a rede.

  2. Para corresponder à configuração de ambiente deste exemplo:

    1. Defina a janela de visualização para um dos tamanhos de tela comuns (por exemplo, 720p ou 1080p). Para emular dispositivos e tamanhos de tela específicos, use o Modo de dispositivo no painel Elementos.
    2. 82% dos usuários do site neste exemplo usam computadores para navegar. Para comparar as pontuações das métricas locais com os dados de campo corretos, selecione Computador na lista suspensa Dados de campo > Dispositivo.
    3. Na seção Configurações do ambiente, defina a lista suspensa Rede como 4G rápido e CPU como 20x lentidão, por exemplo. Você também pode marcar Desativar o cache da rede na mesma seção.

  3. Com o ambiente configurado, recarregue a página, interaja com ela para capturar a INP local e compare as pontuações da métrica novamente.

    O ambiente é configurado para corresponder à experiência do usuário real.

    Parece que as pontuações das métricas agora são mais semelhantes às que os usuários têm. Por isso, as seções Considere as condições de teste locais foram removidas dos cards de métricas.

Com isso, você pode começar a melhorar as Core Web Vitals do seu site:

Capturar e analisar um relatório de performance

Nas próximas seções, siga as orientações sobre como gravar um perfil, alterar as configurações de captura e analisar o relatório.

Gravar um perfil de desempenho

Quando você estiver pronto para gravar, o painel Desempenho oferecerá as seguintes opções:

Mudar as configurações de captura

As configurações de captura permitem mudar a forma como o DevTools grava as gravações de desempenho e pode fornecer informações adicionais no relatório. Clique em Configurações de captura para acessar o menu Configurações de captura.

Selecione as seguintes opções no menu Capture settings:

Analisar um relatório de desempenho

Consulte Analisar um registro de desempenho para ver um guia completo sobre como usar o painel Desempenho.

Confira a seguir um agrupamento de tópicos do guia e outras documentações úteis:

Para saber como navegar pelo relatório:

Para saber como se concentrar no que importa para seu fluxo de trabalho:

Para saber mais sobre as guias De baixo para cima, Árvore de chamadas e Registro de eventos:

Para saber como analisar o relatório:

Melhorar o desempenho com estes painéis

Conheça outros painéis que podem ajudar a melhorar a performance do seu site: