A velocidade de um website interfere diretamente na taxa de conversão, engajamento e também no posicionamento orgânico nos mecanismos de busca.
88% dos usuários que tiveram uma experiência ruim ao acessar um site devido a velocidade de carregamento são menos propensos a comprar e mais de um terço desses usuários vai compartilhar a experiência ruim com os amigos, revelou uma pesquisa da Econsultancy.
Um dos primeiros pontos a se fazer ao iniciarmos um trabalho de otimização de performance, é analisar todas as requisições (requests) da página e verificar o tempo e peso delas.
Imagens não otimizadas é um dos principais fatores para termos um tempo de carregamento lento. Esse tipo de descuido, aumenta o risco de uma taxa de rejeição maior e menos conversões, ou seja, oportunidades perdidas para lucrar. Ainda mais no mobile.
Listo a seguir algumas dicas para tirarmos um proveito das imagens no desenvolvimento de um website.
1 – Priorize as imagens mais importantes do seu site
- Remova imagens em alta resolução e GIFS desnecessários
- Substitua imagens por texto ou CSS sempre que possível
Faça uma lista e se pergunte, “Todas as imagens que compõe o seu layout são realmente necessárias?” Um título animado em GIF, não poderia ser um título CSS animado? A interação do designer com o desenvolvedor é muito importante nesses cenários. Em diversos casos, é possível utilizar CSS para substituir imagens, isso ajuda a economizar dados e consequentemente terá um ganho de performance.
2 – Escolha um formato de imagem eficiente
- WebP: Imagens translúcidas e fotos com melhor compressão
- SVG: ícones e formas escalonáveis
Teste o WebP, que pode ser usado para imagens fotográficas, 30% mais comprimidas que o JPEG, sem perda de qualidade. Mas garanta sempre compatibilidade total de navegação, o google forneceu uma documentação onde fala mais sobre a compatibilidade WebP. Link
3 – Comprima e reduza o peso das imagens
- Remova metadados
- Teste definições de qualidade
- AMP – Accelerated Mobile Pages
Reduza o tamanho, mas garanta qualidade ao comprimir as imagens. Hoje existem diversas aplicações, inclusive web, para compressão de imagens. Remover metadados (dia e hora de criação do arquivo, por exemplo) também é uma alternativa, mas nunca deixe de testar a qualidade. Nunca!
Adote o AMP – Accelerated Mobile Pages, se possível. O AMP é uma tecnologia que manipula códigos HTML de páginas da internet para montar uma visualização rápida e leve. Há um modelo padrão com título, resumo, autor, texto e imagens que ajuda a acelerar o processo de carregamento, deixando de lado elementos desnecessários do site original.
4 – Use técnicas de carregamento
- Imagens em diferentes versões
- Lazy loading
- Carregamento progressivo
- Placeholders
Oferecer múltiplas versões de uma mesma imagem, tendo como base diferentes dispositivos e tamanhos de tela dos usuários. Isso evita com que uma imagem carregada no desktop, seja a mesma para o mobile e vice-versa.
O lazy loading prioriza o carregamento das imagens disponíveis para uma visualização específica – as demais, que não aparecem naquele momento, são carregadas quando necessário. Isso evita com que todas as imagens são carregadas no carregamento inicial prejudicando o carregamento.
Quando imagens grandes demoram a carregar, pense em implementar técnicas de carregamento progressivo como placeholders (dicas, frases ou uma palavra que aparece na página para ajudar o usuário a preencher um formulário), indicadores de progresso ou formatos eficientes como o JPEG progressivo. Esse tipo de otimização dá aos usuários a sensação de estar progredindo na página, e isso os mantêm engajados por mais tempo.
Implemente indicadores para avaliar a performance e monitore com dashboards, alertas automáticos e faça um review mensal. Projetos que são atualizados constantemente devem ter esse nível de atenção.
