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 perfis para encontrar possíveis gargalos de desempenho 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.
Abra 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:
- Abra o DevTools.
- Abra o menu de comandos pressionando:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Comece a digitar
Performance panel, selecione Mostrar painel de performance e pressione Enter.
Observar as Core Web Vitals ao vivo
Ao abrir o painel Performance, ele captura e mostra imediatamente as métricas locais de Largest Contentful Paint (LCP) e Cumulative Layout Shift (CLS), além de informar a pontuação delas (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. Além do LCP e do CLS, isso oferece uma visão geral completa das Core Web Vitals da página usando sua conexão de rede e dispositivo.
Abaixo dos três cards de métricas nas guias Interações e Mudanças de layout, 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 Limpar.
Para ver um detalhamento da pontuação de uma métrica, passe o cursor sobre o valor dela para conferir uma dica.
Comparar 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 as métricas locais.
Para adicionar dados de campo:
Em Performance > Próximas etapas > Dados de campo, clique em Configurar.
Na caixa de diálogo Configurar busca de dados de campo, observe a Declaração de privacidade e clique em Ok.
Avançado: configurar um mapeamento entre ambientes de desenvolvimento e produção...
Se quiser receber automaticamente os dados de campo mais relevantes, configure um ou mais mapeamentos entre as origens de desenvolvimento e produção:
- Na caixa de diálogo, expanda a seção Avançado e clique em + Novo.
Na tabela de mapeamento, insira os URLs de desenvolvimento e produção e clique em +.
Por exemplo, um mapeamento de
http://localhost:8080parahttps://example.comvai mostrar dados de campo paraexample.com/page1quando você acessarlocalhost:8080/page1.Além disso, se por algum motivo não for possível receber os dados de campo automaticamente, ative Sempre mostrar dados de campo para o URL abaixo e forneça um URL. O painel Performance vai tentar buscar os dados de campo desse URL primeiro e depois mostrar esses dados, 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 mostra uma comparação entre suas pontuações de métricas locais e aquelas que seus usuários experimentam. O período de coleta aparece na seção Dados de campo à direita.
Para ver um detalhamento da pontuação de uma métrica, passe o cursor sobre o valor dela para conferir uma dica.
Configure seu 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 o ambiente:
Em cada card de métrica, abra a seção Considere as condições de teste locais, se houver, e leia as recomendações.
Neste exemplo, para corresponder melhor à experiência dos usuários, talvez seja melhor usar um tamanho de tela de computador comum e reduzir a CPU e a rede.
Para corresponder à configuração do ambiente deste exemplo:
- 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 dispositivo no painel Elementos.
- 82% dos usuários do site neste exemplo usam computadores para navegar. Para comparar suas pontuações de métricas locais com os dados de campo corretos, selecione Computador na lista suspensa Dados de campo > Dispositivo.
- Na seção Configurações de ambiente, defina a lista suspensa Rede como, por exemplo, 4G rápido e CPU como, por exemplo, Lentidão de 20x. Você também pode Desativar o cache de rede na mesma seção.
Com o ambiente configurado, atualize a página, interaja com ela para capturar a INP local e compare as pontuações de métricas novamente.
Parece que as pontuações de métricas agora são mais semelhantes àquelas que seus usuários têm. Por isso, as seções Considere as condições de teste locais desapareceram dos cards de métricas.
Assim, 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, mudar as configurações de captura e analisar o relatório.
Gravar um perfil de desempenho
Quando você estiver pronto para gravar, o painel Performance vai oferecer as seguintes opções:
- Registrar a performance do tempo de execução
- Gravar o desempenho do 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 como o DevTools captura gravações de performance e podem 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:
- Desativar exemplos JavaScript: desativa a gravação das pilhas de chamadas JavaScript mostradas na faixa Principal que são chamadas durante a gravação. Reduz a sobrecarga de desempenho.
- Ativar instrumentação de exibição avançada (lenta): captura a instrumentação avançada de exibição. Prejudica significativamente a performance.
- Ativar estatísticas do seletor de CSS (velocidade lenta): captura estatísticas do seletor de CSS. Prejudica significativamente a performance.
- Limitação de CPU: simula velocidades de CPU mais lentas.
- Limitação de rede: simule velocidades de rede mais lentas.
Analisar um relatório de performance
Consulte Analisar uma gravação de desempenho para um guia completo sobre como usar o painel Desempenho.
A seguir, apresentamos um agrupamento de tópicos do guia, além de outras documentações úteis:
Para saber como navegar pelo relatório:
Use os Insights de performance para receber insights úteis sobre o desempenho do seu site:
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 filhos no gráfico de chama
- Criar rastros de navegação e alternar entre 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
- Leia o gráfico de chama
- Ver uma captura de tela
- Ver métricas de memória
- Ver a duração de uma parte de uma gravação
- Analisar a performance do seletor de CSS durante eventos de recálculo de estilo
- 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
Melhore a performance com estes painéis
Conheça outros painéis que podem ajudar você a melhorar a performance do seu site: