Campo de busca

Categoria Front-End

Boas práticas para otimização de conteúdo

Boas práticas para otimização de conteúdo

Por | 30 de agosto, 2016 | 0 comentários

Uma parte muito importante da experiência do usuário é o tempo de carregamento da página. Mas além de todo o trabalho feito no código para diminuir ao máximo esse tempo, é de muita importância que o conteúdo seja otimizado também, isto é, sem imagens e arquivos pesados. Vamos passar aqui por alguns itens que costumam ser um problema e explicaremos corrigí-los.

Imagens

As imagens são partes cruciais de um site mas muitas vezes não nos atentamos aos detalhes de suas propriedades. São três pontos muito importantes que devem ser levados em conta quando se trabalha com imagem para web, que são:

  • Dimensão
  • Peso
  • Método de cores

Dimensão

Todo conteúdo tem uma razão e isso se torna ainda mais evidente se tratando de imagens, porque ela pode acabar sendo relativamente bem mais pesada que um bloco de texto.

Tendo em mente o motivo da imagem estar ali, podemos ajustar melhor o tamanho à sua finalidade, como por exemplo, uma miniatura de produto não precisa ter mais de 200 pixels de largura na maior parte dos projetos.

Logicamente, uma imagem gigante de 1200 pixels que mostre todos os mínimos detalhes do seu produto vai ser absurdamente mais pesada que uma miniatura, então podemos otimizar o carregamento da página servindo imagens do tamanho necessário apenas para cumprir sua função na página.

Como redimensionar sua imagem

Atualmente qualquer software de manipulação de imagem pode fazer de forma simples esse redimensionamento. Os dois programas mais conhecidos para se trabalhar com imagens são: Photoshop e GIMP (Gratuito). Mas caso ache que para sua necessidade não vale a pena instalar um software específico, você pode usar algumas soluções online. Um ótimo exemplo de solução assim é o Bulk Resize Photos (http://bulkresizephotos.com), experimente a ferramenta e comece já a usar imagens mais otimizadas no seu site.

Peso

Usar imagens no tamanho adequado para cada função já é um ótimo passo para otimização, mas por que parar por aí se podemos melhorar ainda mais? Aqui temos alguns pontos bastante críticos como densidade, meta dados e compressão. Vamos abordar cada um desses pontos com mais detalhes.

Densidade

Algumas imagens, principalmente as de qualidade profissional, costumam ter uma densidade de pontos (dts/inch) bem alta como 300 dpi, enquanto para web costumamos trabalhar com um padrão de 72 dpi.

Novamente o uso de um software de manipulação de imagem se faz necessário nesses casos. Mas também temos ferramentas online para esse tipo de otimização: http://convert.town/image-dpi

Meta dados

As imagens costumam ser recheadas de meta dados de localização, informação criação e diversos outros atributos totalmente irrelevantes para o uso que faremos delas. Ou seja, por padrão teremos imagens mais pesadas sem nenhum motivo e por isso é importante comprimí-las para remover tudo que não é interessante para o nosso uso e é para isso usamos a compressão de imagens.

Compressão

A compressão, juntamente com a redução de densidade são os pontos principais para otimização de imagens para web. Fazer esse processo pode reduzir o tamanho da sua imagem em até 90% em alguns casos.

Os programas mencionados acima têm a função de exportar para web que já vai fazer essa otimização para você, porém, no quesito compressão eu tenho preferência por serviços web como http://compressor.io, https://tinypng.com, https://kraken.io/web-interface.

Método de cores

Esse é um ponto que muitas vezes acaba passando batido por muita gente, mas é o que tem maiores chances de estragar a experiência do usuário. Os dois padrões mais usados para imagens são RGB e CMYK. Sendo RGB para uso de web e CMYK para impressos.

Esse ponto se torna crítico quando certos browsers renderizam as cores CMYK de forma errada, transformando assim, um azul claro e tranquilo em tons berrantes de ciano. Novamente, além dos manipuladores, temos soluções online de conversão de cores como: http://www.cmyk2rgb.com.

 

Arquivos pesados

Outro problema recorrente é a distribuição de arquivos muito pesados, o que costuma acontecer na maioria das vezes com pdfs mas pode acontecer com qualquer tipo de arquivo. O problema do pdf é que na maioria das vezes eles são feitos para impressão e por isso estão costumam estar em CMYK e com uma densidade muito grande (300 dpi por exemplo).

Otimizando PDF

Podemos resolver esse problema da mesma forma que resolvemos o problema das imagens, com compressão. Um ótimo serviço para isso é o I Love PDF (http://www.ilovepdf.com/compress_pdf).

Otimizando arquivos gerais

Caso o arquivo em questão não seja um pdf ou até mesmo caso a compressão dele não tenha sido satisfatória, vale muito a pena colocar esse arquivo em serviços de terceiros (sempre lembrando de manter um backup de tudo fora do servidor). Algumas opções para esse tipo de “hospedagem remota” são: Dropbox, Google Drive, One Drive, Mega.

Considerações finais

Já é mais do que certo que um dos grandes vilões da web mobile são as imagens, que acabam sendo pensadas apenas para desktop, onde geralmente a conexão é fixa e acabam esquecendo de quem acessa pelo celular usando 3G, por exemplo.

Fazendo essas otimizações, tenho certeza que o tamanho seu site vai diminuir bastante, melhorando a experiência de seus usuários e facilitando também o backup mais para frente.

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[0] Comentários  

Nenhum comentário em "Boas práticas para otimização de conteúdo". Seja o primeiro a comentar!