Como Carregar Imagens Lentamente (Lazy Load) no WordPress Facilmente (2 Maneiras)

Ninguém gosta de um site lento. Se suas páginas demoram muito para carregar, os visitantes sairão antes mesmo de ver seu conteúdo.

Imagens são frequentemente a principal causa de lentidão no carregamento. Elas consomem a maior parte da largura de banda, prejudicando seu desempenho e ranking nos mecanismos de busca.

Otimizamos centenas de sites para velocidade, e o carregamento preguiçoso (lazy loading) é uma das vitórias rápidas mais eficazes que recomendamos. Ele impede que as imagens carreguem até que o usuário role a página para vê-las.

Neste guia, mostraremos como carregar imagens preguiçosamente (lazy load) no WordPress para impulsionar a velocidade do seu site instantaneamente.

Por que usar Lazy Load em Imagens no WordPress?

O carregamento preguiçoso de imagens do WordPress pode acelerar seu site e oferecer uma melhor experiência ao usuário.

Ninguém gosta de sites lentos. Na verdade, um estudo sobre o desempenho de sites 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 diminuição de 16% na satisfação do cliente.

Motores de busca como o Google também não gostam de sites de carregamento lento. É por isso que sites mais rápidos têm um ranking mais alto nos resultados de busca.

As imagens 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 aumenta o tempo de carregamento da sua página.

Uma maneira de lidar com essa situação é usar um serviço de CDN como BunnyCDN, ou uma opção mais simples como Envira CDN. Uma CDN permitirá que os usuários baixem imagens de um servidor web mais próximo deles e reduza os tempos de carregamento do site.

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

Como Funciona o Carregamento Preguiçoso de Imagens?

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

À medida que um 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 preguiçoso pode ser muito benéfico para o seu blog WordPress:

• Ele reduz o tempo inicial de carregamento da página da web para que os usuários vejam seu site mais rapidamente.
• Ele economiza largura de banda, entregando apenas as imagens que são visualizadas, o que pode economizar dinheiro em custos de hospedagem WordPress.

O Que é Carregamento Preguiçoso Nativo no WordPress?

Desde o WordPress 5.5, a plataforma inclui o 'carregamento preguiçoso nativo' por padrão. Isso significa que o WordPress adiciona automaticamente o atributo HTML loading="lazy" às suas tags img.

Isso instrui navegadores modernos (como Chrome, Firefox e Safari) a adiar o carregamento da imagem até que o usuário role a página para perto dela.

Se o WordPress Faz Isso Automaticamente, Por Que Preciso de um Plugin?

Embora o carregamento preguiçoso nativo seja um ótimo começo, ele não é perfeito. Ele depende inteiramente do navegador do visitante para decidir quando carregar uma imagem. Plugins dedicados como WP Rocket oferecem melhor desempenho porque eles:

• Carregam preguiçosamente imagens de fundo (o que o WordPress nativo não consegue fazer).
• Carregam preguiçosamente iframes e vídeos especificamente.
• Usam scripts avançados que carregam imagens mais rápido do que o comportamento padrão do navegador.

Vamos dar uma olhada em como carregar imagens de forma preguiçosa (lazy load) no WordPress usando dois plugins diferentes. Você pode usar os links rápidos abaixo para ir direto para o método que deseja usar:

Método 1: Carregar Imagens de Forma Preguiçosa (Lazy Load) no WordPress Com WP Rocket

Recomendamos o uso do plugin WP Rocket para carregar imagens preguiçosamente no WordPress. É o melhor plugin de cache do WordPress do mercado que permite ativar facilmente o carregamento preguiçoso de imagens.

Além disso, é um plugin muito poderoso que ajuda a otimizar a velocidade da sua página sem precisar conhecer termos técnicos complexos ou configurar configurações de especialista.

Prontos para usar, todas as suas configurações de cache recomendadas padrão acelerarão muito o seu site WordPress.

A primeira coisa que você precisará fazer é instalar e ativar o plugin WP Rocket. Para mais detalhes, você pode ver nosso guia sobre como instalar um plugin do WordPress.

Para habilitar o carregamento preguiçoso de imagens, tudo o que você precisa fazer é marcar algumas caixas. Você pode até habilitar o carregamento preguiçoso para vídeos, o que melhorará ainda mais a velocidade do seu site.

Tudo o que você precisa fazer é ir em Configurações » WP Rocket no seu painel WordPress e clicar na aba ‘Mídia’. Em seguida, você pode rolar até a seção ‘LazyLoad’ e marcar as caixas ao lado de ‘Ativar para imagens’ e ‘Ativar para iframes e vídeos’.

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

Método 2: Carregar Imagens Preguiçosamente no WordPress Com Optimole

Este método usa o plugin gratuito Optimole. É um dos melhores plugins de compressão de imagem do WordPress que permite habilitar facilmente o carregamento preguiçoso de imagens.

Se seu tráfego exceder os limites do plano gratuito, então você precisará da versão premium do Optimole. Para mais detalhes, veja nossa análise completa do Optimole.

Primeiro, você precisa instalar e ativar o plugin Optimole. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você verá uma tela pedindo para se inscrever para uma chave de API. Você também pode encontrar esta tela navegando até Optimole no menu de administração.

Você precisará garantir que o endereço de e-mail listado esteja correto e, em seguida, clicar no botão ‘Criar e conectar sua conta’. Alternativamente, se você já for um usuário existente, basta clicar no botão ‘Já tenho uma chave de API’.

Pode ser necessário esperar alguns segundos enquanto o plugin se conecta ao Optimole. Depois disso, o plugin começará automaticamente a otimizar suas imagens para que seus visitantes agora vejam as melhores imagens para seus dispositivos.

Enquanto isso acontece, você pode clicar na aba ‘Configurações’ para configurar o carregamento preguiçoso.

Aqui, você precisa garantir que a configuração ‘Dimensionar imagens e & Lazy load’ esteja ativada. Isso gerará imagens com base no tamanho da tela do seu visitante e melhorará a velocidade de carregamento.

Em seguida, clique na opção de menu ‘Avançado’ e selecione ‘Lazyload’. Nesta tela, existem algumas configurações diferentes que permitem personalizar como suas imagens serão carregadas lentamente.

Primeiro, você pode ajustar a configuração 'Excluir o primeiro número de imagens do carregamento preguiçoso'.

Isso impedirá que as imagens no topo de seus posts ou páginas sejam carregadas preguiçosamente. Isso garante que as imagens acima da dobra carreguem instantaneamente, o que melhora sua pontuação de Maior Elemento de Conteúdo (LCP) para melhor SEO.

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

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

A primeira é a configuração ‘Dimensionar imagens’. Isso dimensionará as imagens para o tamanho da tela do visitante e fará com que sua página carregue mais rápido.

Depois disso, você verá a configuração 'Habilitar lazyload para imagens de fundo'. Isso carregará preguiçosamente suas imagens de fundo, que podem ser as maiores imagens em seu site.

Outra configuração é o carregamento preguiçoso de vídeos incorporados e iframes. Se você tem muito conteúdo de vídeo incorporado, então você vai querer deixar essa configuração ativada. Ela carregará uma imagem de placeholder no lugar do vídeo. Quando o placeholder for clicado, o vídeo completo será carregado.

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

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

Solução de problemas comuns de carregamento preguiçoso

Às vezes, habilitar o carregamento preguiçoso pode fazer com que as imagens desapareçam ou pareçam borradas.

Aqui estão as correções comuns:

1. Imagens não estão aparecendo

Isso geralmente acontece se você tiver dois plugins de carregamento preguiçoso ativos ao mesmo tempo (por exemplo, WP Rocket e o carregamento preguiçoso integrado do seu tema). Certifique-se de usar apenas um método para evitar conflitos.

2. Imagens acima da dobra aparecem tarde

Se seu logotipo ou imagem de cabeçalho aparecer depois do resto da página, isso pode prejudicar sua experiência do usuário. Como mencionado nos métodos acima, você deve excluir as primeiras 2-3 imagens da sua página do carregamento preguiçoso para corrigir isso.

3. Mudança de Layout (CLS)

Se o seu conteúdo ‘pula’ quando uma imagem carrega, isso prejudica sua pontuação de SEO. Para evitar isso, certifique-se de que todas as suas imagens tenham atributos width e height definidos. O WordPress faz isso automaticamente, mas alguns temas podem sobrescrevê-lo.

Perguntas Frequentes Sobre Carregamento Preguiçoso de Imagens

Sabemos que você ainda pode ter algumas dúvidas sobre lazy loading no WordPress. Aqui estão as respostas para algumas das mais comuns que recebemos.

1. O WordPress faz lazy load de imagens automaticamente?

Sim, desde o lançamento do WordPress 5.5, o carregamento preguiçoso básico para imagens é um recurso padrão. No entanto, essa função nativa é limitada e não se aplica a imagens de fundo, iframes ou vídeos. Para garantir que toda a sua mídia seja otimizada, recomendamos o uso de um plugin dedicado como WP Rocket ou Optimole.

2. O carregamento preguiçoso é bom para SEO?

Com certeza. O carregamento preguiçoso melhora significativamente a velocidade de carregamento da sua página, que é um fator chave para a experiência do usuário. Mecanismos de busca como o Google favorecem sites mais rápidos, portanto, melhorar sua velocidade com o carregamento preguiçoso pode dar ao seu site um bom impulso nos rankings de busca.

3. Qual é o melhor plugin de lazy load para WordPress?

Para desempenho geral e facilidade de uso, recomendamos o WP Rocket. É o melhor plugin de desempenho do mercado e inclui um recurso de carregamento preguiçoso poderoso e simples com apenas alguns cliques. Se você está procurando uma ótima alternativa gratuita, o Optimole é uma excelente escolha que também oferece opções robustas de carregamento preguiçoso.

4. É possível fazer lazy load de vídeos no WordPress?

Sim, é possível e você deve! Esta é uma maneira fantástica de melhorar a velocidade de páginas que apresentam muito conteúdo de vídeo incorporado. Tanto o WP Rocket quanto o Optimole permitem que você ative facilmente o lazy loading para seus vídeos, que os substitui por uma imagem de placeholder até que o usuário clique para reproduzir.

5. Você deve fazer lazy load de imagens acima da dobra (above the fold)?

Geralmente, a melhor prática é excluir imagens no topo da sua página (acima da dobra) do lazy loading. Isso garante que a primeira coisa que seus visitantes veem carregue instantaneamente, criando uma ótima primeira impressão. Plugins como o Optimole permitem que você exclua facilmente as primeiras imagens do lazy loading por esse exato motivo.

6. Como desativo o carregamento preguiçoso nativo no WordPress?

Se você preferir usar um plugin específico e quiser garantir que o carregamento preguiçoso nativo do WordPress não interfira, você pode desativá-lo adicionando um simples trecho de código ao arquivo functions.php do seu tema ou usando um plugin de trechos de código como o WPCode.

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Dicas Bônus para Otimizar Suas Imagens do WordPress

Embora o lazy loading ajude a melhorar a velocidade de carregamento do site, existem outras maneiras de otimizar suas imagens do WordPress para o melhor desempenho.

Por exemplo, recomendamos compactar suas imagens antes de carregá-las em seu site usando uma ferramenta como TinyPNG ou JPEGmini. Alternativamente, você pode usar um plugin de compactação de imagem automatizado como Optimole ou EWWW Image Optimizer.

Também é importante escolher o formato de arquivo correto. Embora JPEGs e PNGs sejam comuns, recomendamos fortemente o uso de formatos de próxima geração como o WebP. Esses tipos de arquivo oferecem compressão e qualidade superiores, o que ajuda seu site a carregar significativamente mais rápido.

Esperamos que este artigo tenha ajudado você a aprender como carregar imagens preguiçosamente no WordPress. Você também pode querer ver nosso tutorial sobre como otimizar facilmente imagens para a web sem perder qualidade e nossas escolhas especializadas dos melhores plugins de upload de arquivos para WordPress.

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