Seu site é lento? Conheça 2 medidas para turbiná-lo!

Seu website está repleto de fotos dos trabalhos que você concluiu como arquiteto ou designer de interiores? Ou talvez você seja um desenhista e mantenha um blog cheio de suas maravilhosas ilustrações? Ou cuide de uma loja virtual e tenha uma dúzia de fotos detalhadas para cada um de seus produtos (o “sonho de consumo” de qualquer comprador na Internet)?

Independentemente da área em que você atua, sabia que essas imagens e fotos podem deixar o seu site mais lento, fazendo com que o visitante desista de esperar o carregamento delas e abandone o site?

Quer saber o que você pode fazer para tornar o website mais rápido? Então este artigo é para você! Para simplificar, o texto foi dividido em duas partes. Esta é a primeira delas.

Indo direto ao ponto

Clique nos links página-A e página-B. Qual das duas páginas é mais rápida? Em qual delas as fotos “carregam” (aparecem) mais rápido?

Acredite se quiser: a única diferença entre as páginas são as fotos. Olhe, atentamente, para 1 foto em cada página. Vê alguma diferença entre elas?

Por que a página A é mais lenta

Fotos tiradas a partir de câmeras digitais comuns ou do seu celular costumam ser de alta “qualidade” (alta resolução/definição e sem compressão), produzindo arquivos muito grandes. Além disso, os programas que geram as fotos embutem informações extras nos arquivos, como a data em que a foto foi tirada, quais eram as configurações da câmera, descrições, comentários, dados de copyright e etc. Tais informações tornam os arquivos ainda maiores.

Quanto maior for o arquivo da foto, mais tempo ele demorará para ser transmitido do servidor do seu website para o navegador do seu visitante. Então, o grande “segredo” é esse: na página B, a mais rápida, os arquivos das fotos são mais “leves”, ou seja, menores.

Ah, e não confunda o tamanho do arquivo com as dimensões da imagem (largura x altura). Nas fotos abaixo, por exemplo, as imagens MG-7709-A.jpg e MG-7709-B.jpg têm as mesmas dimensões, mas os arquivos têm tamanhos diferentes.

 

Mas o meu site não tem fotos. Então está tudo bem, certo?

Mais ou menos. Ilustrações, desenhos e outras imagens geradas por computador também podem sofrer do mesmo mal. O ponto é: a maioria dos programas para criação/manipulação de imagens estão preparados para gerar imagens boas para impressão, em alta resolução, mas com informações demais para a simples observação a olho nu. Isso significa que os arquivos são maiores do que precisariam ser para o seu website.

Qual a solução?

Otimizar ou comprimir as imagens antes de usá-las na web. Essa “otimização” reduz o tamanho dos arquivos, removendo as informações desnecessárias, sem causar perda na qualidade das fotos e imagens, ou causando uma pequena perda, quase indetectável ao olho humano.

Aqui na Onbiz, costumamos usar o jpegoptim; ou reduzir a qualidade em lote, através do filtro Batch do GIMP; ou usar uma combinação dos complementos YSlow e Google PageSpeed. Foi como otimizamos as fotos e imagens dos sites e blogs que fizemos até o momento.

Se você for leigo no assunto, pode usar uma ferramenta online chamada Smush.it. Para isso, basta acessar o site, clicar na aba do Uploader e escolher os arquivos que você deseja otimizar. Certifique-se de ter lido os termos de uso antes.

Mas o Smush.it tem suas limitações. Não vou me aprofundar muito no assunto. Para um exemplo prático, clique nas imagens abaixo. Uma delas é a imagem original e tem 210 KB de tamanho. A outra é a imagem otimizada pelo Smush.it e tem 200 KB de tamanho (ou seja, redução de 5%). A última imagem é a otimizada pelo jpegoptim, com qualidade máxima de 90%, e tem tamanho de 125 KB (ou seja, redução de 40%).

Detalhe: as imagens não estão na ordem citada. Apenas olhando para as fotos ampliadas, tente determinar qual é qual.

(Foto por Ermano Martins)

Isso é muito complicado. Existe algo mais simples e mágico?

Se você tiver um website atualizável feito em WordPress, saiba que existem plugins como o WP Smush.it, o CW Image Optimizer e o EWWW Optimizer, que podem lhe ajudar.
(Se não souber o que é WordPress ou o que são plugins, clique e assista a este vídeo tutorial).

Em teoria, esses plugins otimizarão, automaticamente, todas as imagens que você adicionar ao site. Na prática, no entanto, estudamos e testamos alguns desses plugins e nenhum deles teve resultado satisfatório dentro das características que buscávamos e das restrições que tínhamos. Mas isso é assunto para um outro artigo!

O que fazer agora

Se você gostou deste artigo e não quer perder a segunda parte dele, assine a Newsletter da Onbiz.

Ah, e não se esqueça de clicar nos botões abaixo e indicar o artigo para os seus amigos!

Leia também:

Daniel Henrique Alves Lima

Atualmente, dedico-me a ajudar pequenas empresas a começarem na Internet ou a melhorarem sua presença na web, através de seus sites e blogs, construindo uma boa e reputação online. Esta servirá para se aproximarem de seus clientes atuais e para alcançarem novos clientes, gerando mais negócios.

Saiba mais sobre mim no site da Onbiz ou acessando meu blog pessoal.

Mais posts

Siga-me:twitterlinkedin

Nenhum comentário

Deixe um comentário


nove + = 14