Use o painel Insights de desempenho para conferir informações úteis e baseadas em casos de uso sobre o desempenho do seu site.
Por que um novo painel?
O novo painel Insights de desempenho é um experimento para resolver os três problemas dos desenvolvedores no painel Desempenho:
- Informações em excesso. Com a interface reformulada, o painel Insights de desempenho simplifica os dados e exibe apenas informações relevantes.
- Dificuldade de distinguir entre casos de uso. O painel Insights de desempenho oferece suporte à análise orientada por casos de uso. No momento, ela só é compatível com o caso de uso de carregamento de página, e mais opções virão no futuro com base no seu feedback, por exemplo, interatividade.
- Requer conhecimento profundo sobre como os navegadores funcionam para serem usados com eficiência. O painel Insights de desempenho destaca as principais informações no painel Insights, com feedback útil sobre como corrigir problemas.
Introdução
Neste tutorial, ensinamos como medir e entender o desempenho do carregamento de página com o painel Insights de desempenho. Continue lendo ou assista à versão em vídeo deste tutorial acima.
Abrir o painel "Insights de desempenho"
- Abra o DevTools.
Clique em Mais opções > Mais ferramentas > Insights de desempenho.
Como alternativa, use o menu de comando para abrir o painel Insights de desempenho.
Gravar performance
O painel Insights de desempenho pode registrar o desempenho geral e baseado em casos de uso (por exemplo, carregamento de página).
- Abra esta página de demonstração em uma nova guia e, na página, abra o painel "Insights de desempenho".
É possível limitar a rede e a CPU durante a gravação. Para este tutorial, marque Desativar cache e defina CPU como 4x lentidão no menu suspenso:
Clique em Medir o carregamento da página. O DevTools registra as métricas de desempenho enquanto a página é recarregada e interrompe automaticamente a gravação alguns segundos após a conclusão do carregamento da página.
Repetir uma gravação de apresentação
Use os controles na parte inferior para controlar a repetição da sua gravação.
Veja um exemplo de como fazer isso.
- Clique em Reproduzir para reproduzir a gravação.
- Clique em Pause para pausar a repetição.
- Use o menu suspenso para ajustar a velocidade de reprodução.
- Clique em Alternar visualização visual para mostrar ou ocultar a visualização.
Navegar por uma gravação de performance
O DevTools diminui automaticamente o zoom para mostrar a linha do tempo completa de gravação. Use o zoom e mova a linha do tempo para navegar pela gravação.
Para aplicar zoom e mover a linha do tempo para a esquerda e para a direita, use os botões de navegação correspondentes:
- Clique na linha do tempo para mover o marcador e conferir um frame específico.
- Clique nos controles Aumentar zoom e Diminuir zoom na parte de baixo para aplicar. Nesse caso, o zoom é aplicado com base no marcador.
- Arraste a barra de rolagem horizontal na parte inferior para mover a linha do tempo para a esquerda e para a direita.
Como alternativa, use os atalhos do teclado. Clique no botão para ver os atalhos.
Ao usar atalhos, você aplica zoom com base no cursor do mouse.
Mostrar insights de desempenho
Confira uma lista de insights de desempenho no painel Insights. Identificar e corrigir possíveis problemas de performance.
Passe o cursor sobre cada um dos insights para destacá-los nas principais trilhas.
Clique em um insight, por exemplo, a solicitação de bloqueio de renderização, para abri-lo no painel Detalhes. Para entender melhor o problema, consulte as seções Arquivo, Problema, Como corrigir e mais.
Conferir métricas de desempenho das Métricas da Web
As Métricas da Web são uma iniciativa do Google para fornecer orientações unificadas quanto aos indicadores de qualidade essenciais para oferecer uma ótima experiência do usuário na Web.
É possível consultar essas métricas nos painéis Linha do tempo e Insights.
Passe o cursor sobre os insights na linha do tempo para saber mais sobre as métricas.
Descubra os atrasos da Maior exibição de conteúdo
A Maior exibição de conteúdo (LCP) é uma das métricas das Core Web Vitals. Ela informa o tempo de renderização da maior imagem ou bloco de texto visível na janela de visualização em relação ao momento em que a página começou a ser carregada.
Uma boa pontuação de LCP é de 2,5 segundos ou menos.
Se a maior exibição de conteúdo da sua página demorar mais para ser renderizada, você verá o selo da LCP com um quadrado amarelo ou triângulo vermelho na linha do tempo.
Para abrir o painel Detalhes, clique no selo da LCP na linha do tempo ou no painel Insights à direita. Nele, é possível descobrir as possíveis causas dos atrasos e sugestões de como corrigi-los.
Neste exemplo, uma solicitação bloqueia a renderização, e você pode aplicar estilos essenciais inline para corrigi-la. Para saber mais, consulte Eliminar recursos de bloqueio de renderização.
Para conferir as subpartes do tempo de renderização da LCP, role para baixo até a seção Detalhes > Detalhamento de tempo.
O tempo de renderização da LCP consiste nas seguintes subpartes:
| Subparte da LCP | Descrição |
|---|---|
| Tempo para o primeiro byte (TTFB) | O tempo decorrido entre o início do carregamento da página e o momento em que o navegador recebe o primeiro byte da resposta do documento HTML. |
| Atraso no carregamento de recursos | O delta entre o TTFB e quando o navegador começa a carregar o recurso de LCP. |
| Tempo de carregamento de recursos | O tempo necessário para carregar o próprio recurso da LCP. |
| Atraso na renderização do elemento | O delta entre o momento em que o recurso da LCP termina de carregar e até que o elemento da LCP seja totalmente renderizado. |
Se um elemento da LCP não exigir um carregamento de recursos para renderizar, o tempo e o atraso do carregamento de recursos serão omitidos. Por exemplo, caso o elemento seja um nó de texto renderizado com uma fonte do sistema.
Acessar atividade de mudanças de layout
Conferir a atividade de mudanças de layout na faixa Layout Shifts.
As trocas de layout são agrupadas em uma janela de sessão. No exemplo, há duas janelas de sessão. Janelas de sessão têm lacunas entre elas.
As mudanças de layout cumulativas (CLS, na sigla em inglês) são uma das métricas das Core Web Vitals. Use a faixa Layout Shifts para identificar possíveis problemas e causas de mudanças de layout.
Sempre comece com a maior janela de sessão ao melhorar a métrica de CLS. Em nosso exemplo, a janela de sessão 1 é a maior, com base na cor e no nível do plano de fundo.
Clique em uma captura de tela para conferir os detalhes da mudança de layout e identificar as possíveis causas raiz e os elementos afetados.
No nosso exemplo, a possível causa raiz é mídia não dimensionada. Para aprender a corrigir isso, consulte Otimizar a Mudança de layout cumulativa.
Entender a pontuação das mudanças de layout
Para entender como as pontuações são calculadas, use a seção Janela no painel Detalhes. A janela Window mostra a que janela da sessão a mudança de layout atual pertence.
Se a página inteira for movida, a pontuação máxima de cada mudança de layout será de 1. No exemplo, a primeira mudança de layout teve a pontuação de 0.15. A segunda mudança de layout teve uma pontuação de 0.041.
A pontuação total dessa janela de sessão é 0.19. Com base no limite de CLS, ela precisa de melhorias. A cor de fundo da janela da sessão é a mesma.
O gráfico de plano de fundo da janela de sessão aumenta ao longo do tempo. A Pontuação cumulativa da mudança de layout reflete o aumento nesse momento.
Ver atividade de rede
Veja a atividade da rede na faixa Rede. É possível expandir a faixa de rede para visualizar todas as atividades da rede e clicar em cada item para ver os detalhes.
Conferir atividade do renderizador
Veja a atividade de renderização na faixa Renderer. É possível expandir cada renderizador para visualizar as atividades e clicar em cada item para ver os detalhes.
Conferir a atividade da GPU
Veja a atividade da GPU na faixa GPU. A faixa da GPU fica oculta por padrão. Para ativá-la, verifique a GPU nas Configurações.
Conferir a velocidade do usuário
Para acessar medidas de desempenho personalizadas, use a Velocidade do usuário e confira seus tempos com a Velocidade. Para mais informações, consulte a API de velocidade do usuário.
Confira esta página de demonstração que calcula o tempo decorrido de carregamento do texto.
Para visualizar a velocidade do usuário:
- Marque lugares no seu app com
performance.mark(). - Meça o tempo decorrido entre marcações com
performance.measure(). - Recorde o desempenho.
- Veja as medições na faixa Tempos. Se você não encontrar a faixa, confira Velocidade do usuário em Configurações.
- Para acessar os detalhes, clique no tempo na faixa.
Personalizar a interface
Para personalizar a Linha do tempo e as Faixas, clique no ícone Configurações do painel e marque as opções preferidas.
Exportar uma gravação
Para salvar uma gravação, clique em Exportar .
Importar uma gravação
Para carregar uma gravação, selecione Import .
Excluir uma gravação
Para excluir uma gravação, faça o seguinte:
- Clique em Excluir. Uma caixa de diálogo de confirmação será aberta.
- Na caixa de diálogo, clique em Excluir para confirmar a ação.