WebP no WordPress com Cloudflare Grátis

Neste post vou ensinar como usar imagens WebP no WordPress em uma conta Cloudflare Grátis.

A cada dia as pessoas estão utilizando mais celulares ao invés do desktop, veja no exemplo abaixo, então otimizar os sites e blogs estão super em alta e quem não busca se atualizar acaba desaparecendo, não só falando em questões de SEO, mas as pessoas estão cada vez mais buscando sites rápidos e funcionais a tal UX (User eXperience).

Mobile vs Desktop | Configurar WebP no WordPress com Cloudflare Grátis

Além de uma Hospedagem Cloud escalável, de qualidade, e com um bom uptime (alta disponibilidade) recomendo e uso a Cloudways, um CDN (Content Delivery Network) que hoje também é indispensável para entregar o conteúdo rápido próximo a localidade do visitante, neste caso a Cloudflare que oferece um excelente produto mesmo no plano gratuito.

Esse post é valido exclusivamente para o plano Free, pois o plano Pro, custando $20 você pode utilizar a funcionalidade Polish que irá otimizar as imagens, convertendo e servindo imagens WebP para navegadores suportados, sem a necessidade de nenhum plugin.

Não vou entrar em detalhes sobre as definições de imagens WebP, pois se você chegou até aqui acredito que já saiba necessário e sabe o quanto elas são fantásticas em qualidade de compactação e tamanho.

Utilizando as configurações abaixo caso o navegador não suporte esse formato de imagem, será exibido imagens nos formatos padrões (JPG e PNG).

Sem mais delongas, vamos ao que interessa… Primeiramente faça uma backup, em seguida instale e ative o Plugin WebP Express.

Nas configurações do Plugin (Configurações > WebP Express)

Em Operation mode e General, selecione as opções abaixo:

Em Conversion

Em Alter HTML

Cliquem “Save settings and force new .htaccess rules”

Essas configurações geralmente funcionarão tranquilamente com a Cloudflare, caso as imagens não estejam carregando em WebP crie uma regra da seguinte forma, trocando o exemplo pelo seu domínio:

É isso! Caso não funcione altere a opção Operation mode para “Varied image responses”, se memso assim não funcionar, as principais causas de erros estão na FAQ do plugin.