Goiânia, 06 de maio de 2022. Confira as 6 dicas do Google para otimizar imagem para site. Hoje, o canal no Youtube do Google Search Central postou o vídeo com as sugestões. Confira a publicação na íntegra, tendo como apresentador o especialista Alan Kent:
Nesse sentido, o canal do Google Search Central é uma ótima fonte de informações sobre otimização. Lá, você pode aprender muito sobre o tema e tirar qualquer dúvida. Toda semana há um conteúdo diferente para você aprender algo novo.
Conheça as 6 dicas do Google para otimizar imagem para site
A seguir, vamos te mostrar um resumo das 6 dicas do Google para otimizar imagem para site. Elas tratam sobre CLS, tamanho das imagens, o melhor formato, compressão, cache no navegador e sequência para download. Sendo assim, são informações úteis para qualquer site de comércio eletrônico.
Além disso, vamos fornecer alguns links de aplicativos e recursos mencionados pelo apresentador Alan Kent. Eles podem te ajudar na otimizar imagem para site e melhorar o alcance do seu e-commerce. Agora, vamos a primeira dica.
1. Elimine o deslocamento de layout cumulativo, ou CLS
Dessa forma, a primeira dica é eliminar o deslocamento de layout cumulativo. Também conhecido como CLS, faz referência a como o conteúdo de uma página se move na tela. Ou seja, isso acontece nos sites em que o material se mexe, prejudicando a navegação.
Portanto, o CLS é tão impactante na experiência do usuário que o Google o considera como um dos três principais elementos para pontuação no Core Web Vitals. Assim, ela indica o quanto prejudica a navegação pelo fato do navegador não conhecer as dimensões das imagens antes de carregar as páginas. O efeito é o deslocamento do conteúdo.
O CLS pode ser mensurado de forma manual ou automática. No primeiro caso, basta perceber como e quanto tempo demora para carregar a página. No segundo, são usadas ferramentas específicas para medição.
Nesse caso, precisamos dividir os dados de laboratório dos dados de campo. O primeiro tipo é coletado por ferramentas de testes. Em contrapartida, o segundo é fornecido pelos usuários através de formulários em JavaScript ou os dados anônimos do navegador.
Aliás, você pode conferir o relatório de experiência do usuário do Chrome. Ou, então, verificar a velocidade do seu site. São ferramentas que podem te auxiliar a melhorar o CLS.
Por fim, a pontuação do CLS faz toda a diferença no desempenho do seu site. Procure eliminar o deslocamento de layout cumulativo para não prejudicar a experiência do usuário. Isso pode melhorar o alcance do seu e-commerce.
2. Escolha o tamanho certo das imagens
Para melhorar o desempenho do SEO do seu e-commerce, é preciso prestar atenção no tamanho das imagens. Principalmente nas dimensões largura e altura. Isso faz toda a diferença para a experiência do usuário.
Portanto, as imagens maiores demoram mais tempo para carregar. Além disso, a potência do hardware faz diferença na duração do carregamento das imagens. Ou seja, ao upar as fotos, pense nos dispositivos com processadores modestos.
No entanto, pode ser complicado conhecer todos os tamanhos adequados a cada tipo de dispositivo. Mas o relatório de velocidade da página pode fornecer informações importantes. Ele identifica as imagens desproporcionais e ainda, para facilitar a correção, indica a URL.
Outra dica que pode te ajudar é usar as imagens responsivas. Elas são capazes de se adequar às particularidades de cada navegador. No entanto, é preciso redimensionar os arquivos antecipadamente para direcioná-los através das URLs.
Caso esse processo seja muito complicado, considere usar uma rede de entrega de conteúdo, ou CDN. Tais serviços podem redimensionar as imagens e convertê-las em formatos mais eficientes. São questões fundamentais para aumentar a cobertura do seu comércio eletrônico.
3. Use o formato certo
Nesse sentido, o formato do arquivo faz toda a diferença para otimizar imagem para site. Assim, há três formatos: png, jpeg e webp. O primeiro é o mais pesado, o segundo pode ser útil e o terceiro é o recomendado.
No entanto, os formatos em jpeg e webp perdem a qualidade por causa dos algoritmos de compressão. Isso acontece para compensar o tamanho da imagem. Nesse caso, os pixels não são bem definidos.
Todavia, devemos considerar que, na maioria dos casos, o usuário prefere que o site seja rápido ao invés de visivelmente perfeito. Ou seja, é mais fácil o comprador desistir da compra numa página lente, do que em uma que o ícone não está tão bem definido.
Além disso, nem todos os navegadores suportam todos os formatos de imagem. Para descobrir mais sobre o assunto, ou sobre a compatibilidade do arquivo com o aplicativo de navegação, acesse o site Can I Use. Lá, você encontra um guia completo da relação entre documento e navegador.
Por fim, o webp, além de ser o formato mais leve, é aceito por quase todos os navegadores em uso. Assim, ele oferece uma boa combinação de eficiência e adaptabilidade. Dessa forma, escolha o formato da imagem com sabedoria para melhorar a otimização do seu site.
4. Comprima as imagens
Não basta eliminar o CLS, escolher o tamanho ideal das imagens, bem como o formato. É preciso comprimir os arquivos. No entanto, deve-se analisar o motivo da compactação de cada um deles.
Para tal, o relatório de velocidade da página pode te passar informações importantes sobre as imagens que precisam de compressão. Ele é fundamentado nos fatores usuais. Assim, encontrar o fator de qualidade para o seu site faz toda a diferença.
Sendo assim, um valor padrão para o arquivo com formato webp é 75. Para te ajudar, você pode utilizar o site Squoosh, que é capaz de comprimir as imagens e ainda compará-las com arquivos com tamanhos diferentes. Além disso, ele é capaz de fazer um antes e depois da sua imagem.
Outro ponto importante sobre a dimensão da imagem para e-commerce, é que, em alguns casos, elas precisam ser grandes. Principalmente as imagens de produtos que os usuários podem ampliar. Assim, é necessário saber dimensionar os arquivos para garantir a boa experiência do usuário.
5. Determine por quanto tempo o navegador pode armazenar o cache das imagens
Neste ponto, você precisa determinar por quanto tempo o navegador pode armazenar o cache das imagens. Ou seja, você pode incluir uma resposta http com orientação de armazenamento das informações. É importante para o bom desempenho da sua página.
Para ter mais informações sobre a política de cache, você pode usar o relatório de velocidade da página. Há uma seção específica sobre o tema. Além disso, ela identifica as imagens que podem se beneficiar com a delimitação do tempo do cache.
Ademais, você pode usar as ferramentas para desenvolvedores do próprio Chrome. Com elas, há como examinar os cabeçalhos de resposta do cache. Aliás, é possível corrigir os problemas verificando as configurações do servidor e, assim, ajustar o tempo de armazenamento da imagem.
Portanto, se as imagens não forem alteradas com frequência, ou se fornecer novas URLs a elas, basta definir um tempo longo de cache. Assim, isso diminui o tempo de download, principalmente para vários locais ao redor do mundo. Com isso, os arquivos podem ficar mais perto dos servidores e, assim, melhorar o tempo de carregamento.
6. Escolha a sequência certa para download das imagens
Para fechar, vamos a dica mais complexa. Para melhorar o desempenho do seu site, você precisa escolher a sequência certa para download das imagens. No entanto, há uma diferença entre os navegadores com http1 para os com http2.
Nesse caso, os navegadores com http1 normalmente fazem o download de várias imagens em paralelo. Em contrapartida, o http2 baixa todos os arquivos de uma vez. Geralmente o segundo tipo é mais rápido e evita problemas de gargalo onde os documentos maiores atrapalham a transmissão dos menores.
Sendo assim, você precisa ter em mente uma sequência da importância das imagens. Dessa forma, as primeiras devem ser os arquivos grandes no topo da página. Elas têm influência direta na pontuação do Core Web Vitals.
A segunda camada de imagens são aquelas que aparecem na tela do usuário, sem considerar o recurso da rolagem. Nesse caso, há as imagens acima e abaixo da dobra. Dê preferência para as que estão acima.
Por fim, há as imagens que são baixadas fora da tela. Elas aparecem quando o usuário começa a rolar a página. Nesse caso, é recomendado usar o recurso de carregamento lento, ele pode aliviar o site de um processamento desnecessário que o internauta ainda não experimentou.
A aplicação da sequência das imagens requer bastante atenção. No entanto, elas fazem toda a diferença para o desempenho do seu site. Ainda mais quando a sua página for um e-commerce com milhares de fotos de produtos.
Últimas considerações!
A otimização das imagens é um fator importante para a boa performance nos mecanismos de busca. Ainda mais para páginas de vendas com muitos produtos. Não é à toa que o Google ensina como melhorar essa pontuação nos relatórios de desempenho.
Por fim, hoje nós te mostramos as 6 dicas do Google para otimização de imagens em e-commerce. Elas foram divulgadas no canal do YouTube da própria Big Tech. Implemente todas as sugestões e coloque o seu site no topo do SERP.
