Painel de desempenho: analise o desempenho do seu site

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 desempenho e maneiras de otimizar o uso de recursos.

Use o painel Performance para fazer o seguinte:

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

Para um guia abrangente sobre como melhorar o desempenho do seu site, consulte Analisar o desempenho 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, ChromeOS: Control+Shift+P
5. Comece a digitar Performance panel, selecione Show Performance panel e pressione Enter.

Observar as Core Web Vitals em tempo real

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) e informa a pontuação delas (boa, precisa melhorar 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 da CLS, oferece uma visão geral completa das Core Web Vitals da sua página usando a conexão de rede e o dispositivo. Ele também captura e informa as Core Web Vitals para navegações suaves do lado do cliente em aplicativos de página única.

Nos três cards de métricas nas guias Interactions e Layout shifts , você encontra tabelas com informações sobre interações e mudanças de layout capturadas, incluindo elementos, tempos, fases (para interações) e pontuações (para mudanças de layout). Para limpar as duas listas, clique em block Clear.

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

Comparar 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 seu site com suas métricas locais.

Para adicionar dados de campo:

1. Em Performance > Next steps > Field data, clique em Set up.

   

2. Na caixa de diálogo Configure field data fetching, observe a Privacy disclosure e clique em Ok.

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

   Opcionalmente, para receber automaticamente os dados de campo mais relevantes, você pode configurar (vários) mapeamentos entre as origens de desenvolvimento e produção:

   1. Na janela de diálogo, expanda a seção Advanced e clique em + New.

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

      

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

      Além disso, se por algum motivo você não conseguir os dados de campo automaticamente, ative check_boxAlways show field data for the below URL e forneça um URL. O painel Performance vai tentar buscar dados de campo para esse URL primeiro e 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 Field data > Configure.

   Com a busca de dados de campo configurada, o painel Performance mostra uma comparação entre suas pontuações de métricas locais e aquelas que seus usuários experimentam. Você pode conferir o período de coleta na seção Field data à direita.

   

   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 corresponder 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 seu ambiente:

1. Em cada card de métrica, expanda a seção Consider your local test conditions, se houver, e leia as recomendações.

   

   Neste exemplo, para corresponder melhor à experiência dos usuários, talvez seja necessário 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 Elements.
   2. 82% dos usuários do site neste exemplo usam computadores para navegar. Para garantir que você compare suas pontuações de métricas locais com os dados de campo corretos, selecione Desktop na lista suspensa Field data > Device.
   3. Na seção Environment settings, defina a lista suspensa Network como, por exemplo, Fast 4G e CPU como, por exemplo, 20x slowdown. Você também pode marcar check_box Disable network cache na mesma seção.

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

   

   Parece que as pontuações de métricas agora são mais semelhantes às que seus usuários experimentam. Assim, as seções Consider your local test conditions desapareceram dos cards de métricas.

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

• Otimizar o LCP
• Otimizar a INP
• Otimizar a CLS

Capturar e analisar um relatório de performance

Nas próximas seções, siga as orientações sobre como gravar um perfil, mudar 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:

• Gravar o desempenho de execução
• Gravar o desempenho de carregamento
• Capturar capturas de tela durante a gravação
• Forçar a coleta de lixo durante a gravação
• Salvar uma gravação
• Carregar uma gravação
• Limpar uma gravação

Mudar as configurações de captura

As Capture settings permitem mudar como o DevTools captura gravações de desempenho e podem fornecer informações adicionais no relatório. Clique em Capture settings settings para acessar o menu Capture settings.

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

• Desativar amostras de JavaScript: desativa a gravação das pilhas de chamadas JavaScript exibidas na faixa Principal que são chamadas durante a gravação. Reduz o overhead de desempenho.
• Ativar instrumentação avançada de pintura (lento): captura a instrumentação avançada de pintura. Prejudica significativamente o desempenho.
• Enable CSS selector stats (slow): captura estatísticas do seletor de CSS. Prejudica significativamente o desempenho.
• **CPU throttling**: simula velocidades de CPU mais lentas.
• Limitação de rede: simula velocidades de rede mais lentas.
• Captura de tela: escolha um tamanho de frame de captura de tela e um limite de contagem predefinido quando Capturas de tela estiver ativado.

Analisar um relatório de performance

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

A seguir, apresentamos um agrupamento de tópicos do guia, além de outra documentação útil:

Para aprender a navegar pelo relatório:

• Navegar pela gravação
• Atividades de pesquisa
• Rastrear iniciadores de eventos

Use os Insights de desempenho para receber insights úteis sobre o desempenho do seu site:

• Insights de desempenho

Para aprender a se concentrar no que é importante para seu fluxo de trabalho:

• Mudar a ordem das faixas e ocultá-las
• Ocultar funções e filhos no Flame Chart
• Criar breadcrumbs e alternar entre níveis de zoom

Para aprender mais sobre as guias "Bottom-up", "Call tree" e "log de eventos":

• Conferir atividades em uma tabela

Para aprender a analisar o relatório:

• Conferir a atividade da linha de execução principal
• Ler o Flame Chart
• Conferir uma captura de tela
• Conferir métricas de memória
• Conferir a duração de uma parte de uma gravação
• Analisar o desempenho do seletor de CSS durante eventos de Recalculate Style
• Criar um perfil de desempenho do Node.js com o painel "Performance"
• Analisar quadros por segundo (QPS)
• Referência de eventos da linha do tempo

Melhorar o desempenho com estes painéis

Descubra outros painéis que podem ajudar a melhorar o desempenho do seu site:

• Lighthouse: otimizar a velocidade do site
• Memory: visão geral do painel "Memory"
• Rendering: descobrir problemas de desempenho de renderização
• Issues: encontrar e corrigir problemas
• Performance: conferir informações sobre camadas

Outros recursos