Site

Site lento por causa das imagens: o que fazer?

Não é segredo que boas imagens, de qualidade e na quantidade certa, constituem um fator relevante para muitos sites. Em alguns casos, são mesmo essenciais.

Mas a consequência disso é que muitas vezes o site fica pesado, lento, demora para carregar justamente pela quantidade de imagens e o tamanho que elas têm.

Por que a lentidão do site é preocupante? O que fazer para tornar um site com muitas imagens mais rápido? Como fazer? As respostas para esse tipo de dúvidas, vem a seguir.

Por que a velocidade do site é importante?

A velocidade do site, do carregamento das páginas, é importante sob dois aspectos – visitantes e sites de busca.

Desde o princípio da Internet, a velocidade de carregamento das páginas dos sites que acessamos como visitantes, foi um critério para decidirmos se abandonamos a visita e voltamos para a página de resultados do site de busca (SERP), ou se avançamos na navegação site adentro.

No passado isso era ainda mais justificável, uma vez que a velocidade das conexões de Internet, era apenas uma mínima fração do que é hoje.

Mas mesmo com a chegada do 5G e com a disponibilidade de boas conexões Wi-Fi, é raro quem tenha paciência de esperar mais do que uns poucos segundos para começar a consumir o conteúdo que o levou ao site. Para muitos, é mais prático clicar no botão voltar e buscar outro site, especialmente se pretende-se navegar, ou seja, ir além da landing page ou página que serviu de entrada no site.

E é por essa razão, que aliada a outros aspectos e que o Google chama experiência na página, ele – e outros sites de busca – considera a velocidade com que um site entrega seu conteúdo, como importante fator de ranqueamento.

Assim o posicionamento que se tem para uma determinada busca orgânica, é influenciado pelo desempenho. Sites lentos, pesados, influenciam negativamente a posição que ocupam nas páginas de resultados.

Qual a importância das imagens no desempenho do site?

A solução para um site com muitas imagens não é remover, nem mesmo diminuir a quantidade de imagens.

Imagens são parte do processo comunicativo, se bem trabalhadas podem até ser uma forma alternativa e complementar de trazer visitantes e são parte do conteúdo e até o principal elemento de conteúdo, como por exemplo, no portfólio de um fotógrafo.

Mas imagens na maioria dos casos, costumam ser também os maiores itens de uma página, tanto visualmente, como em termos da quantidade de dados trafegados entre o servidor no qual estão hospedados e o navegador do visitante.

Uma única imagem pode equivaler ou até superar todo o volume de dados de todos os outros elementos (HTML, javascript, texto, ícones, fontes, etc), o que faz com fotos, ilustrações, infográficos, tornem o tempo de carregamento completo, tantas vezes maior quanto o número de imagens e seu tamanho em kilobytes ou mesmo em megabytes.

Para além desses dois importantíssimos fatores, imagens adequadas também favorecem menor consumo de tráfego, transferência e largura de banda do seu plano de hospedagem, o que pode ser relevante para um site com muita visitação.

Logo, quanto mais imagens seu site tem, mais atenção é preciso destinar a elas.

Como melhorar o desempenho de site com muitas imagens?

A melhora no desempenho de sites com muitas imagens, passa pela otimização das imagens.

Mas não é uma preocupação que deve existir apenas para quem tem muitas imagens. Como dissemos antes, uma única imagem mal tratada, pode arruinar o tempo de carregamento da página na qual está inserida.

Quando falamos em otimização de imagens, estamos nos referindo a tudo o que pode ser feito em qualquer imagem e que envolve o tamanho visual e resolução, o tamanho que ocupa em armazenamento (espaço ocupado), a qualidade da imagem, formato em que é salva.

Mas também há outras ações que podem ser adotadas na forma como o site as utiliza.

1. Tamanho e resolução adequados

O primeiro ponto que deve ser trabalhado, é o tamanho visual da imagem relativamente ao site.

Não há sentido, por exemplo, em ter uma imagem de 2400 X 1350, se a maioria das telas de dispositivos que acessam o site, é de no máximo 1920 X 1080 (Full HD).

Outro aspecto intimamente associado, é a resolução e que refere-se a quantos DPI (dots per inch) ela tem e que é um fator usado para impressão, mas que relaciona-se com o PPI (pixels per inch) da imagem.

Se o propósito das imagens não é serem impressas, não é necessário ter imagens em 300 DPI. Por outro lado, reduzir muito a resolução, faz com que a qualidade visual da imagem seja afetada negativamente, especialmente em dispositivos que têm uma densidade de pixels elevada e consequentemente, têm telas de maior qualidade.

Quanto mais pixels por polegada há, mais nítida, bem definida é uma imagem.

Por outro lado, também não adianta pensar no tamanho máximo de tela que a maior parte dos visitantes utiliza, se as respectivas imagens nunca serão exibidas em tela cheia.

Padronizar o tamanho e resolução com base no tamanho máximo que é exibido no site, é essencial.

2. Tamanho (espaço ocupado)

O segundo fator de preocupação, que é o tamanho em termos do espaço de armazenamento necessário e que por sua vez é o de influência direta na velocidade, é resultante do primeiro fator, mas é também do formato em que o arquivo é salvo.

Há diferentes formatos de imagens (BMP, JPG, GIF, PNG, WEBP, SVG, etc) e cada qual tem características que as tornam adequadas a diferentes usos.

Conhecer cada tipo ou formato e o que eles entregam de benefício, é fundamental. Não vamos nos aprofundar nisso, porque não é o objetivo do post e porque a escolha pode variar até para diferentes imagens de um mesmo site, conforme o propósito de cada uma.

Ou seja, você pode concluir que é oportuno ter algumas imagens em SVG, outras em WebP e até GIF, dependendo do caso.

Ao escolher o formato, está se decidindo com base em uma relação de compressão e qualidade. A compressão é o quanto de redução no tamanho necessário para conter os dados da imagem e a qualidade, é a percepção visual do quão boa, nítida ou definida ela é.

De modo geral, maior compressão significa menor tamanho e também menor qualidade. E vice-versa. Porém há formatos que oferecem uma relação melhor entre o tamanho (espaço ocupado em disco) e a qualidade.

E há até quem diga que o Google de alguma forma privilegia conteúdos que usem o WebP – embora não haja prova concreta a respeito – para posicionamento orgânico, em detrimento dos demais, por conta de uma boa relação de compressão e qualidade. E não por acaso, é um formato criado por ele em 2010.

3. Exibição das imagens

Há uma terceira maneira de otimizar imagens e que não reside em fazer nada nelas, mas em como elas são exibidas no site.

A recomendação mais comum, é também muito praticada e que são as galerias de imagens.

Páginas que contém um número importante de imagens, em vez de simplesmente inseri-las ao longo do conteúdo, indica-se criar uma galeria. A vantagem, é que galerias exibem miniaturas, as quais são bem menores quanto ao espaço que ocupam em disco e, por consequência, a respectiva página é carregada mais rapidamente.

O visitante pode escolher quais imagens exibir, mas nesse ponto a página principal já está carregada e a exibição das versões em tamanho natural, consta como outra ação dentro da página. Além do que o internauta pode optar por não visualizar nada e contentar-se com as versões reduzidas.

Seja em um ou no outro caso, ganha-se em velocidade de carregamento e oferecesse uma experiência melhor ao visitante.

4. Uso de plugins

O uso de plugins especialmente destinados a imagens, é a quarta medida de otimização.

Se você usa um CMS, especialmente no caso do WordPress, no qual a maioria dos sites é criado, há uma variedade de plugins gratuitos e pagos e que lhe ajudam na tarefa de entregar uma experiência visual boa, sem comprometer o desempenho.

Não vamos listar os melhores, tanto porque isso é relativo, como também porque há muitos CMSs e mais ainda plugins.

O que importa é que você saiba que existem plugins que fazem algumas das coisas que mencionamos, como o carregamento de imagens em background, o adiamento do carregamento de imagens, priorizando o texto para que o visitante já possa ir consumindo o conteúdo e até o redimensionamento de imagens antigas, grandes e que já haviam sido enviadas para o site, antes de você ter lido esse conteúdo.

Uma pesquisa por plugins de imagens do site do WordPress.org, retornará dezenas de páginas de plugins para todo tipo de ação imaginável envolvendo imagens.

5. Outros elementos do site

Dependendo da programação usada e da plataforma de desenvolvimento do site, é possível implementar um carregamento em background enquanto o usuário navega pela página, de modo que ao clicar para visualizar a imagem em tamanho maior, ela já foi carregada e assim a exibição é instantânea.

O quanto as fotos, os gráficos, ilustrações e outros elementos visuais representam em relação ao todo do site e com base nisso, considerar uma reformulação, pode ser um bom caminho ou até mesmo uma necessidade. Afinal instalar vários plugins para resolver questões de lentidão por excesso e imagens mal trabalhadas, pode acarretar um segundo fator de lentidão.

É preciso lembrar que cada plugin – por melhor que seja – tem uma demanda de processamento, de uso de memória e gera processos do PHP e que por sua vez, requer um tempo do servidor para entregar o resultado esperado.

Pode até ser que se consiga uma melhoria expressiva nos tempos de carregamento, apesar de se ter alguns plugins, mas também deve-se observar se sua conta de hospedagem é capaz de lidar bem com isso em momentos de intensa visitação, o que também pode acarretar lentidão por simples incapacidade de atender a uma grande quantidade de requisições feitas.

Ou seja, é necessário se ter uma visão de todo, em que as imagens fazem parte de um sistema em que todas as partes precisam funcionar da melhor forma possível.