Categorias

PageSpeed Optimization: Obtenha Imagens de Carregamento Mais Rápido Parte 1 - WebP

A velocidade da página é um componente crucial para um website. Você pode aumentar a velocidade do seu site fazendo uma variedade de modificações na otimização da velocidade da página. Uma delas é a otimização de imagem.

O Google confirmou que a velocidade da página é um fator de classificação e a velocidade de um site pode afetar a classificação. A SIA testou esta declaração para verificar e confirmar o que o Google considera exatamente quando se trata da velocidade da página - é tempo de carregamento da página, tempo para o primeiro byte, ou a primeira tinta de contenção? Descobrimos que enquanto o tempo de carregamento da página ou o tempo que leva para uma página carregar totalmente não é um fator de classificação, o tempo para o primeiro byte pode ser. E a partir disto, é melhor manter sua TTFB pequeno.

Além de ser um fator de ranking, a velocidade da página é também um fator de experiência do usuário. Os usuários que visitam um site que carrega lentidão, na maioria das vezes, deixam a página. Isto pode levar a um aumento na taxa de retorno e afetar as taxas de conversão.

visitantes felizes do site

Como você pode ver, a velocidade da página é um fator importante de um site e otimizar a velocidade da página de seu site para que ele carregue rapidamente satisfaça não apenas o Google, mas também os visitantes de sua página. Há muitos ajustes de otimização de velocidade de página que você pode fazer para melhorar a velocidade do seu site. Um deles é a otimização de suas imagens.

As imagens são muitas vezes o maior arquivo de uma página da web e é freqüentemente um dos principais fatores que diminuem a velocidade de um site. Otimizar suas imagens para que o tamanho do arquivo não seja muito grande, ao mesmo tempo em que fornece imagens de qualidade, é um fator importante a ser considerado.

Em um de nossos testes na SIA, testamos se o Google tem preferência por imagens JPG ou PNG e descobrimos que, embora não haja preferência particular entre os dois, a velocidade da página se resume à velocidade da página. Nos testes, Clint discutiu suas idéias sobre formatos de imagem e velocidade de página, e introduziu dois tipos de arquivos de imagem da próxima geração que carregam mais rapidamente em comparação com JPG e PNG. Estes são WebP e AVIF.

Embora estes dois tipos não sejam exatamente novos, eles não são tão populares como JPG e PNG e são freqüentemente negligenciados. Isto me fez pensar em escrever sobre estes dois tipos de imagem, para discutir melhor os dois formatos - quais são estes tipos de arquivo de imagem, seus benefícios e desvantagens, e como você poderia aplicá-los em suas páginas.

Na parte 1 deste artigo, estaremos nos concentrando no WebP. O que é WebP? Você deve mudar suas imagens para WebP? Em caso afirmativo, como você o aplica ao seu site?

O que é WebP?

o que é webp

O WebP não é na verdade um novo formato de imagem. Foi desenvolvido pelo Google em 2010 e foi projetado para usar um algoritmo de compressão mais otimizado em comparação com os outros formatos de imagem mais comuns.

O WebP é um formato de imagem que proporciona uma compressão superior de imagens sem perdas e com perdas. Quando comparado ao JPG, GIF e PNG, o WebP reduz significativamente o tamanho dos arquivos, mantendo a qualidade da imagem.

Anteriormente, era uma decisão entre o tamanho do arquivo e a qualidade da imagem. A introdução da WebP resolveu isso com seu tamanho de arquivo inferior e imagens de alta qualidade.

Você pode converter quase todos os formatos de imagem em WebP e verá quase a mesma qualidade da imagem do JPG original, PNG, ou outro formato. Entretanto, o tamanho do arquivo é muito menor - entre 20-40 por cento menor.

A WebP não era anteriormente suportada pelo Internet Explorer e Safari, mas a partir da escrita (setembro de 2021), mais de 94% de navegadores Web suportam WebP. Muitos sites hoje usam WebP para suas imagens devido a sua velocidade de carregamento mais rápida. Você não seria capaz de reconhecer nenhuma diferença no tipo de arquivo.

As miniaturas do Youtube visualizadas no Chrome estão no WebP e o Facebook também usa o formato nos dispositivos Android.

navegadores moomba

Outro benefício da WebP, além de sua compressão superior, é que ela suporta fundos transparentes semelhantes aos da PNG. Ele também suporta transições e animações, muito parecidas com as do GIF, embora ainda seja menor em tamanho e de qualidade similar.

Como aplicar o WebP ao seu site

fazer mudanças no site moomba

Convencido dos benefícios oferecidos pela WebP e procurando atualizar suas imagens para este formato? Quer saber como aplicá-lo em seu site?

Existem ferramentas e plugins que você poderia usar para converter seu JPG, PNG, ou outras imagens para WebP.

Para ferramentas on-line, você pode usar Squoosh e Online-convert.com. Tudo que você tem que fazer é carregar suas imagens JPG ou PNG e depois encobri-las no WebP.

Anteriormente, o Photoshop não suportava WebP. Entretanto, foi disponibilizado um plugin do WebP Photoshop que você pode instalar e que lhe permite salvar suas imagens no formato.

Se você está no WordPress, começando com WordPress 5.8, WebP é suportado e você pode carregar suas imagens diretamente para sua biblioteca de mídia, como faria com imagens JPG, PNG e GIF. Não há necessidade de instalar plugins de terceiros para que o formato da imagem funcione.

Se você não estiver no WordPress 5.8+ ou se estiver preocupado em não servir imagens WebP para visitantes usando navegadores não suportados, então sua melhor opção seria ir para um plugin.

Com um plugin, suas imagens JPG ou PNG são convertidas para WebP quando o visitante usa um navegador suportado. Se o navegador do visitante não suporta WebP, então a imagem JPG ou PNG é servida. Desta forma, você tem a garantia de que todos podem ver suas imagens e aqueles que estão em navegadores suportados podem ver suas páginas rapidamente!

Os plugins que você pode usar para este fim são ShortPixel, Imagify, e Optimole, entre outros.

Se você está procurando acelerar a velocidade de seu site, o WebP é definitivamente uma ótima opção a ser seguida. Seus visitantes são servidos com a mesma experiência ao usar uma imagem JPG ou PNG, ao mesmo tempo em que fazem tudo carregar mais rápido. Na verdade, PageSpeed Insights recomenda servir suas imagens no WebP, para ajudar a agilizar seu site.

É um fator de classificação, você pergunta? Isso é algo que não testamos na SIA, mas que iremos acrescentar à nossa lista de coisas a serem testadas.

No entanto, fator de classificação ou não, proporciona a você o benefício de ter páginas de carregamento mais rápido que podem ajudar a fazer tanto o Google quanto seus visitantes felizes. Ganhe-ganhe!

Na segunda parte deste artigo, falaremos sobre o formato de imagem AVIF, que é mais rápido do que o WebP. Você deveria ir para AVIF ou o WebP é suficiente? Discutiremos tudo isso em parte 2 do artigo.

Marie Aquino

EQUIPE SIA SEOESCRITOR

Marie's biografia completa aqui.