Ferramenta Desempenho: Analise o desempenho do seu site

Use a ferramenta Desempenho para analisar o desempenho do seu site. Existem duas visões principais:

• A página inicial mostra métricas locais à medida que você interage com a página da web atual.
• Grave um perfil e exiba uma linha do linha do tempo.

Conteúdo detalhado:

• Visão geral
  • Abrir a ferramenta Desempenho
    • Usando o Menu de Comando
  • Métricas locais para interações de página
  • Linha do linha do tempo do perfil gravado
  • Alternando para a exibição de métricas locais ou outro perfil
• Monitorar métricas dos Core Web Vitals
  • Terminologia
  • Usar a página de demonstração
  • Guia Interações
  • Guia Turnos de layout
• Captura e análise de um relatório de desempenho
  • Registrar um perfil de desempenho
  • Alterar as configurações de captura
  • Analisar um relatório de desempenho
• Melhorar o desempenho com essas ferramentas

Para obter instruções sobre como usar a ferramenta Desempenho para melhorar o desempenho de seu site, consulte Analisar o desempenho do tempo de execução (tutorial).

Visão Geral

A ferramenta Desempenho exibe métricas locais para interações de página e permite registrar perfis de desempenho de CPU de seus aplicativos Web. Analise perfis para encontrar possíveis gargalos de desempenho e maneiras de otimizar o uso de recursos.

Abrir a ferramenta Desempenho

Para abrir a ferramenta Desempenho :

1. Vá para uma página da web, como a demonstração Explorando o universo , em uma nova janela ou guia.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

   O DevTools é aberto.

3. Na barra de atividades na parte superior, clique no ferramenta Desempenho.

   Se o Ferramenta Desempenho não for mostrado na Barra de Atividades, clique no botão Mais ferramentas () e selecione a ferramenta Desempenho.

Usando o Menu de Comando

Para abrir a ferramenta Desempenho usando o Menu de Comando:

1. Vá para uma página da web, como a demonstração Explorando o universo , em uma nova janela ou guia.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

   O DevTools é aberto.

3. No canto superior direito do DevTools, clique em Personalizar e controlar o DevTools e clique em Executar comando.

   Ou pressione:

   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P

   O Menu de Comando é aberto e lê Executar >Comando.

4. Comece a digitar desempenho, selecione Mostrar desempenho [painel] e pressione Enter.

   

Métricas locais para interações de página

Use a ferramenta Desempenho para visualizar as métricas do Core Web Vitals na visualização inicial de métricas locais . A página inicial da ferramenta Desempenho mostra Métricas locais, que são métricas de desempenho sobre a página da Web renderizada:

• Largest Contentful Paint (LCP) - Com que rapidez o conteúdo principal da página é carregado.
• CLS (Mudança de Layout Cumulativa) - Uma medida da mudança inesperada de layout de página mais recente.
• Interação com o Next Paint (INP) - A capacidade de resposta da interação mais recente do usuário na página.

Quando você abre inicialmente a ferramenta Desempenho , as métricas do Core Web Vitals são exibidas, em três cartões em uma seção de métricas locais :

Linha do linha do tempo do perfil gravado

Use também a ferramenta Desempenho para exibir um rastreamento de desempenho gravado, incluindo:

• Registre um perfil de desempenho.
• Alterar as configurações de captura.
• Analisar um relatório de desempenho. Mostra informações sobre o desempenho da página durante o período de tempo em que a gravação ocorreu, como:
  • As interações do usuário que ocorreram durante a gravação.
  • O código JavaScript que foi executado.
  • As operações de estilo e layout que ocorreram.
  • Outras métricas de desempenho ao longo do tempo, como solicitações de rede e mudanças de layout.

Depois de registrar um rastreamento de desempenho, o rastreamento de desempenho é exibido em vez de métricas locais.

Alternando para a exibição de métricas locais ou outro perfil

Para alternar para a exibição da visualização inicial de métricas locais, clique no botão Voltar à página de métricas ao vivo ().

Para alternar para a exibição de uma linha do tempo de perfil gravada aberta diferente, clique no menu suspenso Mostrar sessões recentes da linha do tempo, à direita do botão Voltar à página de métricas ao vivo ()).

Monitorar métricas dos Core Web Vitals

Use a ferramenta Desempenho para visualizar as métricas do Core Web Vitals na visualização inicial de métricas locais . A página inicial da ferramenta Desempenho mostra Métricas locais, que são métricas de desempenho sobre a página da Web renderizada:

• Largest Contentful Paint (LCP) - Com que rapidez o conteúdo principal da página é carregado.
• CLS (Mudança de Layout Cumulativa) - Uma medida da mudança inesperada de layout de página mais recente.
• Interação com o Next Paint (INP) - A capacidade de resposta da interação mais recente do usuário na página.

Terminologia

Usar a página de demonstração

Para produzir uma métrica ruim ou que precise de melhorias nas placas LCP, CLS e INP na ferramenta Desempenho :

1. Abra uma página da web, como a demonstração Explorando o universo , em uma nova janela ou guia.

   A página de demonstração "Explorando o universo" foi projetada para carregar e manipular interações lentamente de propósito, a fim de ilustrar como as métricas LCP, CLS e INP podem ser usadas na ferramenta Desempenho para identificar e corrigir problemas de desempenho.

2. Clique com o botão direito do mouse na página da Web e selecione Inspecionar.

   O DevTools é aberto.

3. Na barra de atividades na parte superior, selecione o Ferramenta Desempenho.

   Se o Ferramenta Desempenho não for mostrado na Barra de Atividades, clique no botão Mais ferramentas () e selecione a ferramenta Desempenho.

4. Maximizar a janela e tornar o painel da página de demonstração amplo, como 60% da largura da janela.

   Se o painel da página de demonstração for muito estreito, alguns cartões poderão continuar mostrando como bom, com um valor verde, que não é o resultado pretendido.

5. Selecionar o painel >Próximas etapas Configurações do ambiente lista suspensa >de limitação de CPU do card > Selecionar desaceleração 4x - recomendado.

   Ou selecione Configurações de Captura (ícone de ) > Lista suspensa de limitação de> CPU, desaceleração 4x - recomendado.

6. Selecionar o painel >Próximas etapas card >de configurações do ambiente Lista suspensa >de limitação de rede selecione 4G lento.

7. Selecione o painel >Próximas etapas Card >de configurações do ambiente marque a caixa de seleção Desabilitar cache de rede.

   

8. Clique com o botão direito do mouse (ou clique longamente) no botão Atualizar à esquerda da barra de endereços e selecione Esvaziar cache e atualização forçada.

   Isso garante que a imagem seja carregada novamente do servidor, em vez do cache local.

   Os cartões LCP e CLS mostram um valor laranja e precisa ser melhorado, ou um valor vermelho e ruim, em vez de um valor verde e bom.

9. Se o LCP ou CLS card permanecer verde e disser good depois que a imagem da galáxia terminar de renderizar, maximize a janela e torne o painel da página de demonstração mais amplo.

   O card LCP mostra que a imagem da galáxia demorou muito para carregar. O card mostra um valor laranja e precisa ser melhorado, ou um valor vermelho e ruim, em vez de um valor verde e bom. O mecanismo identifica essa imagem como o maior item a ser renderizado.

10. No card LCP, passe o mouse sobre o valor da métrica para ver as informações em uma dica de ferramenta.

    O card CLS ilustra que saltos repentinos e inesperados no layout podem afetar negativamente os usuários. Isso também ocorre porque a imagem demora um pouco para carregar. Por padrão, a página da web de demonstração não especifica uma altura para a imagem e, portanto, a página é carregada inicialmente sem reservar muito espaço para a imagem. Quando a imagem começa a aparecer, o conteúdo abaixo dela salta repentinamente para baixo.

11. No card CLS, passe o mouse sobre o valor da métrica para ver as informações em uma dica de ferramenta.

12. Depois que a imagem da galáxia terminar de renderizar, na página de demonstração renderizada, clique em um dos títulos na coluna Descobertas à direita, como Teoria Heliocêntrica (1543).

    O card INP muda de não mostrar um valor, para mostrar um valor laranja e precisa de melhorias, ou um valor vermelho e ruim. Um valor INP é exibido.

13. No card INC, passe o mouse sobre o valor da métrica para ver as informações em uma dica de ferramenta.

14. No INP card, clique no valor INP.

    Na página de demonstração, os cards de Descobertas são projetados para se expandir e renderizar lentamente, de modo que leva muito tempo entre clicar no cabeçalho e renderizar o conteúdo expandido do card. O atraso é um valor aleatório entre 100 ms e 1000 ms, resultando em um alto valor de INP.

    Abaixo dos cartões de métricas locais , as guias Interações e Layouts são preenchidas.

Guia Interações

A guia Interações exibe informações sobre suas interações com a página da Web:

A guia Interações inclui:

• Fases.
• do Azure.
• Horários.

Para limpar a guia Interações , clique no botão Limpar o registro atual () à direita da guia Interações .

Guia Turnos de layout

A guia Turnos de layout exibe informações sobre turnos de layout:

A guia Turnos de layout inclui:

• pontuações.
• do Azure.

Captura e análise de um relatório de desempenho

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.

Registrar um perfil de desempenho

Quando você estiver pronto para gravar, a ferramenta Desempenho oferece as seguintes opções:

• Registre o desempenho do tempo de execução na referência de recursos de desempenho.
• Registrar o desempenho da carga na referência de recursos de desempenho.
• Captura de tela durante a gravação em Referência de recursos de desempenho.
• Forçar a coleta de lixo durante a gravação na referência de recursos de desempenho.
• Salve e compartilhe uma gravação em Referência de recursos de desempenho.
• Carregar uma gravação na Referência de recursos de desempenho.
• Limpe a gravação anterior na referência de recursos de desempenho.

Alterar as configurações de captura

As configurações de Captura permitem alterar como o DevTools captura gravações de desempenho e podem fornecer informações adicionais no relatório. Clique no botão Configurações de Captura () para acessar o menu Configurações de Captura.

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

• Marque a caixa de seleção Desabilitar exemplos de JavaScript : desabilita a gravação das pilhas de chamadas JavaScript exibidas na faixa principal que são chamadas durante a gravação. Reduz a sobrecarga de desempenho. Consulte Desabilitar exemplos de JavaScript em Referência de recursos de desempenho.

• Marque a caixa de seleção Habilitar instrumentação de renderização avançada (lenta ): Captura instrumentação de pintura avançada. Prejudica significativamente o desempenho. Consulte Ativar instrumentação de pintura avançada em Referência de recursos de desempenho.

• Marque a caixa de seleção Habilitar estatísticas do seletor CSS (lenta ): Captura estatísticas do seletor CSS. Prejudica significativamente o desempenho. Consulte Exibir custos do seletor CSS na barra lateral da ferramenta Desempenho em Novidades no DevTools (Microsoft Edge 131).

• Limitação de CPU: simule velocidades de CPU mais lentas. Consulte Limitar a CPU durante a gravação em Referência de recursos de desempenho.

• Limitação de rede: simule velocidades de rede mais lentas. Consulte Limitar a rede durante a gravação em Referência de recursos de desempenho.

Analisar um relatório de desempenho

Para obter um guia completo sobre como usar a ferramenta Desempenho , consulte Analisar uma gravação de desempenho na Referência de recursos de desempenho.

Para navegar por um relatório de desempenho:

• Consulte Navegar pela gravação na referência de recursos de desempenho.

• Consulte Atividades de pesquisa em Referência de recursos de desempenho.

• Consulte Acompanhar iniciadores de eventos em Referência de recursos de desempenho.

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

• Alterar a ordem das faixas e ocultá-las

• Ocultar funções e seus filhos no gráfico de degradê

• Amplie partes de uma gravação e alterne entre os níveis de zoom em Referência de recursos de desempenho.

Para saber mais sobre as guias Ascendente, Árvore de chamadas e Log de eventos :

• Exibir atividades em uma tabela em Referência de recursos de desempenho.

Para analisar um relatório de desempenho:

• Exibir a atividade do thread principal em Referência de recursos de desempenho.
• Leia o gráfico de degradê em Referência de recursos de desempenho.
• Veja uma captura de tela em Referência de recursos de desempenho.
• Veja as métricas de memória na Referência de recursos de desempenho.
• Veja a duração de uma parte de uma gravação em Referência de recursos de desempenho.
• Analise o desempenho do seletor CSS durante os eventos Recalcular Estilo.
• Analise quadros por segundo (FPS) na referência de recursos de desempenho.
• Referência de evento de gravação de desempenho

Melhorar o desempenho com essas ferramentas

Descubra outras ferramentas que podem ajudá-lo a melhorar o desempenho do seu site:

Confira também

• Página de demonstração explorando o universo

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.