Como tornar as imagens carregadas mais rapidamente no seu site WordPress

04.06.2020
WordPress 'Como tornar as imagens carregadas mais rapidamente no seu site WordPress
0 11 мин.

Então você quer que suas imagens sejam carregadas mais rapidamente?


Bem, eu não vou falar mal. Vamos mergulhar nas coisas boas!

Existem três maneiras de tornar as imagens carregadas mais rapidamente no WordPress:

  • Redimensionar
  • Comprimir
  • Carga preguiçosa

Nesta postagem, explicarei como cada uma dessas técnicas funciona e por que elas farão o seu site carregar mais rápido. Também mostrarei como implementar cada tática com soluções manuais e recomendações de plugins.

Esta primeira técnica é extremamente simples, mas muitas vezes esquecida pelos iniciantes do WordPress.

Como otimizar imagens no WordPress

Redimensione suas imagens

A maneira mais simples de acelerar o carregamento de suas imagens é redimensioná-las. Deixe-me explicar.

O que está redimensionando?

Quando digo “redimensionar”, pretendo alterar as dimensões de uma imagem e, nesse caso, você deseja reduzir as dimensões de imagens muito grandes.

Como exemplo, os blogueiros às vezes tiram fotografias em seus telefones ou câmeras digitais e as enviam para seus blogs. As cópias não editadas das fotos podem ter até 5.000 px de largura. Agora pense sobre isso …

A largura da seção de postagem no seu site provavelmente não ultrapassa 800px. O texto que você está lendo agora abrange apenas cerca de 700 pixels na página. Imagine adicionar uma imagem com 5.000 pixels de largura aqui. Seria muito maior do que precisa ser e embora ele fosse reduzido para caber na página, o arquivo de imagem carregado ainda é enorme e extremamente inútil. E isso é porque …

Imagens com dimensões maiores também têm tamanhos de arquivo maiores.

No que diz respeito ao desempenho e ao rápido carregamento das imagens, reduzir as dimensões da imagem é uma ótima maneira de diminuir drasticamente o tamanho do arquivo, e isso faz com que a imagem seja carregada mais rapidamente.

Vamos voltar ao meu exemplo e supor que a imagem tenha 5.000 px de largura e altura. Se você o reduzisse de 5.000 px para apenas 700 px, a imagem usaria 99% menos pixels. Em outras palavras, o tamanho do arquivo diminuiria em cerca de 99%. Se a imagem tivesse 5 MB, acabaria em apenas 50 KB e carregaria 99% mais rápido em seu site.

Redimensionar imagens

Se você não quer redimensionar cuidadosamente suas imagens, há quase certamente alguns ganhos a serem obtidos.

Existem algumas maneiras de redimensionar suas imagens para caber perfeitamente no site.

Redimensione manualmente suas imagens

Antes de enviar uma nova imagem para o seu site, redimensione-a manualmente, usando as ferramentas de edição de imagem integradas no seu computador.

Se você tiver uma imagem extremamente grande, como no meu exemplo, isso imediatamente fará uma grande diferença. Depois que a imagem é redimensionada, você pode enviá-la para sua Biblioteca de mídia.

Mesmo se você usar a imagem em uma mesa de luz ou controle deslizante, normalmente não há razão para que ela seja maior que 2.000 px. Se a imagem estiver em uma área de conteúdo de postagem ou página, você provavelmente poderá se sair bem com a imagem com 800 px de largura.

Esse método de redimensionar imagens funciona bem, mas não ajuda com as imagens já enviadas para o seu site. Uma técnica fácil para imagens existentes é simplesmente escolher um tamanho diferente.

Use tamanhos menores

Quando você carrega uma imagem na sua Biblioteca de mídia, o WordPress cria até três versões adicionais: miniatura, média e grande.

Se você visitar sua página de configurações de mídia, verá que pode escolher esses tamanhos aqui:

Configurações de mídia do WordPress

Embora você possa modificar as configurações, o tamanho Grande padrão é 1024px, grande o suficiente para ser usado em postagens sem desperdiçar muito. Você pode usar esse tamanho para todas as imagens incluídas em suas postagens.

Para alterar o tamanho de uma imagem que você adicionou a uma postagem, clique nela no editor e você verá o menu suspenso Tamanho da imagem na barra lateral direita.

Redimensionamento de imagem do WordPress

Selecione o tamanho “Grande” e atualize a postagem. Se você tiver imagens de tamanho grande, essa técnica permitirá exibir rapidamente um tamanho mais apropriado que será carregado mais rapidamente, sem a necessidade de recarregar e substituir o original..

Dito isto, isso pode ser muito tedioso se você tiver dezenas de postagens com dezenas de imagens. Existe um método ainda mais rápido e eficaz disponível.

Redimensionamento automatizado com um plug-in

Em vez de redimensionar as imagens, você pode permitir que um plug-in faça isso automaticamente. Quando se trata de redimensionamento automático de imagens, nada supera o Optimole plugar.

Optimole Image Optimizer

Não funciona da maneira que você esperaria.

Em vez de editar as imagens na sua Biblioteca de mídia, o Optimole mantém suas próprias cópias e as serve de uma CDN de alto desempenho. Dessa forma, seus originais nunca são modificados de forma alguma.

Além disso, você não precisa fornecer ao Optimole um tamanho único para usar em suas imagens. Em vez disso, obtém o tamanho da tela do visitante e gera uma versão com tamanho ideal de cada imagem em tempo real. Isso significa que alguém em um dispositivo móvel pode carregar uma versão de 400 px de uma imagem, enquanto outro visitante em um laptop obtém uma versão de 700 px da mesma imagem.

Esse método de redimensionamento é muito mais fácil de implementar e mais eficaz para dispositivos móveis, o que é especialmente importante porque os visitantes móveis costumam estar em conexões mais lentas.

Se você quiser aprender a usar o Optimole, siga o meu vídeo passo a passo completo:

Recomendamos o redimensionamento primeiro, porque, se você o faz manualmente ou o automatiza com um plug-in, é simples e pode oferecer enormes ganhos.

Se suas imagens já tiverem o tamanho adequado para o seu site, você poderá melhorar ainda mais o desempenho do site com a compactação.

Comprima suas imagens

A compactação é uma maneira de reduzir o tamanho do arquivo de uma imagem sem alterar suas dimensões.

Existem dois tipos de compactação de imagem disponíveis.

O primeiro tipo de compactação de imagem é chamado de compactação “sem perdas”.

Compressão sem perdas

Com uma otimização sem perdas, a própria imagem não é editada. Em vez disso, essa técnica remove todos os metadados armazenados no arquivo de imagem. Por exemplo, as imagens geralmente armazenam o nome do dispositivo usado para tirar a imagem, a data em que a foto foi tirada e, às vezes, até as coordenadas GPS da foto.

Como esses dados geralmente são bastante limitados, a otimização sem perdas pode reduzir apenas o tamanho da sua imagem em 1 a 5%, mas não há realmente nenhuma razão para não usá-los porque não afeta a qualidade da imagem..

Os ganhos reais vêm da otimização com perdas.

Compressão com perda

Como seria de esperar, a compactação com perda otimiza a própria imagem e resulta em degradação da qualidade. Mas aqui está a coisa …

Atualmente, os algoritmos de compactação são tão bons que você pode reduzir o tamanho do arquivo da imagem em 50 a 70% sem qualquer diferença discernível. A menos que você seja um fotógrafo profissional e precise que suas imagens sejam perfeitamente nítidas em monitores 4K, você nem notará a perda de qualidade.

Como comprimir suas imagens

Você pode compactar manualmente suas imagens com uma ferramenta como TinyPNG antes de enviá-los ou use um plug-in para automatizar as coisas.

ShortPixel é um ótimo plugin para otimizar as imagens em seu site. Ele pode otimizá-los imediatamente quando você os carrega e otimizar em massa todas as imagens que já estão na sua Biblioteca de mídia.

shortpixel

Eu recomendei o Optimole para redimensionar imagens e comprime as imagens com muita eficiência também. Mais uma vez, ele não otimiza os originais armazenados na sua Biblioteca de mídia, mas compacta as cópias que ele serve para seus visitantes.

Você pode encontrar mais alguns plugins de otimização de imagem aqui.

Com suas imagens redimensionadas e compactadas, seu site será carregado muito mais rapidamente, mas há uma última otimização para imagens que você pode criar.

Implementar carregamento lento

O carregamento lento é uma maneira realmente inteligente de otimizar ainda mais suas imagens.

Digamos que você tenha uma postagem no blog com 12 imagens. Quando alguém visita seu site, nem todas essas imagens ficam visíveis imediatamente na tela. Eles precisam rolar mais para baixo para que a maioria apareça. Então, por que carregar todos os 12 imediatamente?

Com carregamento lento, apenas as imagens que aparecem na tela são carregadas. Em vez de carregar 12 imagens, talvez apenas 2-3 sejam carregadas. Em seguida, à medida que o visitante rola a página, as imagens restantes são carregadas quando entram na tela. Isso significa que o carregamento inicial é muito mais rápido e, como a maioria dos visitantes não rola a página, muitas das imagens nunca são carregadas, o que economiza recursos valiosos do servidor.

Este vídeo tem uma visualização que explica melhor se você deseja ter uma imagem mais clara de como o carregamento lento funciona:

Agora que você vendeu o conceito, veja como implementar o carregamento lento no seu site.

Como usar o carregamento lento

Mais uma vez, essa técnica de otimização de desempenho é facilmente adicionada ao WordPress com um plug-in.

Se você está procurando uma opção gratuita, experimente o Optimole ou a3 Carga preguiçosa.

Com o Optimole, o carregamento lento é ativado automaticamente e o plugin a3 é fácil de configurar.

Além disso, se você não se importa de pagar, confira WP Rocket. Possui cache de alto desempenho e uma variedade de outras ferramentas de velocidade.

Para ativar o carregamento lento com o WP Rocket, basta ativar esse botão:

WP Rocket Media

Não poderia ser mais fácil!

Aproveite suas imagens de carregamento mais rápido

Para resumir o que você acabou de aprender …

Imagens superdimensionadas enviadas para o seu site são extremamente lentas. Apenas uma dessas imagens pode interromper o seu site.

A coisa mais importante que você pode fazer para acelerar suas imagens é redimensionar imagens muito grandes para que elas tenham o tamanho apropriado para o seu site. Você pode fazer isso manualmente ou automatizá-lo com o Optimole.

Em seguida, os algoritmos de compactação de imagem percorreram um longo caminho e, atualmente, você pode reduzir o tamanho do arquivo de uma imagem de 50 a 70% sem afetar a qualidade de maneira perceptível. Isso não é acéfalo. Use ShortPixel ou Optimole para compactar todas as imagens no seu site.

Por fim, o carregamento lento é uma ótima maneira de carregar imagens seletivamente. Você pode usar o Optimole, o a3 Lazy Load ou o WP Rocket para implementar instantaneamente o carregamento lento no seu site.

Se você não estiver usando nenhuma dessas técnicas, seu site será carregado drasticamente mais rápido depois de implementado. Ele irá surpreendê-lo.

Você tem alguma dúvida sobre os conceitos e técnicas deste post? Tem outra dica para compartilhar? Publique na seção de comentários abaixo!

você pode gostar,

Como corrigir um site lento do WordPress e um painel de administração (permanentemente)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector