Como carregar facilmente imagens no WordPress (2 maneiras)

Deseja aprender como carregar imagens de forma preguiçosa no WordPress?

O carregamento lento permite que o site carregue imagens somente quando o usuário rolar para baixo até uma imagem específica, o que reduz o tempo de carregamento e melhora o desempenho do site. Muitos sites populares com muitas imagens usam o lazy loading para aumentar a velocidade e o desempenho do site.

Neste artigo, mostraremos passo a passo como fazer o carregamento lento de imagens no WordPress.

Por que o Lazy Load Images no WordPress?

As imagens do WordPress com carregamento lento podem acelerar o seu site e oferecer uma melhor experiência ao usuário.

Ninguém gosta de sites lentos. De fato, um estudo de desempenho de site descobriu que um atraso de 1 segundo no tempo de carregamento da página leva a 7% menos conversões, 11% menos visualizações de página e uma redução de 16% na satisfação do cliente.

Os mecanismos de pesquisa, como o Google, também não gostam de sites de carregamento lento. É por isso que os sites mais rápidos têm uma classificação mais alta nos resultados de pesquisa.

As imagens são as que levam mais tempo para carregar em seu site WordPress em comparação com outros elementos da Web. Se você adicionar muitas imagens aos seus artigos, cada imagem aumentará o tempo de carregamento da página.

Uma maneira de lidar com essa situação é usar um serviço de CDN como o BunnyCDN. Uma CDN permitirá que os usuários façam download de imagens de um servidor da Web mais próximo e reduzirá a velocidade de carregamento do site.

Entretanto, suas imagens ainda serão carregadas e afetarão o tempo total de carregamento da página. Para contornar esse problema, você pode atrasar o carregamento de imagens implementando o lazy load em seu site.

Como funciona o carregamento lento de imagens?

Em vez de carregar todas as imagens de uma vez, o carregamento lento baixa apenas as imagens visíveis na tela do usuário. Ele substitui todas as outras imagens por uma imagem de espaço reservado ou um espaço em branco.

À medida que o usuário rola a página para baixo, seu site carrega as imagens que estão visíveis na área de visualização do navegador.

O carregamento lento pode ser muito benéfico para seu blog do WordPress:

• Ele reduz o tempo de carregamento inicial da página da Web para que os usuários vejam seu site mais rapidamente.
• Ele conserva a largura de banda fornecendo apenas as imagens que são visualizadas, o que pode economizar dinheiro nos custos de hospedagem do WordPress.

O lançamento do WordPress 5.5 adicionou o carregamento lento como um recurso padrão.

No entanto, se quiser personalizar o carregamento lento das imagens e também o carregamento lento de imagens de fundo, você precisará usar um plug-in do WordPress.

Vamos dar uma olhada em como carregar imagens com preguiça no WordPress usando dois plugins diferentes. Você pode usar os links rápidos abaixo para ir direto ao método que deseja usar:

Método 1: Carregamento lento de imagens no WordPress com o WP Rocket

Recomendamos o uso do plug-in WP Rocket para carregamento lento de imagens no WordPress. É o melhor plug-in de cache do WordPress no mercado que permite ativar facilmente o carregamento lento de imagens.

Além disso, é um plug-in muito avançado que ajuda a otimizar a velocidade da página sem precisar conhecer termos técnicos complexos ou definir configurações especializadas.

Logo de cara, todas as configurações de cache recomendadas por padrão aceleram bastante seu site WordPress.

A primeira coisa que você precisará fazer é instalar e ativar o plug-in WP Rocket. Para obter mais detalhes, consulte nosso guia sobre como instalar um plug-in do WordPress.

Para ativar o carregamento lento de imagens, tudo o que você precisa fazer é marcar algumas caixas. Você pode até ativar o carregamento lento para vídeos, o que aumentará ainda mais a velocidade do site.

Tudo o que você precisa fazer é ir para Configurações ” WP Rocket no painel do WordPress e clicar na guia “Mídia”. Em seguida, vá até a seção “LazyLoad” e marque as caixas ao lado de “Enable for images” (Ativar para imagens) e “Enable for iframes and videos” (Ativar para iframes e vídeos).

Para obter mais detalhes, consulte nosso guia sobre como instalar e configurar corretamente o WP Rocket no WordPress.

Método 2: Carregamento lento de imagens no WordPress com o Optimole

Esse método usa o plug-in gratuito Optimole. Ele é um dos melhores plug-ins de compactação de imagens do WordPress que permite ativar facilmente o carregamento lento de imagens.

Se você receber mais de 5.000 visitantes por mês, precisará da versão premium do Optimole. Para obter mais detalhes, consulte nossa análise completa do Optimole.

Primeiro, você precisa instalar e ativar o plug-in Optimole. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você verá uma tela solicitando o registro de uma chave de API. Você também pode encontrar essa tela navegando até Optimole no menu de administração.

Você precisará se certificar de que o endereço de e-mail listado está correto e, em seguida, clicar no botão “Create & connect your account” (Criar e conectar sua conta). Como alternativa, se você já for um usuário, basta clicar no botão “I already have an API key” (Já tenho uma chave de API).

Talvez seja necessário aguardar alguns segundos enquanto o plug-in se conecta ao Optimole. Depois disso, o plug-in começará automaticamente a otimizar suas imagens para que seus visitantes vejam as melhores imagens para seus dispositivos.

Enquanto isso acontece, você pode clicar na guia “Settings” (Configurações) para configurar o carregamento lento.

Aqui, você precisa garantir que a configuração “Scale images and & Lazy load” esteja ativada. Isso gerará imagens com base no tamanho da tela do visitante e aumentará a velocidade de carregamento.

Em seguida, clique na opção de menu “Advanced” (Avançado) e selecione “Lazyload” (Carregamento lento). Nessa tela, há algumas configurações diferentes que permitem personalizar o modo como suas imagens serão carregadas lentamente.

Primeiro, você pode ajustar a configuração “Exclude first number of images from lazyload” (Excluir o primeiro número de imagens do carregamento lento). Isso impedirá o carregamento lento das imagens na parte superior de seus posts ou páginas, de modo que as imagens acima da dobra sempre serão exibidas.

Você pode definir esse valor como 0 se quiser que todas as imagens sejam carregadas lentamente.

Há algumas outras configurações avançadas de lazy load no Optimole que você pode verificar. Essas configurações são ativadas por padrão.

A primeira é a configuração “Scale Images”. Isso dimensionará as imagens de acordo com o tamanho da tela do visitante e tornará o carregamento da página mais rápido.

Depois disso, você verá a configuração “Enable lazyload for background images” (Ativar carregamento lento para imagens de fundo). Isso carregará lentamente suas imagens de fundo, que podem ser as maiores imagens em seu site.

Outra configuração é o carregamento lento de vídeos incorporados e iframes. Se você tiver muito conteúdo de vídeo incorporado, convém deixar essa configuração ativada. Ela carregará uma imagem de espaço reservado no lugar do vídeo. Quando o espaço reservado for clicado, o vídeo completo será carregado.

Você pode continuar a personalizar essas configurações e ver o que funciona melhor para seu site e suas imagens.

Antes de sair das configurações do plug-in, certifique-se de clicar no botão “Salvar alterações” na parte inferior da página.

Dicas de bônus para otimizar suas imagens do WordPress

Embora o carregamento lento ajude a melhorar a velocidade de carregamento do site, há algumas outras maneiras de otimizar suas imagens do WordPress para obter o melhor desempenho.

Por exemplo, recomendamos compactar suas imagens antes de carregá-las em seu site usando uma ferramenta como TinyPNG ou JPEGmini. Como alternativa, você pode usar um plug-in de compactação automática de imagens, como o Optimole ou o EWWW Image Optimizer.

Também é importante escolher o tamanho de imagem e o formato de arquivo do WordPress adequados para suas imagens. JPEGs são melhores para fotos ou imagens com muitas cores, PNGs são adequados para imagens simples ou transparentes e GIFs são apenas para imagens animadas.

Esperamos que este artigo tenha ajudado você a aprender como carregar imagens com lazy load no WordPress. Talvez você também queira ver nosso tutorial em sobrecomo otimizar facilmente as imagens para a Web sem perder a qualidade e nossas escolhas de especialistas sobre o melhor software de web design.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.