Performance WordPress

Como otimizar imagens no seu site WordPress e melhorar a performance

Como otimizar imagens no seu site WordPress e melhorar a performance

Há muitos dados que simplesmente não temos tempo para ler tudo e o ideal é maximizar o rendimento.

Quanto mais você expressar com palavras menores, melhor você estará no seu trabalho. Portanto, abaixo explicamos o porquê das imagens serem tão importantes nos sites e a grande importância da sua otimização!

1. Por que imagens são tão importantes?

Existem muitas razões pelas quais você usaria (e deveria) utilizar as imagens em seus posts e artigos:

  • As imagens servem como estímulos visuais para um call-to-action (CTA). Um CTA pode ser qualquer tarefa que você deseja que seu visitante realize. As CTAs comuns incluem compartilhar seu artigo nas mídias sociais ou comprar seu produto.
  • As imagens aumentam a conexão que o escritor procura estabelecer com o leitor.
  • As imagens transmitem mais através de menos.

É, portanto, muito importante usarmos as imagens certas em nossas apresentações (postagem em blog, relatório informal, apresentações em PowerPoint etc.) para deixar sua marca na mente do leitor.

Mas, para isso as imagens precisam ser otimizadas, pois ocupam cerca de 63% da largura de banda usada pelos sites. As pessoas têm pouco tempo de atenção, então, mesmo se você usar as imagens certas, se elas não forem carregadas dentro do prazo aceitável, o interesse será perdido. Além disso, a maioria dos sites tem um problema como a má otimização, formato incorreto, imagens sem resposta e erros de SEO descuidados.

2. Grandes Dimensões

Suponha que você precise de uma foto de 150×150 pixels na página “Equipe” de seu site. Normalmente, você usa um headshot de 5MP, edita um pouco e finalmente faz o upload.

Você identificou o problema? Algumas pessoas carregam diretamente a imagem real de 5MP! O tema WordPress carregará toda a imagem de 5MP e solicitará que o navegador a reduza para a dimensão necessária de 150x150px. Em essência, o navegador exibe apenas 0,0045% da imagem original.

Você acaba desperdiçando tanto a sua largura de banda quanto de seus visitantes, consumindo mais espaço no disco rígido e aumentando o tempo de carregamento. Nada disso é algo que você deseja em um site.

Portanto, é sempre necessário redimensionar (ou seja, diminuir o tamanho) a imagem para as dimensões necessárias.

3. Formato incorreto de imagem

O formato usado para a imagem é um papel vital. Como regra geral, use PNG para gráficos vetoriais e imagens geradas por computador e use JPEG para fotografias ou imagens com uma variedade de cores.

4. Não usando JPEGs progressivos

Para o homem comum, os JPEGs são de dois tipos: Linha de base e Progressivo. Visualmente, ambos são iguais. A diferença está na maneira como eles são carregados.

  • O JPEG de linha de base possui apenas uma camada – contendo toda a imagem. Quando solicitado, a imagem inteira é carregada de uma só vez.
  • Os JPEGs progressivos compõem a imagem com várias camadas e é carregada camada por camada, que aumenta gradualmente a qualidade, proporcionando uma visão melhor.

5. Não usando Lazy Load

Lazy-Loading é uma excelente técnica de economia de recursos, onde uma imagem é carregada somente quando o visitante rola até o quadro de visualização da imagem.

Com Lazy Loading ativado as imagens serão carregadas apenas quando um visitante estiver nas proximidades da imagem. Em outros termos, as imagens começam a carregar apenas quando você rola para baixo para visualizá-lo.

As primeiras imagens, no entanto, são carregadas instantaneamente, pois você já está no quadro de visualização. O Lazy Load economiza largura de banda em ambas as extremidades e melhora o tempo de carregamento.

Fonte