Cumulative Layout Shift (CLS)

Carregamento lento de imagens/anúncios, operações assíncronas, alterações dinâmicas no DOM etc.

Mede o quanto o layout de uma página web muda,

sendo uma métrica de desempenho centrada no usuário que verifica a instabilidade visual que pode levar o usuário a clicar por engano.

"Uma boa pontuação de CLS é 0,1 ou menos"

A Layout Instability API fornece uma métrica chamada Layout Shift Score

- Layout Shift Score = impact fraction ( qual é o tamanho do objeto que se move ) * distance fraction ( quanto ele se move )

- Mudanças de layout causadas pela ação do usuário são aceitáveis - se houve entrada do usuário dentro de 500 ms, `hadRecentInput` é definido, então isso pode ser removido do cálculo

- Em vez de mudar `height`/`width`, use `transform:scale()`

- Em vez de mudar `top,right,bottom,left`, use `transform: translate()`

Como melhorar o CLS

- Sempre defina o tamanho de imagens/vídeos ou reserve previamente o espaço com CSS Aspect Ratio Boxes etc.

- Exceto em interações do usuário, não adicione novo conteúdo acima do conteúdo existente

- Faça animações nas transições entre estados com CSS Transform etc.

[kunggom]

Na hora exata de clicar, às vezes o layout muda de leve de repente e você acaba tocando no lugar errado, o que irrita bastante, então finalmente surgiu uma forma de medir isso quantitativamente. Na minha opinião, se medirem isso nos sites de jornais, provavelmente vão aparecer números desastrosos.

[xguru]

As empresas de mídia coreanas têm anúncios demais, e esses anúncios em si também são lentos e ficam piscando, então medir isso em si provavelmente não faz muito sentido...

Mudando de assunto, eu uso https://github.com/disjukr/just-news e o Tampermonkey, então nos sites de notícias coreanos vejo só o corpo do texto. Os sites são bagunçados demais.

[kunggom]

Eu já cheguei a tentar criar em Python um [programa que, quando você coloca o link de uma matéria de um veículo de imprensa, converte automaticamente para o link da notícia no portal]. Mas acabei perdendo o código-fonte de um jeito meio absurdo (por engano salvei no RAM drive e reiniciei) e, quando bateu aquela sensação de vazio depois disso, desisti.

[xguru]

Métricas de desempenho centradas no usuário

https://web.dev/user-centric-performance-metrics

https://developers.google.com/web/fundamentals/…

Os indicadores tradicionais como load e DOMContentLoaded não são boas métricas.

First contentful paint (FCP): quando o primeiro conteúdo começa a ser exibido na tela

Largest contentful paint (LCP): quando o maior bloco de texto ou imagem da página é exibido

First input delay (FID): o tempo que o navegador leva para realmente responder após a entrada do usuário se tornar possível

Time to Interactive (TTI): o tempo desde o carregamento até que a interação do usuário se torne possível

Total blocking time (TBT): o tempo total entre FCP e TTI

Cumulative layout shift (CLS): indicador de mudança de layout