Insights de desempenho: receba insights úteis sobre o desempenho do seu site

Sofia Emelianova
Sofia Emelianova

Use o painel Insights de desempenho para receber insights úteis e baseados em casos de uso sobre a performance do seu site.

Visão geral

No painel Insights de desempenho, é possível:

Por que um novo painel?

O novo painel Insights de desempenho é um experimento para resolver esses três problemas do desenvolvedor ao trabalhar com o painel Performance:

  • Muitas informações. Com a interface redesenhada, o painel Insights de performance simplifica os dados e mostra apenas informações relevantes.
  • Dificuldade para distinguir entre casos de uso. O painel Insights de desempenho oferece suporte à análise orientada por casos de uso. No momento, ele só oferece suporte ao caso de uso de carregamento de página, mas mais recursos serão lançados no futuro com base no seu feedback, como interatividade.
  • Requer conhecimento profundo sobre como os navegadores funcionam para usar de maneira eficaz. O painel Insights de desempenho destaca os principais insights no painel Insights, com feedback útil sobre como corrigir problemas.

Introdução

Neste tutorial, mostramos 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 do tutorial acima.

Abrir o painel de insights de desempenho

  1. Abra o DevTools.
  2. Clique em Mais opções > Mais ferramentas > Insights de desempenho.

    Insights de desempenho no menu.

    Como alternativa, use o menu de comando para abrir o painel Insights de desempenho.

    Mostra o comando "Insights de desempenho" no menu "Comando".

Gravar a performance

O painel Insights de performance pode registrar a performance geral e orientada por casos de uso (por exemplo, carregamento de página).

  1. Abra esta página de demonstração em uma nova guia e, nela, abra o painel de insights de performance.
  2. Você pode limitar a rede e a CPU durante a gravação. Para este tutorial, marque Desativar cache e defina CPU como 4x delay no menu suspenso:

    Limitação.

  3. Clique em Medir o carregamento da página. O DevTools registra as métricas de desempenho enquanto a página é recarregada e, em seguida, interrompe a gravação automaticamente alguns segundos após o carregamento da página terminar.

    Opções de início.

Reproduzir uma gravação de performance

Use os controles na parte inferior para controlar a repetição da gravação.

Controles de repetição.

Confira um exemplo de como fazer isso.

  • Clique em Reproduzir para reproduzir a gravação.
  • Clique em Pausar para pausar a repetição.
  • Ajuste a velocidade de reprodução com a lista suspensa.
  • Clique em Alternar visualização visual para mostrar ou ocultar.

O DevTools diminui o zoom automaticamente para mostrar a linha do tempo completa da gravação. Você pode navegar pela gravação com zoom e mover a linha do tempo.

Para aumentar o 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 indicador de reprodução e conferir um frame específico.
  • Clique nos controles Aumentar zoom e Diminuir zoom na parte de baixo para aplicar o zoom. Nesse caso, o zoom é aplicado com base no marcador.
  • Arraste a barra de rolagem horizontal na parte de baixo 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 conferir os atalhos. Atalhos do teclado.

Ao usar atalhos, o zoom é aplicado com base no cursor do mouse.

Conferir insights de desempenho

Confira uma lista de insights de desempenho no painel Insights. Identifique e corrija possíveis problemas de desempenho.

Painel de insights.

Passe o cursor sobre cada um dos insights para destacá-los nas faixas principais.

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, entre outras opções.

Detalhes do insight.

Ver 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 proporcionar uma ótima experiência do usuário na Web.

É possível conferir essas métricas no painel Timeline e Insights.

Consultar as métricas de desempenho das Métricas da Web.

Passe o cursor sobre os insights na Linha do tempo para saber mais sobre as métricas.

Descobrir atrasos da maior exibição de conteúdo

A Maior exibição de conteúdo (LCP) é uma das métricas do 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 pela primeira vez.

Limites de LCP.

Uma boa pontuação de LCP é de 2,5 segundos ou menos.

Se a maior Contentful Paint da sua página demorar mais para renderizar, o selo da LCP vai aparecer na linha do tempo com um quadrado amarelo ou triângulo vermelho.

O selo da LCP.

Para abrir o painel Detalhes, clique no selo de LCP no cronograma ou no painel Insights à direita. No painel, você pode descobrir as possíveis causas dos atrasos e sugestões para corrigi-los.

O painel de detalhes.

Neste exemplo, uma solicitação bloqueia a renderização, e você pode aplicar estilos críticos inline para corrigir o problema. Para saber mais, consulte Eliminar recursos de bloqueio de renderização.

Para conferir as subpartes do tempo de renderização do LCP, role a tela para baixo até a seção Detalhes > Detalhes do tempo.

Detalhamento dos tempos.

O tempo de renderização do LCP consiste nas seguintes subpartes:

Subparte da LCP Descrição
Tempo para o primeiro byte (TTFB) O tempo desde que o usuário inicia o carregamento da página até quando 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 LCP.
Tempo de carregamento do recurso O tempo que leva para carregar o recurso LCP.
Atraso na renderização do elemento O delta entre o momento em que o recurso do LCP termina de carregar até o momento em que o elemento do LCP é totalmente renderizado.

Se um elemento da LCP não exigir uma carga de recurso para renderizar, o atraso e o tempo de carregamento do recurso serão omitidos. Por exemplo, se o elemento for um nó de texto renderizado com uma fonte do sistema.

Ver atividade de trocas de layout

Confira a atividade de mudanças de layout na faixa Mudanças de layout.

Faixa de Layout Shifts.

As trocas de layout são agrupadas em uma janela de sessão. No exemplo, há duas janelas de sessão. As janelas de sessão têm lacunas entre elas.

Janela e intervalo de sessão.

A Cumulative Layout Shift (CLS) é uma das Core Web Vitals. Use a faixa Mudanças de layout 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. No nosso exemplo, a janela de sessão 1 é a maior, com base na cor e no nível do plano de fundo.

CLS.

Clique em uma captura de tela para ver os detalhes da troca de layout e identificar possíveis causas raiz e elementos afetados.

Veja os detalhes da troca de layout.

No nosso exemplo, a possível causa raiz é mídia sem tamanho. Para saber como corrigir isso, consulte Otimizar a Cumulative Layout Shift.

identificar possíveis causas raiz.

Entender a pontuação das trocas de layout

Para entender como as pontuações são calculadas, use a seção Janela no painel Detalhes. A Window (Janela) mostra a que janela de sessão a mudança de layout atual pertence.

Se a página inteira for alterada, a pontuação máxima de cada troca de layout será 1. No nosso exemplo, a primeira troca de layout teve a pontuação de 0.15. A segunda troca de layout teve um resultado de 0.041.

Entenda a pontuação das trocas de layout.

A pontuação total para essa janela de sessão é 0.19. Com base no limite de CLS, ela precisa ser melhorada. A cor de fundo da janela da sessão reflete o mesmo.

Limite de CLS.

O gráfico de segundo plano da janela de sessão aumenta com o tempo. A Pontuação cumulativa da troca de layout reflete o aumento naquele momento.

Gráfico de plano de fundo da janela de transferência.

Ver atividade da rede

Confira a atividade de rede na faixa Rede. Você pode expandir a trilha da rede para exibir todas as atividades da rede e clicar em cada item para exibir os detalhes.

Conferir a atividade de rede.

Conferir a atividade do renderizador

Veja a atividade de renderização na faixa Renderer. É possível expandir cada renderizador para conferir as atividades e clicar em cada item para conferir os detalhes.

Conferir a atividade do renderizador.

Ver atividade da GPU

Confira a atividade da GPU na faixa GPU. A faixa da GPU fica oculta por padrão. Para ativá-la, verifique a GPU em Configurações.

Consulte a atividade da GPU.

Conferir a velocidade do usuário

Para conferir medidas de desempenho personalizadas, use a User Timing e visualize seus tempos com a faixa Timing. Para mais informações, consulte a API User Realtime.

Confira esta página de demonstração que calcula o tempo decorrido do carregamento de texto.

Para conferir os tempos de execução do usuário:

  1. Marque lugares no seu app com performance.mark().
  2. Meça o tempo decorrido entre as marcas com performance.measure().
  3. Grave a performance.
  4. Confira as medições na faixa Tempos. Se a faixa não aparecer, verifique Velocidade do usuário em Configurações.
  5. Para conferir os detalhes, clique na marcação de tempo na faixa. A faixa Timings.

Personalizar a interface

Para personalizar a Linha do tempo e as Faixas, clique no ícone Configurações do painel e marque as opções que preferir.

Configurações.

Exportar uma gravação

Para salvar uma gravação, clique em Exportar .

Exportar uma gravação.

Importar uma gravação

Para carregar uma gravação, selecione Importar .

Importe uma gravação.

Excluir uma gravação

Para excluir uma gravação, faça o seguinte:

  1. Clique em Excluir. Uma caixa de diálogo de confirmação será aberta. Excluir a gravação.
  2. Na caixa de diálogo, clique em Excluir para confirmar a exclusão.