GoCache CDN
  • Produtos
    • CDN
      • Pontos de Presença
    • WAF – Web Application Firewall
    • Rate Limit
    • Lithio – Otimizador de Imagens
    • WPO – Web Performance Optimization
    • Certificado SSL
  • Soluções
    • E-Commerce
    • Portais de Conteúdo e Notícias
    • Educação / Edtech
    • Plataformas de E-Commerce
    • Startup
    • Outros
  • Planos
  • Ajuda
  • Contato
  • Login
  • CADASTRE-SE

Como usar webP no WordPress: Vantagens e como implementar

25 de setembro de 2020/0 Comentários/em WordPress /por GoCache

Usar o formato de imagens webP dentro do WordPress tem sido cada vez mais frequente, considerando os ganhos em performance que o formato tem trazido para diversas aplicações.

O webP é um formato de imagens desenvolvido pelo próprio Google, com o objetivo de diminuir o tamanho dos arquivos de uma aplicação e acelerar a entrega de imagens, principalmente em dispositivos móveis. Inclusive, quando avaliamos essa questão de velocidade no Brasil, entendemos que na grande maioria dos casos é essencial usar esse formato, considerando que a qualidade da conexão de banda larga e mobile muitas vezes deixa a desejar.

Um das grandes vantagens da implementação de webP no WordPress é a versatilidade do formato, já que é possível aplicar compressão, usar transparência (assim como PNG) e ainda ter suporte a animações (como em GIF).

Quais navegadores dão suporte nativo a webP?

Criado em 2010, o webP só começou a ficar popular em 2014, quando boa parte dos navegadores passou a dar suporte nativo para o formato. Atualmente, os navegadores que dão suporte nativo ao formato de webP são:

  • Google Chrome Desktop (versão 17+)
  • Google Chrome for Android (versão 25+)
  • Microsoft Edge (versão 18+)
  • Firefox (versão 65+)
  • Opera (versão 11.10+)
  • Browser nativo android (versão 4.0+)

Vale a pena usar webP no WordPress?

Na maioria dos casos é resposta é sim, mas é necessário levar em consideração alguns aspectos, como por exemplo, a falta de compatibilidade com navegadores Safari, frequentemente utilizados por usuários de IOS.

Por decisão da própria Apple, o navegador Safari ainda não fornece suporte nativo para o formato, sendo assim, é possível que determinadas imagens deixem de ser exibidas para usuários que utilizam esse browser.

Porém, se você utilizar um conversor de imagens em webP, é possível reunir os melhor dos dois mundos: entregar o formato webP para usuários elegíveis e para usuários de Safari, entregar imagens em formatos tradicionais, como PNG e JPG.

Por exemplo, o produto de otimização de imagens da GoCache, chamado Lithio, reconhece o navegador de cada usuários que acessa seu WordPress e decide qual o melhor formato de entrega. Isso tudo feito automaticamente e em fração de milissegundos.

Quais os ganhos em performance que o webP pode trazer para um site em WordPress?

Existem diversos estudos na internet sobre o assunto e em praticamente todos os cenários, os ganhos costumam ser bem expressivos.

O próprio Google fez um estudo em seu blog de developers em que cita reduções de 25 a 35% no tamanho de arquivos webP, quando comparados com formatos PNG e JPG.

Exemplo de otimização em webP + Compressão de imagens + Remoção de metadados com Lithio da GoCache

Já na GoCache, temos diversos casos em que nosso conversor para webP conseguiu reduzir mais de 50%. Estes ganhos vão depender muito do tamanho original da imagem e as opções de compressão.

Como implementar webP em WordPress?

No vídeo abaixo, mostramos como configurar o Lithio, nosso otimizador de imagens no WordPress (falamos sobre o assunto aos 8:20 minutos).


Por padrão, todos os sites que rodam dentro da rede da GoCache CDN podem usar nosso conversor para webP. Após a instalação de nossa ferramenta, basta acessar sua conta, clicar sobre “Configurações” e “Performance”.

Exemplo painel da GoCache – Configurações > Performance

Feito isso, você encontrará as opções de nosso otimizador de imagens, permitindo que você habilite a otimização para webP em sua instalação do WordPress.

Habilitar webP em seu WordPress

Conforme podemos ver na imagem acima, além de otimizar suas imagens para webP, também é possível selecionar outras opções de otimização de imagens que podem trazer ainda mais performance para sua aplicação, como JPEG progressivo e remoção de metadados. Além disso, é possível selecionar níveis de compressão de imagens, conforme vemos abaixo:

Níveis de compressão: Alto, médio e baixo.

Quanto maior o nível de compressão, maior a economia no tamanho do arquivo, o que consequentemente trará melhores ganhos em performance.

E caso você queira personalizar seus níveis de compressão, é possível fazer isso em Smart Rules:

Dentro do painel, selecione a opção Smart Rules

Agora, basta criar uma nova regra com critério de URL, preencher o caminho da imagem e selecionar as opções de otimização. Por exemplo, digamos que um determinado banner de seu site precise sempre ter a melhor resolução possível, enquanto o resto da aplicação pode ser comprimida. Neste caso, basta criar uma regra similar ao exemplo abaixo:

Personalizar que uma determinada URL tenha níveis diferentes de otimização

Caso você prefira, também é possível criar regras com *, que contemplam todo um patch de imagens, como por exemplo: /wp-content/uploads/* – Neste caso, tudo que estiver após /uploads/ será otimizado segundo sua personalização de regra.

Como posso validar que minhas imagens estão sendo entregues em webP?

Dentro de seu painel da GoCache, basta selecionar a aba “Analytics” e clicar sobre a opção “Otimização de Imagens”.

Dentro do painel, clique sobre Analytics e Otimização de imagens

Agora, você pode analisar algumas métricas de performance sobre a otimização de imagens em sua aplicação, conforme vemos abaixo:

Analytics – Veja informações sobre otimização de imagens

Transferência reduzida:
Total de transferência reduzida com a utilização do Lithio e porcentagem da redução ao Tráfego Original.

Tráfego Original
Total da transferência de dados se não tivesse a otimização de imagens.

Imagens Otimizadas
Total de requisições em que as imagens foram otimizadas com sucesso.


Além disso, também é possível analisar a otimização de imagens diretamente em sua aplicação. Por exemplo, se você estiver usando o Chrome ou Firefox, basta segurar CTRL + SHIFT + I. Agora, selecione a guia “Network” e “Img”.

Selecione “Network” e “img”.

Feito isso, selecione a imagem que você quer analisar, e inspecione o seu Response Header, conforme vemos abaixo:

Analise o Response Header de sua imagem

Request URL: 
No exemplo acima, é possível ver que a imagem tem uma extensão .PNG

Content-Type: 
O content-type indica qual o conteúdo de resposta. Neste caso, vemos que ele está sinalizado como image/webp, o que indica que o arquivo fonte (em PNG) foi convertido para webP.

X-GoCache-Image: 
Este é um header enviado pela GoCache para sinalizar se imagem foi otimizada ou não.


Caso precise de mais informações sobre a otimização de imagens e conversão para webP, leia nossa documentação – https://docs.gocache.com.br/lithio/


Share this entry
  • Share on Facebook
  • Share on Twitter
  • Share on Google+
  • Share on Linkedin
  • Share on Tumblr
  • Share by Mail
https://www.gocache.com.br/wp-content/uploads/2020/09/otimizacao-lithio-webp.jpeg 390 580 GoCache https://www.gocache.com.br/wp-content/uploads/2016/11/logo_cor_menu-1-1.png GoCache2020-09-25 17:38:552020-11-23 17:01:29Como usar webP no WordPress: Vantagens e como implementar

Procurar

Últimas publicações

  • TikTok bate Facebook em tempo gasto por usuário 25 de janeiro de 2021
  • Como reduzir custos com S3? 13 dicas que podem ajudar 22 de janeiro de 2021
  • Os desafios da segurança em nuvem 22 de janeiro de 2021
  • 5 maneiras de melhorar suas métricas de Core Web Vitals 15 de janeiro de 2021
  • Por que a velocidade de um site é importante? Google Playbook 12 de janeiro de 2021
  • Web Scraping: O que é, e suas aplicações 7 de janeiro de 2021
  • Quais as verticais mais exploradas por bad bots? 5 de janeiro de 2021
  • Integração API com plataforma de e-commerce SaaS – Case Xtech Commerce 23 de dezembro de 2020
  • Histórico de Alterações – Novo recurso da GoCache 22 de dezembro de 2020
  • Como usar o ISPTools? 17 de dezembro de 2020

Produtos

  • Content Delivery Network
  • SSL
  • Web Performance Optimization
  • Web Application Firewall

Soluções por vertical

  • Portais de conteúdo e notícias
  • E-Commerce
  • Educação / Edtech
  • Plataformas de E-Commerce
  • Startup
  • Outros

Empresa

  • Central de Ajuda
  • Carreiras
  • Blog
  • Contato
  • Planos
  • Calculadora de Preços
  • Termos de Uso e Politica de Privacidade

Acompanhe nosso Blog!

  • TikTok bate Facebook em tempo gasto por usuário
  • Como reduzir custos com S3? 13 dicas que podem ajudar
  • Os desafios da segurança em nuvem
  • 5 maneiras de melhorar suas métricas de Core Web Vitals
  • Por que a velocidade de um site é importante? Google Playbook
© Copyright - GoCache - 2020
  • Linkedin
  • Facebook
  • Twitter
CDN Cache Headers: Aprenda a inspecionar WebPageTest: Aprenda como usar
Este site utiliza cookies para aprimorar sua navegação. Na GoCache o uso de cookies é feito apenas para reconhecer um visitante constante e melhorar a experiência no uso dos Serviços. Os cookies são pequenos arquivos de dados transferidos de um site da web para o disco do seu computador, e não armazenam dados pessoais. Se preferir, você pode apagar os cookies existentes em seu computador através do browser utilizado. Leia nossos termos de usoOkRecusar
Scroll to top