Otimize as imagens do seu WP como um profissional

Se você tem um blog WordPress que faça algum uso de imagens poderá acelerar bastante o carregamento das páginas usando as dicas deste post.


Quem leva seus blogs mais ou menos a sério, ou mesmo os encara como profissão, com certeza tem mais do que o simples desejo ou objetivo, mas sim tem a obsessão de ver seus blogs carregando o mais rapidamente possível, à velocidade da luz. O pretensa “necessidade” pode estar calcada nos mais diversos argumentos, como necessidade de agradar ao Googlebot, a experiência do usuário — mas na verdade o fator mais forte é mesmo o TOC.

Uma das maneiras mais eficientes de se agilizar um blog é tratando as imagens corretamente antes de enviá-las e incorporá-las nas páginas, só que a maioria nem mesmo redimensionar previamente as imagens para que ocupem menos espaço, logo fiquem menores e mais rápidas, não o fazem.

Já que não fazem antes, estes senhores e senhoras blogueiros desleixados (entre os quais incluo-me) podem contar com algumas ferramentas para tratar as imagens após elas terem sido enviadas para o servidor.

Especificamente vou falar do plugin EWWW Image Optimizer, que conta com recursos diferenciados com relação aos seus “concorrentes”, dos quais destaco:

  • Os componentes binários são instalados juntamente com os arquivos do plugin, de modo que não se torna necessário compilar componentes como o LittleUtils, que até para o administrador do servidor é difícil de configurar — para um usuário final é simplesmente impossível haja vista as permissões de usuário necessárias.
  • Além de otimizar os uploads (e as “miniaturas” nativas do WordPress) o plugin pode também otimizar outros recursos gráficos do tema, como imagens de fundo, ícones, etc.
  • É possível gerar versões em formado Webp (pronuncia-se “uépi”) de qualquer imagem. O Webp é um formato de compressão sem ou com perdas (a exemplo do JPEG) de autoria da Google, capaz de reduzir drasticamente o tamanho de uma imagem sem que um visitante seja capaz de identificar degradação na qualidade da imagem. “Com perdas,” neste caso, significa que a informação compactada não pode ser descompactada de forma a recriar o arquivo original.
  • O plugin opera automaticamente em todas as imagens enviadas para o blog, mas também é capaz de atuar em imagens enviadas anteriormente, reduzindo o uso de disco e principalmente acelerando a carga das páginas já existentes, sem com isso atolar nenhum servidor.

Como disse antes, basta instalar o plugin (a partir do repositório oficial, a partir do próprio painel do WordPress) e ativar para que ele praticamente se configure sozinho. Ficam faltando uns dois ou três detalhes para que ele tenha seu ótimo desempenho, e vou ensinar abaixo.

Uma vez ativado, a página de opções contará com quatro abas: Configurações Cloud, cuja existência você deve ignorar totalmente; Configurações Básicas, que precisará de apenas um ajuste; Configurações Avançadas; e Configurações de Conversão.

Minhas configurações ficaram, respectivamente, assim:

ewww-basicas

ewww-avancadas

ewww-conversao

Basicamente é isto: configuras, salvar e ser feliz. Não, claro, falta otimizar os uploads antigos, o que você deve fazer simplesmente clicando no menu Mídia, opção Otimização em Massa.

Tirando vantagem do WebP

Muita gente ignora a existência do WebP porque, além de ser um formato a mais de imagem com que se lidar no site, ele não é suportado a não ser por algumas versões recentes do Opera e pelo Google Chrome. Internet Explorer não tem nem previsão de um dia quem sabe talvez pode ser que suporte; os produtos da Mozilla diziam que iam suportar WebP, depois não, e agora não se sabe direito, mas é melhor não contar com isso; Safari tampouco tem suporte a WebP; e segundo me consta só o Chrome para Android, o Android Browser e Opera Mini o reconhecem (parece que nada feito para os usuários de iOS).

Entretanto, esta não é uma fatia pequena dos navegadores. Internamente o Google usa para efeito de cálculo da eficiência das páginas um mecanismo baseado no Chrome, e o ecossistema Android cresce assustadoramente, bem como cada vez maior e a penetração de conexões móveis de baixa qualidade. Para mim, motivos suficientes para se utilizar um formato de imagens capaz de entregar a mesma informação visual numa fração do tempo original.

Se o seu servidor for Apache (o de muita gente é) não precisa fazer nada a não ser clicar no botão Inserir Regras de Gravação, e automaticamente todas as imagens que forem requisitadas serão servidas ao visitante no formato WebP, caso o navegador suporte; não há necessidade de modificar o conteúdo de nenhuma página no site inteiro.

A título de ilustração, as regras do EWWW Optimizer para reescrita de imagens em WebP são as seguintes:

Já se estivermos falando do Nginx, o plugin não oferece uma solução pronta, mas eu posso fazer uma sugestão: é o mesmo código que está ativo neste blog:

Experimente o código acima em seu ambiente, e certifique-se de que as imagens não “somem” no navegador dos visitantes — principalmente se você usar o Varnish na frente do Apache. Não é porque o código acima funciona perfeitamente para mim que vai funcionar para todo mundo, até mesmo em função das inúmeras diferenças entre os diversos ambientes.

Compartilhe

Avalie este conteúdo!

Avaliação média: 4.9
Total de Votos: 10
Otimize as imagens do seu WP como um profissional

Janio Sarmento
Administrador de sistemas, humanista, progressista, apreciador de computadores e bugigangas eletrônicas, acredita que os blogs nunca morrerão, por mais que as redes sociais pareçam cada vez mais sedutoras para as grandes massas.

Comente!

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.