Otimizando imagens com a ferramenta PageSpeed Insights
Autor: Adriano Luz | Publicado: 2013-04-11T10:36:00-07:00

A criação de um site, blog, e-commerce entre outros modelos de negócio na internet, exige por parte dos seus proprietários, a criação de um layout único e original, contribuindo para o fortalecimento da sua marca e permitindo com que o usuário se identifique com ela e consiga diferenciá-la em meio aos milhares de sites existentes. Por isto um aspecto dos mais importantes é a utilização de imagens de qualidade no site, o que atrai e muito a atenção dos leitores na web.


Imagens nos Sites e Blogs
No caso dos blogs, a utilização de imagens em meio ao emaranhado de caracteres que compõe o texto, ajuda o usuário a compreender melhor o conteúdo que está sendo exposto (considerando que as imagens tenham relevância com o assunto e que estejam com uma boa qualidade de visualização).


Imagens no Ecommerce
No caso do e-commerce, onde o cliente precisa ver a foto do produto da forma mais nítida possível, para verificar cada detalhe de acabamento de um produto que ele pretenda comprar.
Porém, o uso de imagens com alta qualidade, acaba por interferir diretamente no tempo de carregamento de uma página web. A diferença de alguns poucos segundos que o navegador demore em imprimir um site na tela no computador do usuário é suficiente para que ele desista de acessá-lo e procure outra opção em meio a tantas existentes, que podem ser facilmente encontradas no mundo online.


Melhore os resultados de carregamento com a PageSpeed Insights
Felizmente existem ferramentas que ajudam o desenvolvedor, webdesigner, blogueiro e demais profissionais da WEB, a minimizar este tipo de situação. Uma delas é a PageSpeed Insights.
Esta ferramenta faz uma varredura completa por todo o código de um site, indicando todas as possíveis melhorias que podem ser realizadas, para diminuir o seu tempo de carregamento, inclusive as imagens.
A PageSpeed Insights, indica as imagens que podem ter o tamanho compactado e já oferece outras com o tamanho reduzido, para que você possa as substituir em seu site.
Exemplos práticos
É possível realizar o PageSpeed test através de extensões existentes para os navegadores Firefox e Google Chrome, bem como também é possível acessá-la de modo online
Para facilitar o entendimento da ferramenta, vejamos alguns exemplos práticos com o uso da PageSpeed Insights. Na realização dos testes vou utilizar como case os sites: Compre Direto da China, Tablet com Android e Relógio de LED, considerando que permitiram a exposição dos testes neste artigo.
Para iniciar uma verificação, basta inserir o URL do site no campo em branco e clicar em Analyze como mostra a imagem abaixo.

A nota para o tempo de carregamento do primeiro exemplo foi 83, em uma escala que vai de 0 a 100, um bom resultado considerando uma média 70 (sites com nota abaixo dessa média devem receber uma maior atenção).



Entre as opções de melhoria, a ferramenta já nos deu a opção de Otimizar imagens como mostra a figura abaixo. A partir daí é só clicar no link e conferir as imagens que devem ser trocadas e substituí-las em seu servidor.


Realizando o mesmo teste com o site tabletcomandroid.com, percebemos que a opção Otimizar de imagens teve uma prioridade baixa, como pode ser observado na imagem a seguir, diferente do caso anterior que teve prioridade média, o que não impede que a troca das imagens seja feita, pois cada centésimo que você ganhe, na redução do tempo de carregamento de página do seu site é importante.



Analisando mais a fundo, para perceber a eficácia da ferramenta PageSpeed Insgihts, realizamos a mesma verificação anterior, no site relogiodeled.com, e percebemos que os resultados são realmente relevantes. Uma imagem otimizada pela ferramenta teve redução de 82% em seu tamanho original sem perdas de qualidade.
Confira:


Conclusão     
Em meio a um número cada vez mais crescente de sites na internet, tratando de milhares de assuntos diferentes, fica cada vez mais difícil se destacar, por isso são os detalhes que vão fazer a diferença, na hora de um usuário acessar a sua página ou a do seu concorrente. 

Este é um guest post enviado por&nbsp;Waldeir Ferreira:
Atualmente Webdeigner e Analista de SEO.

Ele é Graduado em Publicidade e Propaganda e pós-graduando em Marketing Digital
Universidade Católica Dom Bosco e cursando Tecnologia em Sistemas Para Internet
no IFMS.