Corrigir Layout Shift causado por imagens com redimensionamento automático

Corrigir Layout Shift causado por imagens com redimensionamento automático

Você sabia que existe uma maneira muito simples e bastante comum de destruir seus Core Web Vitals com apenas uma instrução CSS? Isso está por aí, eu já vi muitas vezes e causará estragos no seu CLS.

Aqui está: o pequeno pedaço de código que fará automaticamente todas as suas imagens mudarem de posição na página. Isso até causará um layout shift quando o width e height da imagem tiverem sido definidos explicitamente! Além disso, definir o valor correto de CSS para aspect-ratio não corrigirá o problema!

É um pequeno e sorrateiro problema de Layout Shift porque só acontecerá em visitas de primeira vez. Como você, como webmaster, provavelmente terá a imagem no cache do seu navegador, pode não notar imediatamente o Layout Shift.

<style>
img{
   width:auto;
   height:auto;
   max-width:100%
}
<style>

Como notamos o problema?

É difícil detectar esse tipo de problema que aparecerá principalmente para novos visitantes com dispositivos móveis de baixa largura de banda. A resposta é o RUM Tracking. O RUM Tracking rastreia os Core Web Vitals para usuários reais e reporta de volta para você. RUM Tracking é ótimo para encontrar problemas ocultos nos Core Web Vitals!

Como funciona?

Este pequeno pedaço de código CSS às vezes é usado para imagens responsivas. Quando uma imagem não está pré-armazenada em cache pelo navegador, um navegador não terá ideia da largura e altura intrínsecas. Com esse código, ele ignorará a largura e altura definidas e tentará renderizar a página com a largura e altura intrínsecas. Como isso é desconhecido, a imagem renderizará primeiro em 0x0 pixels e somente quando a imagem for baixada e decodificada será renderizada novamente e ocupará a quantidade correta de pixels.

1. O height: auto; garantirá que a imagem sempre tenha a altura correta quando a imagem for redimensionada. 
2. O max-width:100%; garantirá que a imagem nunca seja maior que a viewport visível 
3. A parte width:auto; gerará um layout shift para imagens sem cache, mesmo quando você define explicitamente a largura e a altura ou o aspect ratio.

Como corrigir?

A correção é fácil. Basta remover o width:auto. Isso forçará o navegador a usar a largura de imagem fornecida e calcular a altura automática com base na altura. 

Então faça um favor a si mesmo, tire 15 segundos, inspecione uma imagem aleatória no seu site (botão direito, inspecionar elemento) e verifique por width:auto; e height:auto; Se você vir isso, corrija!.