Nota do editor: uma versão deste artigo foi publicada anteriormente no Think with Google Nordics & Benelux, abordando a importância do design voltado ao mobile em sites de marcas globais e locais.
A velocidade de sites mobile não costuma ser prioridade para a maioria dos departamentos de marketing das marcas. Talvez você até pense que essa questão tem mais a ver com o trabalho dos desenvolvedores e menos com o do marketing. Mas isso não é necessariamente verdade. Às vezes, as belas imagens que dão vida a uma página podem deixá-la mais lenta se não forem bem usadas. Esse tipo de descuido aumenta o risco de uma taxa de rejeição (bounce rate) maior e menos conversões, ou seja, oportunidades perdidas para lucrar.
Se você está em busca de ganhos na velocidade de carregamento do seu site mobile, comece reavaliando as imagens da sua página. Aqui vão algumas dicas mais técnicas que você pode discutir com seu desenvolvedor – incluindo exemplos ilustrativos do Google e da Alphabet. Com elas, sua empresa vai colher os frutos dessa otimização de imagens, e seus usuários vão ter experiências mobile mais ágeis.
1. Priorize as imagens mais importantes do seu site
Antes de otimizar as imagens do seu site, cheque se todas são mesmo necessárias. A foto em alta resolução na sua home pode ser incrível, mas será que ela de fato ajuda a transmitir a mensagem que você deseja? Que tal trocar aquele GIF animado por uma animação em código, mais simples e eficiente? Ou, melhor ainda, que tal eliminá-lo?
Eliminar elementos irrelevantes reduz a necessidade de manutenção e a complexidade das páginas. E se uma imagem puder ser substituída por texto ou CSS (uma linguagem que define estilos, formas e efeitos em poucas linhas de código), os desenvolvedores vão gostar do desafio criativo, e os usuários vão economizar dados.
O site Verily, que está dentro do Alphabet, utilizou esse método, ficando mais leve e simples apenas por reduzir o tamanho das imagens. De forma inteligente, a seção inicial (conhecida como hero) usa uma imagem gradiente animada de apenas um pixel de largura. Ela poderia ter sido criada em código, mas isso implicaria questões de performance mais custosas e estranhas visualmente. Assim, um designer e um desenvolvedor trabalharam em parceria para garantir o perfeito equilíbrio entre estética e performance nos dispositivos móveis.
A animação é ainda mais simplificada na versão mobile, onde ganha um fundo de cor sólida que muda gradualmente em uma sequência em código. A simplicidade dessa opção gerou uma página leve, sem o peso dos frameworks de JavaScript ou arquivos pesados. Mesmo na simulação em rede 3G, o carregamento da página é quase instantâneo, com uma pontuação 92 na escala da ferramenta Lighthouse Performance – faltando poucos milissegundos para atingir o melhor percentual de sites de alta performance.
2. Escolha um formato de imagem eficiente
Com tantos formatos à disposição, pode ser difícil saber qual deles é o mais eficiente. Tudo depende do uso, mas a escolha correta já pode reduzir alguns bytes no tamanho da sua página. Comece testando o WebP, que pode ser usado para imagens fotográficas e translúcidas 30% mais comprimidas que o JPEG, e sem perda de qualidade. Depois siga esta lista para garantir compatibilidade total de navegação:
JPEG: fotos sem transparência
PNG: fundos transparentes
SVG: ícones e formas escalonáveis
No Google, utilizamos essa abordagem no desenvolvimento do site Fighting Piracy. O time responsável usou o formato SVG para criar animações leves e suaves, feitas com formas simples. Propostas anteriores para o design da página incluíam GIFs e vídeos com mais de 300 Kb cada um, mais do que o dobro do recomendado.
No entanto, ao implementar definições de tamanho das páginas como parte de uma cultura de performance em alta, o time foi capaz de reduzir o tamanho das imagens em dez vezes. Essa iniciativa demandou uma colaboração técnica mais próxima entre o desenvolvedor e o designer, mas as melhorias na velocidade via mobile fizeram valer o esforço.
3. Comprima e reduza o peso das imagens
A otimização de imagens pode ajudar você a economizar muito em bytes e a melhorar a performance em mobile. Mesmo as otimizações mais simples podem ajudar: comprimir imagens, remover metadados (dia e hora de criação do arquivo, por exemplo) e testar definições de qualidade. E agora está mais fácil do que nunca tornar as imagens responsivas, com a possibilidade de entregá-las em diferentes tamanhos para que o navegador escolha a que se encaixa melhor na tela do usuário.
O melhor é que muitas dessas ações podem ser automatizadas, poupando o tempo dos envolvidos e garantindo que a otimização ocorra. Por exemplo, você pode utilizar um script para reduzir o tamanho e comprimir centenas, ou até milhares, de imagens ao mesmo tempo. Assim você diminui o volume de trabalho manual feito pelos designers, liberando a equipe para tarefas mais interessantes.
Adotando uma AMP (Accelerated Mobile Page), as etiquetas personalizadas automatizam muitas dessas otimizações. O Google AMP Cache também limita as dimensões máximas das imagens, para evitar problemas de memória do navegador e imagens em cache, acelerando o carregamento.
A BMW, por exemplo, desenvolveu uma abordagem de alta performance com prioridade para mobile, mas sem abrir mão de seus belos vídeos e imagens. Graças às tags eficientes do AMP e a outras funcionalidades de velocidade, o novo site alcançou um tempo de carregamento quatro vezes mais rápido, com aumento de 50% no número de usuários em dispositivos móveis.
Como bônus, a página combina a velocidade do AMP com as excelentes funcionalidades das tecnologias PWA (Progressive Web App), criando uma experiência de aplicativo de alta qualidade.
4. Use técnicas de carregamento
A compressão e a redução do tamanho de imagens compõem a abordagem básica que todo designer e desenvolvedor devem seguir. Para ir além, os desenvolvedores podem oferecer múltiplas versões de uma mesma imagem, tendo como base diferentes dispositivos e tamanhos de tela dos usuários – ou ainda as condições de acesso à rede. Isso permite a construção de páginas que carregam rápido para todos, independentemente das variáveis de cada navegação.
Quando suas imagens forem finalmente otimizadas, cheque se elas estão sendo exibidas no momento certo. Na primeira visita ao seu site, o usuário quer ver todo o conteúdo de sua janela de visualização – o que é chamado muitas vezes de above-the-fold (a primeira parte visível da página). Com uma técnica chamada lazy loading (ou “carregamento preguiçoso”), o site 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.
A empresa alemã de e-commerce bücher.de carrega somente as imagens que entram na área visível para o usuário. O conteúdo dessa parte é priorizado e aparece instantaneamente. Com essa e outras otimizações, a companhia acelerou o site em 33%, reduzindo o tempo de carregamento em 3,5 segundos.
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. Como diz o Design Advocate Mustafa Kurtuldu, “a ideia é preencher o espaço e ocupar seu tempo”.
Próximos passos: torne a velocidade mobile um KPI
A otimização de imagens é uma forma simples e de ótimo custo-benefício para melhorar os índices de conversão das páginas da sua marca. Mas para que a otimização seja sustentável a longo prazo, a velocidade do site deve se tornar um KPI da sua organização.
Para saber mais sobre a velocidade de suas páginas via mobile, experimente a versão atualizada da ferramenta Test My Site.
