É uma boa prática recomendada pelo Google pré-ocupar o espaço das imagens enquanto as mesmas estão sendo carregadas e ganha-se pontos na métrica CLS dos Core Web Vitals.
Um exemplo pode ser visto no YouTube (veja os espaços em cinza pré-ocupando o local onde serão carregadas as miniaturas dos vídeos):
Utilizando essa mesma técnica atualizamos grande parte dos componentes de imagem para empregar a mesma técnica de carregamento conforme especificações técnicas do Google. Abaixo um exemplo prático:
A parte cinza pré-ocupa (placeholder) o espaço que será usado pelo banner:
E depois que o banner termina seu carregamento é colocado no local pré-definido:
- Além disso empregamos técnicas sofisticadas de lazy load (carregamento das imagens conforme o cliente vai navegando na tela) para diminuir o download do usuário final (principalmente se o acesso for feito de celular) conforme recomendações e melhores práticas do Google;
- Também foi implementado o conceito de imagens responsivas (responsive imagens) objetivando permitir aos dispositivos móveis (celulares) escolher o melhor tamanho de imagem para a resolução da tela do celular, otimizando consideravelmente a banda consumida pelo usuário e tornando a percepção de carregamento do site ainda mais rápida.
Continuamos os esforços para otimizar o carregamento dos sites tornando a experiência dos usuários ainda melhores. A técnica de imagens responsivas é ainda pouco explorada pelos grandes e-commerces e traz otimizações significativas para os usuários, tornando assim nossos lojistas mais competitivos no mercado nacional com relação a concorrentes que usam outras plataformas que não empregam essas técnicas.
O que vem pela frente?
Estamos com uma agenda muito focada em otimização da experiência do usuário, sendo que pretendemos lançar melhorias de experiência de usuário todos os meses. O Google está sempre lançando novas práticas recomendadas e estamos sempre atualizados para garantir que aplicamos todas as melhores técnicas e práticas.
Com as próximas atualizações nossos e-commerces ficarão bem a frente da tecnologia utilizada hoje no mercado nacional em termos de melhores práticas para carregamento otimizado dos sites.
Estamos começando a utilização da conversão automática de imagens para o formato de imagem avif e seremos uma das primeiras plataformas de e-commerce do Brasil a utilizar essa técnica de otimização de imagem (que consegue diminuir em até 3x o tamanho da imagem mantendo a qualidade visual de qualidade).