Posts

, , ,

Como Otimizar meu Site? 1o. Otimizando Imagens e Fotos…

Por que otimizar meu site?

Sabemos que atualmente o tempo que seu site leva para carregar é algo muito importante, tanto para os mescanismos de busca (SEO), como o Google, como para a experiência do usuário na sua webpage. Uma pagina rápida é mais agradável e gera maior engajamaneto de seus visitantes.

Mas quais são os pontos mais importantes para Otimizar o seu site? Veja abaixo uma checklist dos itens que você sempre deve olhar. Iremos trabalhar cada um deles em diferentes artigos:

1) Otimizar Imagens (neste artigo)
2) Otimizar Scripts (próximos artigos)
3) Otimizar Hospedagem (próximos artigos)

Otimizando as Imagens:

Normalmente as imagens são a parte mais pesada no carregamento de um site e existem alguns principais pontos para você otimizar:

1) A resolução das imagens:

A imensa maioria dos monitores atuais utiliza a resolução de 1366×768 pixels, podendo chegar a até 1920×1080.
Em celulares isso é ainda menor: mesmo os celulares com displays do tipo “retina”, com altíssima resolução, utilizam o que chamamos de resoluções virtuais, que é a adaptação da resolução real para uma resolução que você conseguirá ver confortavelmente em uma tela pequena (você não conseguiria ler nada se seu celular apresentar as páginas com mais de 1000 pixels de resolução). Desta forma, a resolução virtual usada em celulares é de “somente” 360×640 pixels.

Então, qual é o sentido de colocar aquelas fotos da sua super câmera com 10 ou 20 megapixels?
Isso é algo por volta de 6000×3000 pixels… Essas fotos são enormes e não serão aproveitadas pelo monitor ou display do celular.

Por isso, antes de fazer upload, verifique que tamanho você quer suas fotos na tela. Se forem ocupar meia tela, pense em redimensioná-las para 600 pixels de largura. Se for tela inteira, 1200 ou 1500 pixels já é mais que suficiente.
Essa simples alteração na resolução poderá deixar suas imagens de 4 a 10 vezes menores, portanto, de 4 a 10 vezes mais rápidas para carregar.

2) Tipo de Imagens: Devo usar PNG ou JPG?

O dois formatos mais usados para exibir imagens em site são: JPG e PNG. Mas qual a diferença entre JPEG e PNG? Qual você deve usar e quando?

Resumidamente, fotos ou imagens complexas, com muitas cores, normalmente devem utilizar o formato JPEG, pois é o que consegue maior compressão nesses casos e com perdas pouco perceptíveis (O JPEG é um formato que admite alguma perda de qualidade para aumentar a compressão).

Já se você precisa de imagens com regiões transparentes ou com poucas cores chapadas, você deve optar pelo formato PNG, mais específico para esses casos, pois suporta transparências e não há perda de qualidade. Esse formato é muito utilizado, por exemplo, para Logotipos ou desenho simples.

Veja abaixo um teste com JPEG. A imagem original deste gatinho fofo, em minha câmera fotográfica, tem uma tamanho de 4 Megabytes, usando a resolução de 5000×3330 pixels.

Quando redimensionei a foto para o tamanho que desejo exibi-la na tela, ou seja, aprox.  500×333, eu já reduzi em 10 vezes sua largura e sua altura.
Em seguida, salvei a foto nos dois formatos para compararmos a qualidade e os tamanhos resultantes.

imagem gato sem otimizar
gato.PNG – 315KBytes
imagem gato otimizada
gato.JPG – 76KBytes

O formato .PNG gastou 315KBytes, ou seja, mais de 12 vezes menor que a foto no tamanho original. Já o formato JPEG gastou apenas 76KBytes, ou seja 50 vezes menos que a foto original!!!!

Acho que nem precisamos de mais argumentos, ficou claro que você deve usar o formato JPG nesse caso, não?

Agora vamos para nosso segundo teste. Vamos comprimir um logotipo.

Logo de início, se você precisar de áreas transparentes na sua imagem, obrigatoriamente deverá utilizar o formato PNG, pois o JPEG não suporta transparências. Mas vamos supor que utilizará seu logotipo em um site com fundo branco (ou outra cor simples), então poderia talvez utilizar o formato .JPG

Salvamos abaixo o mesmo logotipo nesses dois diferentes formatos. Veja os resultados:

imagem gocache sem otimizar
logo_gocache.JPG – 27KBytes
imagem gocache otimizada
logo_gocache.PNG – 19KBytes

Escolhemos um alto grau de compressão para o arquivo JPG, pra ver se ele conseguiria competir com o PNG. Isto não resolveu o problema de tamanho, pois o JPG continuou maior, e ainda piorou a qualidade da imagem (veja que está um pouco quadriculada e embaçada).

Já o PNG é um algoritmo LossLess, ou seja, sem perdas de qualidade da imagem e, mesmo assim, conseguiu comprimir muito mais que o JPG. Além disso, de brinde, pudemos utilizar o fundo transparente para nosso logotipo.

Mas vamos confessar, algumas vezes ainda não será claro qual formato utilizar, então se você tiver tempo tente os dois formatos, faça a recompressão como mostraremos na próxima seção, e escolha o que ficar melhor.

Veja, por exemplo, a imagem que chamamos de “panda” e que foi utilizada na próxima seção, inicialmente ficou menor usando .JPG, mas quando recomprimimos, a versão em .PNG foi a que venceu.

processo de otimizacao

3) Recompressão das Imagens:

Nos testes feitos acima, utilizamos o programa Photoshop para gravar as imagens nos formatos .JPG e .PNG, utilizando o algoritmo padrão de compressão, existente neste software.

No entanto, existem softwares específicos para comprimir imagens para a internet. Eles e conseguem recomprimir consideralvemente as imagems, pois utilizam algoritmos específicos e também removem qualquer informação desnecessária que esteja nos arquivos.

Veja os resultados que conseguimos com nossas imagens anteriores, utilizando o site http://tinypng.com

processo de compressao

Conseguimos reduzir ainda em 30% a nossa já super comprimida foto do gatinho laranja (JPG). E reduzimos em quase 3 vezes, ou seja, 300%, a imagem do logotipo da GoCache (PNG).

Como havíamos comentado, sempre que estiver em dúvida sobre usar PNG ou JPG, faça o teste com os dois. Sobre essa imagem acima, com o Panda, esperávamos que teríamos o melhor resultado utilizando o formato JPG. Isto até foi verdade quando salvamos no Photoshop, mas quando recomprimimos no TinyPNG, olhem só a surpresa: o PNG ficou muuuito menor.

png ou jpg

 

4) Evite carregar imagens que não serão exibidas:

Muitas vezes nossas página tem bastante conteúdo e, por isso, algumas imagens só são exibidas quando rolamos a página para baixo.

No entanto, mesmo que sejam raramente exibidas, as imagens que estão mais “pra baixo” no texto geralmente serão desnecessariamente carregadas. Isto deixa sua página lenta e gasta banda do seu servidor.

No entanto, pra evitar isso, existe uma técnica chamada Lazy Load, que só carrega as imagens quando eles forem realmente ser exibidas para seus visitantes.

Existem vários scripts na internet para fazer o Lazy Load de imagens. Dê uma procurada no Google por “Lazy Load” para saber mais!

 

5) Configurar a Cache das Imagens

Existe um recurso onde você consegue pedir para o navegador de seu visitante guardar as imagens de seu site em disco (cache). Desta forma, quando seu cliente voltar a visitar seu site, o navegador não precisará de baixar novamente as imagens, pois elas já foram armazenadas na última visita. Isso acelera muito o carregamento de um site.

Se o servidor web do seu site utilizar Apache, é bem simples configurar isto, bastando colocar as linhas abaixo no arquivo .htaccess, que fica na raiz da pasta onde estão seus arquivos de internet:

<filesMatch "\.(gif|jpg|jpeg|png)$">
ExpiresDefault A604800
Header append Cache-Control "public"
</filesMatch>

6) Utilizar uma CDN

Por fim, um recurso que tem sido muito utilizado para otimizar sites, acelerando o carregamento das imagens, são as chamadas CDNs, ou Content Delivery Network.

Resumidamente, uma CDN é uma rede de computadores, espalhados pelo mundo, que armazenam o conteúdo do seu site (incluindo imagens) e, quando um visitante tentar entrar em seu site, será atendido por um computador mais próximo e mais rápido. Clique na imagem abaixo para entender melhor:

o que é cdn?

Além disso, as CDNs já configuram automaticamente recursos como Cache e Compressão de Imagem, para facilitar sua vida e otimizar seu site.

Veja esse artigo para saber em detalhes os benefícios que o uso de uma CDN trazem ao seu site.

 

Em breve a segunda parte desta série, otimização de scripts!

, ,

Como otimizar WordPress/WooCommerce e ainda reduzir custos

Otimizar WordPress/WooCommerce, quem não quer?

 

Este post ilustra um caso cada vez mais comum, de clientes em busca de otimizar o WordPress/WooCommerce que acabam chegando à GoCache.

Ao invés de um post explicativo, resolvemos ilustrar com um case recente.

logo comprerural.com

O case é do cliente comprerural.com. O CompreRural.com é um portal de conteúdo do agronegócio brasileiro e canal de anúncios, que foca no conteúdo técnico do cotidiano do homem do campo brasileiro. Seu conteúdo discute diariamente a pecuária e a agricultura.

 

Situação

 

O administrador do site chegou à GoCache através da nossa participação na comunidade iMasters. Utilizava a maior CDN do planeta e, apesar de não estar infeliz com o serviço, precisava de ajuda com sua infraestrutura de hospedagem.

Fez uma inscrição em nosso trial gratuito (que não necessita de cartão de crédito), entrou em contato conosco via Skype e explicou a situação:

 

overloaded

 

Os servidores de hospedagem não estavam suportando a carga. Veja o que a monitoração do site mostrava:

picos de consumo de infra

 

Consequências

 

O site estava levando em média 11,5 segundos para carregar (às vezes até mais de 20 segundos!) graças à infraestrutura sobrecarregada.

Além disso, o administrador do comprerural.com não se sentia seguro para investir em publicidade, pois nos poucos experimentos que fez houve queda do site durante o aumento repentino no volume de acessos, desperdiçando o potencial retorno do investimento.

 

Solução

 

1- Fizemos a configuração do acesso à GoCache via CNAME, pois este cliente em particular possui muitas personalizações em sua zona DNS e preferiu não apontar o DNS para cá.

2- Instalamos o plugin GoCache para WordPress. Este plugin permite que toda e qualquer atualização no site, ou comentário nos posts, seja imediatamente publicada sem a necessidade por aguardar a expiração do cache, ou de acessar o painel de controles para limpá-lo manualmente. O uso do plugin permitiu configurar o tempo de expiração do cache em 7 dias, aumentando assim a taxa de efetividade do cache, o cache hit ratio.

3- Em seguida habilitamos o SmartCache para WordPress, que configura automaticamente o cacheamento dinâmico de todo o site em WordPress ou WooCommerce, já excluindo o wp-admin.

 

Resultado

 

A combinação de cacheamento de conteúdo dinâmico + expiração de cache em 7 dias trouxe o resultados abaixo:

tempo de carga com CDN

 

O tempo de carga do site passou para uma média de 3 segundos, uma melhora de desempenho superior a 77%. Mas o mais importante, os servidores de hospedagem pararam de apresentar sobrecarga e passaram a suportar tranquilamente as ações de marketing.

 

Além disso, o comprerural.com passou a utilizar nosso SSL gratuito, melhorando a segurança para os usuários do site e também seu posicionamento em SEO. O uso do SSL ajuda em duas frentes, melhor desempenho e melhor segurança, ambos fatores importantes para o bom posicionamento de um site nas páginas de busca.

 

Dois meses após a contratação da GoCache, recebemos este feedback do administrador do comprerural.com:

depoimento skype

 

Esta é, sem dúvida, a nossa maior recompensa. A tranquilidade dos nossos clientes é um dos principais motivos para continuarmos evoluindo nossos produtos e serviços.

Obrigado comprerural.com! Esperamos que o site tenha muito sucesso e nos sentimos honrados em poder participar da sua jornada!

E você, leitor, se identificou? Já viu ou vivenciou situações parecidas?

A missão da GoCache é tornar seu site sempre acessível, de qualquer lugar, a qualquer momento, em qualquer dispositivo.

Faça um teste sem compromisso – clique aqui para iniciar seu trial de 7 dias.