Logo do Triângulo

Layout Shift

por Hugo Bessa

Publicado em 27/05/2021

Layout Shift é o deslocamento do layout do site conforme recursos são carregados ou alterações são executadas no navegador. Layout Shifts são indesejados em grande parte dos casos, já que eles podem sobrecarregar o processamento ativando cálculos de layout e paint, mas também porque representam uma má experiência para o usuário.
Exemplo de Layout Shift
Causas comuns de Layout Shift são:
  • Imagens sem tamanho (width e height) definidos antes de carregarem;
  • Mudanças em padding e margin;
  • Carregamento assíncrono de JavaScript que altera o DOM;
  • Propagandas mal-aplicadas na página.

Referências

  • Cumulative Layout Shift (web.dev)

Citações

  • Analisando a Performance de Animações CSS com o DevTools
    Na abertura do menu, muitos Layout Shifts e cálculos de layout e paint.

Construa a sua carreira em desenvolvimento front-end

Mais conhecimento, mais prática, mais oportunidades. Aprenda a construir webapps avançados, com conteúdo objetivo e direto das trincheiras. Sem spam.

Twitter
Instagram