Como servir formatos de última geração no WordPress: tudo o que você deve saber

Publicados: 2021-10-13

Se você executou uma auditoria de desempenho no Google PageSpeed ​​Insights, pode ter visto a oportunidade de “servir imagens em formatos de última geração”.

O conteúdo é rei, mas o formato que você usará para entregá-lo em seu site WordPress também importa. Os formatos de próxima geração (abreviação de próxima geração) são uma maneira de acelerar o tempo de carregamento de imagens em sites. Eles podem ser carregados em navegadores modernos com informações de compactação incorporadas, para que os visitantes não precisem esperar para sempre.

Este artigo abordará os formatos de última geração disponíveis e como veicular imagens nesses formatos específicos no WordPress para tornar seu site mais rápido e melhorar sua pontuação de desempenho do Lighthouse.

O que são formatos de última geração e por que você deve usá-los

As imagens de última geração oferecem compressão e qualidade superiores. Eles são perfeitos para uso na Web, pois ocupam menos dados, mantendo o mesmo alto nível de qualidade de imagem.

Existem dois formatos principais de próxima geração que você pode usar para suas imagens no WordPress, a saber:

  • WebP (desenvolvido pelo Google) é um formato de imagem que utiliza formatos de compressão com e sem perdas. Você obtém uma imagem de alta qualidade com um tamanho de arquivo pequeno! O WebP é definitivamente um excelente substituto para imagens JPEG, PNG e GIF, pois a qualidade da imagem também é preservada:
Mesma qualidade percebida pelo visitante – Fonte: multiplemedia.com
  • AVIF (desenvolvido pela Alliance for Open Media) é um formato de arquivo de imagem que torna as imagens menores, mantendo a mesma qualidade de imagem. O AVIF tende a compactar os arquivos ainda mais do que o WebP, mas o AVIF está atrasado no suporte ao navegador como um formato de arquivo jovem. Como resultado, recomendamos que você use o formato WebP para seu site WordPress.

O Google PageSpeed ​​Insights também recomenda que você veicule imagens em formatos de última geração, como WebP e AVIF, em vez de PNG ou JPEG:

Servindo imagens em WebP ou AVIF para ajudar sua página a carregar mais rápido – Fonte: PSI

Quais são os benefícios de veicular imagens em um formato de última geração como o WebP?


As imagens WebP são cerca de 30% menores em tamanho em comparação com PNGs ou JPEGs. Conforme mostrado abaixo, o formato PNG faz um bom trabalho na otimização de imagens, mas é superado pelo WebP (o último).

Imagens com tamanho de arquivo menor no formato WebP – Fonte: Smashing Magazine

Tenha em mente que, para a maioria dos sites, as imagens são os principais culpados por desacelerar seu site. Imagens grandes não apenas tornam seu site mais lento, mas também aumentam o peso da página. Isso afetará seu desempenho em dispositivos móveis porque uma página pesada levará mais tempo para carregar em redes móveis.

Por fim, a velocidade do site é um fator importante levado em consideração pelo Google ao determinar os rankings. Se você não quiser aparecer na página 5, lembre-se de otimizar suas imagens usando um formato de última geração como o WebP.

Vamos ver como converter suas imagens para WebP no WordPress.

Como servir imagens em formatos de última geração no WordPress

A maneira mais fácil e rápida de converter imagens em formatos de última geração é usar um plugin do WordPress. No entanto, você também pode otimizar e converter suas imagens manualmente.

Vamos analisar as duas opções.

Opção 1 – Como converter imagens em formatos de última geração com um plug-in

Como sempre, usar um plugin do WordPress economiza um tempo precioso. Até o Google recomenda o uso de um plugin para converter suas imagens enviadas para WebP ou Avif.

PSI recomendando plugins do WordPress

Existem seis plugins principais que você pode usar para otimizar suas imagens e servi-las em formatos de última geração, a saber:

  1. Imagify – um plugin de conversão WebP gratuito para cerca de 200 imagens. O Imagify também redimensiona e compacta suas imagens para aumentar o desempenho (bônus: tutorial completo e teste de desempenho incluído em nosso artigo) .
  2. WebP express – adiciona uma linha de código simples para servir imagens WebP.
  3. EWWW – uma opção de conversão inteligente para obter o formato de imagem correto para o trabalho (JPG, PNG, GIF ou WebP).
  4. Shortpixel Image Optimizer – converte qualquer JPEG, PNG ou GIF para WebP e AVIF.
  5. Smush – converte para WebP e fornece imagens automaticamente no formato Next-Gen WebP (somente na versão pro).
  6. Conversor WebP para mídia – substitui arquivos nos formatos JPEG, PNG e GIF padrão pelo formato WebP.

Como converter imagens para WebP usando o Imagify

Vamos ver um exemplo de conversão WebP usando o plugin Imagify. Leva apenas três passos

Passo 1 – Baixe e instale o Imagify gratuitamente. Ative o plug-in e crie sua chave de API.

Passo 2 – Vá para Configurações> Imagify e role até a guia Otimização .
Selecione “ Criar versão WebP de imagens ” e “ Exibir imagens em formato WebP no site ” bem como a segunda opção “ Usar tags <picture> ”.

Passo 3 – Clique no azul Gerar versões ausentes do WebP botão.

Parabéns, agora você está servindo aos visitantes formatos de imagem WebP, como você pode ver na biblioteca do WordPress:

Biblioteca WordPress de imagens WebP

Nota importante: suas imagens WebP recém-geradas não serão exibidas na biblioteca do WordPress. Se você quiser verificar se a conversão foi bem-sucedida, abra a página da Web que mostra a imagem. Em seguida, vá para a guia Chrome Developer > Inspecionar elemento > Rede > filtrar por IMG e observe a coluna Tipo .

Agora você deve ver o formato “WebP” associado à imagem.

Meu site WordPress servindo imagens no formato WebP graças ao Imagify – Fonte: Chrome Dev Tools

Para saber mais conversões de formato de última geração, recomendamos seguir nosso guia detalhado sobre como veicular imagens ao WebP usando o Imagify.

Opção 2 – Como servir imagens em formatos de última geração sem um plug-in

Se você não quiser usar um plug-in para converter suas imagens para o formato de última geração, poderá adicionar manualmente um pedaço de código. Aqui estão duas opções diferentes que você pode seguir para o seu site WordPress.

1. Edite diretamente seu arquivo .htaccess do WordPress

Recomendamos que você siga esta opção apenas se estiver muito confortável para codificar e editar os arquivos do seu site. O arquivo .htaccess é um arquivo de site poderoso que controla a configuração de alto nível do seu site.

Coloque o seguinte código do GitHub em seu arquivo .htaccess para substituir imagens jpg/png/gif por imagens WebP:

 <IfModule mod_rewrite.c> RewriteEngine On # Check if browser supports WebP images RewriteCond %{HTTP_ACCEPT} image/webp # Check if WebP replacement image exists RewriteCond %{DOCUMENT_ROOT}/$1.webp -f # Serve WebP image instead RewriteRule (.+)\.(jpe?g|png|gif)$ $1.webp [T=image/webp,E=REQUEST_image] </IfModule> <IfModule mod_headers.c> # Vary: Accept for all the requests to jpeg, png and gif Header append Vary Accept env=REQUEST_image </IfModule> <IfModule mod_mime.c> AddType image/webp .webp </IfModule>

2. Use o elemento <picture> em seu HTML

Modificar o arquivo .htaccess pode ser complicado. Uma opção mais responsável é usar a tag <picture>. Nesse caso, o navegador escolherá automaticamente o formato de arquivo apropriado para exibição.

 <picture> <source type="image/webp"> <img src="/path/to/image.jpg" alt=""> </picture>

O impacto do WebP no desempenho

Como visto acima, você pode usar o plug-in Imagify para converter suas imagens do WordPress para WebP, o formato de última geração recomendado pelo Google. O Imagify também permite otimizar várias imagens redimensionando e compactando-as automaticamente (e em massa).

Seria interessante fazer alguns testes de desempenho para confirmar o que temos dito. Vou executar dois cenários:

Cenário 1 – Resultados de desempenho com imagens JPEG (sem Imagify)

  • 13 imagens veiculadas no formato JPEG
  • As imagens não são otimizadas

Cenário 2 – Resultados de desempenho com imagens WebP e modo de otimização agressivo (com Imagify)

  • 13 imagens convertidas e veiculadas no formato WebP
  • Imagens otimizadas

Ferramentas de desempenho usadas:

Google PageSpeed ​​Insights e WebPageTest

Meu site de teste:

Cenário 1: resultados de desempenho com imagens JPEG (sem Imagify)

Começamos a auditoria com todas as minhas imagens veiculadas em JPEG. Em média, seu tamanho é de 270 KB.

Imagens JPEG e seus respectivos tamanhos – Fonte: Chrome Dev Tools

Agora vamos dar uma olhada no PSI. Estou obtendo uma pontuação laranja no celular (75/100) e a maior pontuação do Contentful Paint no vermelho. A pontuação LCP é relevante, especialmente porque o elemento LCP que afeta o desempenho é uma imagem (como geralmente é). Há espaço para melhorias.

Minha pontuação móvel (sem WebP – sem Imagify) – Fonte: PSI

Além disso, o PSI sinalizou três problemas relacionados a imagens:

  • Imagens de tamanho adequado (especialmente de dispositivos móveis)
  • Exiba imagens em formatos de última geração
  • Os elementos de imagem não têm largura e altura explícitas
KPIs Mobile Score – Imagens JPEG – No Imagify
Nota geral 75/100
Auditoria PSI
Maior pintura de conteúdo 4,9 segundos
Tamanho da página 1,2 MB
Solicitações HTTP 22
Tempo de carregamento 2.890 segundos

Cenário 2: Resultados de desempenho com imagens WebP e modo de otimização “Agressivo” (com Imagify)

Agora é hora de converter minhas 13 imagens JPEG para WebP e otimizá-las com o Imagify.

Para fazer isso, vamos para Configurações > Imagify> Imagify'em all

É isso. Minhas imagens agora são otimizadas e veiculadas no WebP. Notamos uma queda importante no tamanho do arquivo. Está confirmado, o WebP deixa suas imagens mais leves.

Imagens menores graças ao formato WebP e otimização Imagify

Agora podemos executar outra auditoria no Google PageSpeed ​​Insights para ver se meu desempenho melhorou com o Imagify. Os resultados são ótimos. Minha pontuação passou de 75/100 para 92/100 no celular!

Pontuação de PSI aprimorada em dispositivos móveis usando o Imagify
KPIs Pontuação móvel – imagens JPEG
( Sem imagem )		 Mobile Score – Imagens WebP e modo Agressivo (Com Imagify)
Nota geral 75/100 92/100
Auditoria PSI
Maior pintura de conteúdo 4,9 segundos 3,0 segundos
Tamanho da página
 1,2 MB 714 KB
Solicitações HTTP
 22 17
Tempo de carregamento
 2.890 segundos 1,059 s



Concluindo, o Imagify tornou nosso site mais rápido no celular: a página está mais leve, o número de solicitações HTTP caiu e até meu tempo de carregamento está muito melhor.

Por último, mas não menos importante, a Imagify também abordou três questões principais anteriormente sinalizadas pelo PSI:

Problema de imagem PSI resolvido graças ao Imagify

“Exibir imagens em formatos de última geração”, “Imagem com tamanho adequado” e “Codificar imagens com eficiência” agora são uma auditoria aprovada graças ao Imagify.

Empacotando

No geral, vimos que veicular imagens em formatos de última geração é um grande passo para a melhoria do desempenho. O formato WebP – juntamente com a otimização e o redimensionamento de imagens – é uma combinação vencedora para acelerar seu site WordPress.

Tamanho do arquivo usando JPEG Tamanho do arquivo usando WebP + imagens compactadas e redimensionadas (cerca de 80% de economia graças ao Imagify)

A conversão de JPEG ou PNG para um formato de última geração como WebP é muito fácil de fazer com um plugin como o Imagify . Além disso, o Imagify também comprimiu e redimensionou nossas imagens do WordPress, o que nos fez passar para uma pontuação verde no celular (92/100 no Google PageSpeed ​​Insights). É hora de otimizar suas imagens e servi-las no WebP.

Faça sua auditoria e experimente o Imagify gratuitamente hoje mesmo!