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. Analise os perfis para encontrar possíveis gargalos de performance e maneiras 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 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: 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 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 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 Performance mostra 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 do Chrome UX Report e comparar a experiência dos usuários do seu site com suas 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 Configure field data fetching, observe a Declaração de privacidade e clique em Ok.

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

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

    1. Na janela de diálogo, abra 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 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 Performance vai tentar buscar os dados de campo desse URL primeiro e depois mostrar esses dados de campo, não importa para qual página você navegue.

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

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

    O período de coleta de dados de campo depois que ele é buscado.

    Para conferir um detalhamento da 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 as condições de teste locais" expandidas em cada card de métrica.

    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 do ambiente para este 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 a Desativar cache de 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 estiver tudo pronto para gravar, o painel Performance vai 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 outras documentações úteis:

Para saber como navegar pelo relatório:

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

Para saber mais sobre as guias "Bottom-up", "Á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: