Painel de desempenho: analise o desempenho do seu site

Dale St. Marthe
Dale St. Marthe
LinkedIn

Use o painel Desempenho 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. Analise os perfis para encontrar possíveis gargalos de performance e maneiras de otimizar o uso de recursos.

Use o painel Desempenho para fazer o seguinte:

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

Para um guia completo sobre como melhorar a performance do seu site, consulte Analisar a performance de execução.

Abrir o painel "Performance"

Para abrir o painel Performance, abra o DevTools 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: Ctrl+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 Performance, ele captura e mostra imediatamente as métricas locais de Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS), informando a pontuação (boa, precisa de melhoria ou ruim).

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

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

Para mais detalhes sobre a 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.

    A "Configuração" na seção Próximas etapas.

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

    Avançado: configurar um mapeamento entre ambientes de desenvolvimento e 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 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 não for possível acessar os dados dos campos automaticamente, ative a opção Sempre mostrar os dados dos campos para o URL abaixo e forneça 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 em que você navegar.

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

    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 Desempenho fornece recomendações sobre como configurar o ambiente para corresponder melhor à experiência dos usuários.

Para configurar o ambiente:

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

    A página "Considere as condições de teste locais" seções expandidas em cada card de métricas.

    Neste exemplo, para corresponder melhor à experiência dos usuários, você pode usar um tamanho de tela comum de computador 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, por exemplo, 4G rápido e CPU como, por exemplo, 20 vezes mais lento. 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 agora as pontuações das métricas estão mais parecidas com as que seus usuários veem. Assim, as seções Considere suas condições de teste locais desapareceram dos cards de métricas.

Com isso, você já 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 registrar 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 registra as gravações de performance e pode fornecer mais informações no relatório. Clique em Configurações de captura para acessar o menu Configurações de captura.

Selecione as seguintes opções no menu Configurações de captura:

Analisar um relatório de desempenho

Consulte Analisar uma gravação de performance para conferir um guia completo sobre como usar o painel Performance.

Confira a seguir um agrupamento de tópicos do guia, além de outros documentos ú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:

Melhore a performance com esses painéis

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