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

Implementar o carregamento preguiçoso (lazy load) para imagens no WordPress é um pequeno passo que pode fazer uma grande diferença para o seu site. É uma prática fundamental para qualquer site de alto desempenho hoje em dia.

Essa única técnica ajuda diretamente em duas coisas que todo proprietário de site deseja. Uma melhor experiência para os visitantes e um bom impulso no ranking dos motores de busca.

Para seus visitantes, isso significa que suas páginas parecem excepcionalmente rápidas e responsivas. Eles veem seu conteúdo quase instantaneamente, o que os mantém engajados.

Motores de busca como o Google também notam essa velocidade. Eles tendem a favorecer sites mais rápidos, o que pode ajudar seu conteúdo a ser descoberto por mais pessoas.

Queremos ajudá-lo a obter esses benefícios imediatamente. Aqui estão dois métodos fáceis para fazer o carregamento preguiçoso funcionar em seu site hoje.

Por que usar Lazy Load em Imagens no WordPress?

O carregamento preguiçoso de imagens no 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, que é construída especificamente para imagens. Uma CDN permitirá que os usuários baixem imagens de um servidor web mais próximo deles e reduza as velocidades 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 lazy loading 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 lazy loading 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 lançamento do WordPress 5.5 adicionou o lazy loading como um recurso padrão.

No entanto, se você quiser personalizar como suas imagens carregam lentamente e também carregar lentamente imagens de fundo, você precisará usar um plugin do WordPress.

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:

1. Carregar Imagens de Forma Preguiçosa (Lazy Load) no WordPress Com WP Rocket (Recomendado)
2. Carregar Imagens de Forma Preguiçosa (Lazy Load) no WordPress Com Optimole (Grátis)
3. Perguntas Frequentes Sobre Carregamento Preguiçoso de Imagens
4. Dicas Bônus para Otimizar Suas Imagens do WordPress

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

Recomendamos usar o plugin WP Rocket para carregar imagens de forma preguiçosa (lazy load) 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.

Logo de início, todas as configurações de cache recomendadas por eles 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 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 corretamente o WP Rocket 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 para WordPress que permite habilitar facilmente o carregamento preguiçoso de imagens.

Se você recebe mais de 5.000 visitantes por mês, 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 lazyload’. Isso impedirá que as imagens no topo dos seus posts ou páginas sejam carregadas lentamente, para que as imagens acima da dobra sempre apareçam.

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 ‘Ativar lazyload para imagens de fundo’. Isso fará o lazy load das suas imagens de fundo, que podem ser as maiores imagens do seu site.

Outra configuração é o lazy loading 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.

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 lazy loading básico para imagens é um recurso padrão. No entanto, essa função nativa não se aplica a coisas como imagens de fundo ou vídeos. Para ter mais controle e garantir que toda a sua mídia seja carregada com lazy loading, recomendamos o uso de um plugin dedicado como o WP Rocket ou Optimole.

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

Absolutamente. O lazy loading 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, então melhorar sua velocidade com lazy loading 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 lazy load poderoso e simples com apenas alguns cliques. Se você procura uma ótima alternativa gratuita, o Optimole é uma excelente escolha que também oferece opções robustas de lazy loading.

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.

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 comprimir suas imagens antes de carregá-las em seu site usando uma ferramenta como TinyPNG ou JPEGmini. Alternativamente, você pode usar um plugin de compressão de imagem automatizado como Optimole ou EWWW Image Optimizer.

Também é importante escolher o tamanho de imagem e o formato de arquivo WordPress corretos 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 de forma preguiçosa (lazy load) no WordPress. Você também pode querer ver nosso tutorial sobre como otimizar facilmente imagens para a web sem perder qualidade e nossas escolhas de especialistas 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.