Layout Shift

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.

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.