Use o painel Desempenho para analisar o desempenho do seu site.
Visão geral
O painel Desempenho permite gravar os 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 Desempenho para fazer o seguinte:
- Registre um perfil de desempenho.
- Mudar as configurações de captura.
- Analisar um relatório de desempenho.
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 o DevTools e selecione Performance em um conjunto de guias na parte de cima.
Como alternativa, siga estas etapas para abrir o painel Desempenho com o Menu de comando:
- Abra o DevTools.
- Abra o Menu de comando pressionando:
- macOS: Command+Shift+P
- Windows, Linux e ChromeOS: Control + Shift + P
- Comece a digitar
Performance panel, selecione Show Performance panel e pressione Enter.
Gravar um perfil de desempenho
Quando você estiver pronto para gravar, o painel Desempenho oferecerá as seguintes opções:
- Gravar o desempenho da execução
- Gravar desempenho de carregamento
- Fazer 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 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 configurações para acessar o menu Configurações de captura.
Selecione as seguintes opções no menu Configurações de captura:
- Desativar amostras de JavaScript: desativa a gravação das pilhas de chamadas JavaScript exibidas na faixa Main, que são chamadas durante a gravação. Reduz a sobrecarga de desempenho.
- Enable Advanced Paint instrumentation (Lenta): captura a instrumentação avançada da pintura. Prejudica significativamente o desempenho.
- Ativar estatísticas do seletor de CSS (lento): captura as estatísticas do seletor de CSS. Prejudica significativamente o desempenho.
- Limitação da CPU: simula velocidades de CPU mais lentas.
- Limitação de rede: simula velocidades de rede mais lentas.
- Simultaneidade de hardware: configure o valor informado pelo
navigator.hardwareConcurrency.
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, 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:
- Mudar a ordem das faixas e ocultá-las
- Ocultar funções e os filhos delas no Flame Chart
- Criar navegação estrutural e navegar pelos níveis de zoom
Para saber mais sobre as guias De baixo para cima, Árvore de chamadas e Registro de eventos:
Para saber como analisar o relatório:
- Ver a atividade da linha de execução principal
- Ler o Flame Chart
- Conferir uma captura de tela
- Ver métricas de memória
- Ver a duração de uma parte de uma gravação
- Analisar o desempenho do seletor de CSS durante o cálculo de eventos de estilo novamente
- Criar perfil de desempenho do Node.js com o painel de desempenho
- 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 você a melhorar o desempenho do seu site:
- Lighthouse: otimizar a velocidade do site
- Memória: visão geral do painel "Memória"
- Insights de desempenho: receba insights úteis sobre a performance do seu site
- Renderização: descobrir problemas com o desempenho da renderização
- Problemas: encontrar e corrigir problemas
- Desempenho: visualizar informações das camadas