Descubra problemas de desempenho de renderização com esta referência de opções relacionadas ao desempenho na guia Renderização.
Destacar áreas repintadas com exibições em destaque
Com esta opção ativada, o Chrome pisca a tela na cor verde sempre que ocorre uma nova pintura.
Para ver áreas que estão sendo repintadas:
- Abra a guia Renderização nesta demonstração e marque Painting intermitente.
- Observe a nova pintura destacada em verde.
Se, em outra página, a cor verde piscar em toda a tela ou em áreas da tela que não deveriam ser pintadas, considere investigar mais.
Destacar regiões de mudança de layout
As mudanças de layout causam repinturas inesperadas e podem não só ser irritantes, mas também prejudiciais.
Para visualizar o local e o tempo das mudanças de layout em uma página:
Abra a guia Rendering e marque a opção Layout Shift Regions.
Atualize a página. As áreas de mudança de layout são destacadas brevemente em roxo.
Ver camadas e blocos com bordas de camadas
Use Bordas da camada para visualizar uma sobreposição de bordas de camada e blocos na parte superior da página.
Para ativar as bordas de camadas:
- Abra a guia Rendering e marque a opção Layer Borders.
- Observe as bordas das camadas em laranja e verde-oliva e os blocos em ciano.
Consulte os comentários em debug_colors.cc para saber mais sobre o código de cores.
Conferir quadros por segundo em tempo real com estatísticas de renderização de frames
As estatísticas de renderização de frames são uma sobreposição que aparece no canto superior direito da janela de visualização.
Para abrir as Estatísticas de renderização de frames:
- Abra a guia Renderização e ative a caixa de seleção Estatísticas de renderização de frames.
- Observe as estatísticas no canto superior direito da página.
A sobreposição Estatísticas de renderização de frames mostra:
- Estimativa em tempo real de frames por segundo à medida que a página é executada.
- Enquadre a linha do tempo como um gráfico com três tipos de frame:
- Os frames foram renderizados (linhas azuis)
- Frames apresentados parcialmente (linhas amarelas)
- Frames removidos (linhas vermelhas).
- O estado do raster da GPU: ativado ou desativado. Para mais informações, consulte Como conseguir a rasterização da GPU.
- Uso da memória da GPU: o número de MB usados e o máximo de MB de memória.
Identificar problemas de desempenho de rolagem
Use Problemas de desempenho de rolagem para identificar elementos da página que têm listeners de eventos relacionados à rolagem que podem prejudicar a performance da página.
Para conferir os elementos com problemas em potencial:
- Abra a guia Renderização e verifique Problemas de desempenho de rolagem.
- Observe os elementos potencialmente problemáticos destacados.
Conferir as Core Web Vitals
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.
As Core Web Vitals são o subconjunto de indicadores que se aplica a todas as páginas da Web. Cada uma das principais métricas da Web representa um aspecto diferente da experiência do usuário, é mensurável no campo e reflete a experiência real de um resultado importante para o usuário. As Core Web Vitals são:
- Maior exibição de conteúdo (LCP): mede o desempenho do carregamento. Para oferecer uma boa experiência ao usuário, a LCP precisa ocorrer em até 2,5 segundos após o início do carregamento da página.
- Interaction to Next Paint (INP): mede a interatividade. Para oferecer uma boa experiência do usuário, as páginas precisam ter uma INP de 200 milissegundos ou menos.
- Cumulative Layout Shift (CLS): mede a estabilidade visual. Para oferecer uma boa experiência ao usuário, as páginas precisam manter um CLS de 0,1 ou menos.
Use a extensão de Métricas da Web do Chrome para conferir os valores das Core Web Vitals da sua página.