Como otimizar o desempenho da Web e o resultado final

A paciência não é uma virtude para os visitantes do site e compradores online. Cada fração de segundo conta quando se trata de manter – ou perder – um visitante em seu site.

De acordo com a Kissmetrics, o tempo de carregamento é um dos principais fatores que contribuem para o abandono da página. Como o visitante médio da web não tem paciência para uma página que demora muito para carregar, o abandono aumenta em porcentagem a cada segundo de tempo de carregamento. Quase 40% dos usuários abandonarão uma página após 10 segundos, observou o blog. Os usuários de Internet móvel provavelmente experimentam a maior frustração com esse problema – 73% observaram que encontraram um site que estava muito lento para carregar.

O problema de carregamento da página impacta diretamente no comportamento de compra dos visitantes do site. A Kissmetrics também observou que 79% dos compradores insatisfeitos com o desempenho do site são menos propensos a comprar no mesmo site novamente. Quase metade dos consumidores espera que as páginas carreguem em 2 segundos ou menos, e um atraso de 1 segundo diminuirá a satisfação do cliente em 16%.

As consequências desses atrasos se traduzem em dinheiro real. A gigante do comércio eletrônico Amazon revelou que uma desaceleração no carregamento da página de apenas 1 segundo custaria US $ 1,6 bilhão em receita de vendas. Da mesma forma, o Google observou que uma desaceleração de apenas quatro décimos de segundo em seus resultados de pesquisa resultaria em uma perda de 8 milhões de pesquisas por dia, o que se traduz em milhões a menos em publicidade online.

Chegando ao cerne do problema

Os maiores fatores que contribuem para o tempo de carregamento são imagens, vídeos e gráficos. Os sites de hoje incorporam mais recursos visuais e menos texto para atrair visitantes. De acordo com o HTTP Archive, quase 64% do peso médio de um site são imagens, enquanto o vídeo representa outros 8%.

Como esses tipos de mídia representam quase três quartos do tamanho do site, é importante gerenciar com mais eficiência imagens e vídeos em seu site para melhorar o desempenho e as taxas de conversão. Vejamos algumas etapas que você pode seguir para reduzir o impacto de imagens e vídeos no desempenho do seu site.

Use formatos de imagem mais eficientes e modernos

O Google adicionou suporte para seu formato de imagem WebP aos navegadores Chrome, e a Microsoft fez o mesmo para JPEG-XR na maioria de seus navegadores Internet Explorer e Edge. Mas muitos desenvolvedores ainda não adotaram essas mudanças, mantendo os mesmos formatos JPG e PNG, em vez de aproveitar como os formatos modernos podem otimizar seus sites.

Idealmente, você deve converter imagens para WebP e JPEG-XR quando apropriado e ajustar a qualidade de compactação para equilibrar os formatos. É importante também detectar o navegador específico que acessa cada imagem e entregar uma versão da imagem otimizada para o respectivo navegador. Isso permitirá que você garanta que os usuários recebam as melhores imagens possíveis, em termos de qualidade visual e otimização do tamanho do arquivo, sem diminuir a velocidade do seu site.

Elimine o redimensionamento desnecessário do navegador

Os desenvolvedores geralmente usam o redimensionamento de imagens do lado do navegador como um atalho, em vez de redimensionar imagens do lado do servidor. Embora o resultado final pareça exatamente o mesmo nos navegadores modernos, o impacto na largura de banda é bem diferente. Com o redimensionamento do navegador, os visitantes do site perdem um tempo precioso baixando uma imagem desnecessariamente grande e você desperdiça largura de banda entregando-a a eles.

Para navegadores mais antigos, o problema é ainda mais pronunciado, pois seus algoritmos de redimensionamento geralmente são inferiores. Você precisa ter certeza de que suas imagens se encaixam perfeitamente nas dimensões exigidas do site. Vale a pena criar diferentes miniaturas da mesma imagem em vez de entregar uma imagem grande e depender do navegador para redimensioná-la. Existem algumas ferramentas disponíveis que podem ajudar com isso, como um redimensionador de imagem de código aberto como o ImageMagick ou uma solução baseada em nuvem como o Cloudinary.

Use tipos de arquivo de imagem corretos

JPEG, PNG e GIF são os formatos de arquivo mais comuns usados ​​em sites hoje, mas cada um tem funções muito diferentes. Use o formato errado e você estará desperdiçando o tempo de seus visitantes e seu próprio dinheiro. Um erro frequente é usar PNGs para entregar fotografias. Existe um equívoco comum de que os PNGs, como formatos sem perdas, produzirão a maior reprodução possível das fotos.

Embora isso geralmente seja verdade, essa também é uma otimização bastante desnecessária. É importante ter em mente qual formato de imagem deve ser usado para o conteúdo exibido. PNG deve ser usado para imagens geradas por computador (gráficos, logotipos, etc.) ou quando você precisar de transparência em sua imagem (sobreposições de imagem); JPEG quando você está mostrando uma fotografia capturada; e GIF quando a animação é necessária (animação de carregamento Ajax, etc.).

Não use um único tamanho de imagem em todas as mídias de entrega

Seu site está sendo visualizado em muitos dispositivos diferentes, principalmente porque smartphones, tablets e smartwatches se tornaram os preferidos dos consumidores. Muitas vezes, os desenvolvedores oferecem as mesmas imagens em todas as resoluções de dispositivos, usando o redimensionamento do lado do cliente para as imagens. As imagens podem parecer ótimas, mas os visitantes perdem tempo carregando imagens desnecessariamente grandes em seus dispositivos e você paga pelo uso de largura de banda redundante.

Isso é particularmente injusto para usuários de 3G e usuários de roaming que pagam um grande extra para baixar as imagens inutilmente extras de alta resolução. Para evitar esses problemas, você deve identificar os dispositivos móveis dos visitantes e a resolução usando o agente do usuário. Com a resolução correta em mãos, recupere a imagem mais adequada de seus servidores. Isso requer que você disponibilize um conjunto de miniaturas para cada uma de suas imagens originais. Existem excelentes pacotes Javascript disponíveis que automatizam esse processo.

Aproveite o design responsivo

Cada dispositivo que um visitante está usando para acessar seu site tem uma resolução diferente. A marcação de um site deve se adaptar para parecer perfeita em todos os diferentes dispositivos e em várias resoluções, densidades de pixels e orientações de dispositivos móveis. Gerenciar, manipular e entregar imagens é um dos principais desafios do design responsivo que os desenvolvedores web enfrentam.

Devido a esses desafios, muitos sites são criados com imagens de alta resolução que podem ser necessárias e simplesmente reduzidas no lado do cliente, dependendo do ponto de interrupção. Esse processo é ineficiente e prejudica o desempenho. Mas existem opções, como a ferramenta de código aberto Responsive Breakpoints, que pode ajudá-lo a gerar todos os tamanhos de imagem necessários, bem como o código HTML apropriado.

Utilizar redes de entrega de conteúdo (CDNs)

CDNS normalmente tem servidores estrategicamente implantados em todo o mundo para reduzir os tempos de ida e volta do conteúdo. As CDNs permitem que as imagens sejam veiculadas mais rapidamente aos usuários e reduzem a probabilidade de falhas, aprimoram o desempenho de SEO e melhoram a experiência do usuário. Ao escolher uma CDN, você precisará considerar seu nível de cobertura global, a taxa de armazenamento em cache, a capacidade de executar operações lógicas na borda, os tempos médios de resposta e outras métricas, como tempos médios de invalidação.

O Impacto da Mudança

Ao empregar essas práticas recomendadas, você pode realmente fazer a diferença na experiência do usuário, incentivando os visitantes a permanecerem mais tempo, navegarem mais, se envolverem e fazerem compras. Considere os resultados dessas empresas:

O Apartment List, um recurso on-line que ajuda as pessoas a procurar por imóveis para aluguel, se viu lidando com uma variedade de formatos e resoluções de imagem diferentes, pois coleta dados de imagens de várias comunidades de apartamentos apresentadas em seu site. Ao transformar todas essas imagens em imagens ideais para apresentação em dispositivos móveis de diversos tamanhos, além de desktops, além de alavancar técnicas de design responsivo, a empresa obteve um aumento de quase 20% em suas taxas de conversão.

KartRocket, uma plataforma de comércio eletrônico baseada em SaaS que oferece um ecossistema de comércio eletrônico transparente e completo que ajuda as pequenas e médias empresas a criar lojas online de maneira rápida e fácil, necessárias para encontrar uma maneira de garantir a qualidade das imagens sem afetar o tempo de carregamento ou o desempenho do site para seus clientes. Ele aproveitou ferramentas para controlar imagens dinamicamente, para que fossem otimizadas para miniaturas pequenas, imagens de banners grandes e imagens de produtos principais. Essa abordagem permitiu que a KartRocket alcançasse um aumento de 100 vezes no tempo de resposta para carregamento de imagens.

A linha inferior

Quando tempo é dinheiro, os proprietários de sites não podem deixar de tomar todas as medidas necessárias para melhorar as experiências de seus visitantes. Mesmo uma fração de segundo de atraso no carregamento de uma página pode se traduzir em perda de receita e confiança por parte do consumidor.

Considerando que imagens e vídeos são os maiores consumidores de largura de banda na maioria dos sites, você precisa dar uma olhada séria em seu web design e formatos de imagem e, em seguida, tomar as medidas necessárias para garantir que a mídia seja otimizada para o seu site - sem mencionar suas receitas e percepções do cliente – não sofra como resultado.