Como Desativar Corretamente o Lazy Load no WordPress (Passo a Passo)

O carregamento preguiçoso (lazy loading) geralmente ajuda seu site a carregar mais rápido, atrasando o carregamento de imagens até que um usuário role a página para vê-las. No entanto, às vezes pode causar problemas de exibição, fazer com que seu conteúdo 'acima da dobra' apareça mais lentamente ou entrar em conflito com o layout do seu tema.

Frequentemente vemos isso acontecer em portfólios de fotografia, onde imagens de alta qualidade precisam carregar imediatamente. Se esse recurso estiver prejudicando a experiência do seu usuário, você precisará de uma maneira de desativá-lo.

Na WPBeginner, ajudamos milhares de usuários a solucionar problemas de imagem com segurança. Sabemos exatamente quais métodos funcionam melhor sem quebrar seu site.

Neste artigo, mostraremos como desativar corretamente o carregamento preguiçoso no WordPress.

Como desativar corretamente o carregamento preguiçoso no WordPress

O que é Carregamento Preguiçoso (Lazy Loading)?

O WordPress introduziu o carregamento preguiçoso de imagens pela primeira vez no WordPress 5.5. Mais tarde, estendeu o recurso de carregamento preguiçoso para embeds de iframe (como vídeos do YouTube, Spotify e outros embeds).

Essa prática ajuda a melhorar o desempenho do seu site e a velocidade da página, carregando rapidamente o conteúdo na área visível primeiro.

Um site mais rápido não é apenas bom para os usuários, mas também pode melhorar o ranking do seu site, pois os motores de busca como o Google consideram a velocidade um fator de classificação importante.

Além de imagens e embeds, você também pode facilmente carregar preguiçosamente comentários e Gravatars para melhorar ainda mais a velocidade de carregamento da página.

Você pode ver a funcionalidade de carregamento preguiçoso em ação clicando com o botão direito do mouse em uma imagem e selecionando a ferramenta Inspecionar em seu navegador.

Carregamento preguiçoso de imagens no WordPress

Isso dividirá a tela do seu navegador e mostrará o código-fonte HTML. A partir daqui, você poderá ver o atributo “loading=lazy” adicionado à imagem.

Agora, normalmente, não recomendamos desativar o carregamento preguiçoso devido aos seus benefícios gerais para o seu site WordPress. Desativá-lo pode resultar em velocidade mais lenta do site, taxas de conversão mais baixas e classificações de SEO mais baixas.

No entanto, o carregamento preguiçoso pode prejudicar a experiência do usuário em alguns sites.

Por exemplo, se você administra um site de fotografia onde as imagens são o aspecto mais significativo do seu conteúdo, então carregá-las preguiçosamente pode arruinar a experiência do usuário para seus clientes.

Em outros casos, você pode estar usando um plugin de desempenho independente (como o WP Rocket) que tem sua própria solução de carregamento preguiçoso, então você vai querer desativar o carregamento preguiçoso padrão do WordPress para evitar conflitos.

Dito isso, vamos ver como você pode desativar facilmente o carregamento preguiçoso no WordPress.

Para este tutorial, mostraremos um método de código e um método de plugin. Você pode usar os links abaixo para pular para qualquer opção que preferir:

Você pode desativar o recurso de carregamento preguiçoso no WordPress adicionando código personalizado ao arquivo functions.php do seu tema.

No entanto, lembre-se de que o menor erro ao adicionar o código pode quebrar seu site e torná-lo inacessível.

É por isso que recomendamos o uso do WPCode para adicionar código personalizado. Ele possui proteção contra erros integrada para evitar que código ruim quebre seu site.

É o melhor plugin de snippets de código personalizado para WordPress do mercado. Além disso, ele torna a adição de código ao seu site super fácil e segura.

Nós o testamos completamente em nosso site de demonstração e vimos resultados excelentes. Para saber mais, veja nossa análise completa do WPCode.

Primeiro, você precisa instalar e ativar o plugin WPCode. Para instruções detalhadas, veja nosso guia sobre como instalar um plugin do WordPress.

🚨 Observação: O WPCode também tem uma versão gratuita que você pode usar para este tutorial. No entanto, a atualização para o plano pago lhe dará acesso a recursos como uma biblioteca de nuvem de snippets de código, lógica condicional e muito mais.

Após a ativação, visite a página Snippets de Código » + Adicionar Snippet no painel do WordPress.

A partir daqui, clique no botão ‘Usar snippet’ na opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’.

Adicionar novo snippet

Isso o direcionará para a página ‘Criar Snippet Personalizado’, onde você pode começar digitando um nome para o seu snippet de código.

Este pode ser qualquer nome que o ajude a identificar o snippet de código e o que ele faz. Nós chamamos o nosso de ‘Desativar Lazy Load’.

Depois de dar um nome ao seu snippet personalizado, selecione ‘Snippet PHP’ no menu suspenso ‘Tipo de Código’ no canto direito da tela.

Escolha o tipo de código PHP para o trecho de código desativar o carregamento preguiçoso

Agora, copie e cole o seguinte código PHP na caixa ‘Visualização do Código’:

// Disable native WordPress lazy loading 
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

É assim que o código ficará após ser colado.

Adicionar trecho de código

Depois disso, role para baixo até a seção ‘Inserção’. Aqui, simplesmente escolha o modo ‘Inserir Automaticamente’.

Isso garantirá que seu código personalizado seja executado automaticamente em todos os lugares do seu site WordPress assim que você ativar o snippet.

Escolha um método de inserção

Em seguida, role de volta para o topo da página e simplesmente alterne o interruptor ‘Inativo’ para ‘Ativo’.

Finalmente, não se esqueça de clicar no botão ‘Salvar Snippet’ para salvar e executar seu snippet de código.

Salvar seu trecho de código

Agora, o carregamento preguiçoso padrão será desativado em seu site WordPress.

Antes de testar, certifique-se de limpar o cache do seu navegador e o cache do WordPress. Em seguida, você pode clicar com o botão direito em uma imagem e selecionar 'Inspecionar' no menu do navegador.

Você pode testar isso clicando com o botão direito em uma imagem e selecionando ‘Inspecionar’ no menu do navegador.

Carregamento preguiçoso desativado

No código HTML da imagem, o atributo ‘loading=lazy’ agora desaparecerá.

Método 2: Desativar o Carregamento Preguiçoso no WordPress Usando um Plugin

Se você não quiser adicionar código ao seu site, poderá usar um plugin para desativar o lazy loading do WordPress.

A única coisa que você precisa fazer é instalar e ativar o plugin Disable Lazy Load. Para mais instruções, confira nosso guia passo a passo sobre como instalar um plugin do WordPress.

Ativar plugin para desativar lazy load

O plugin funciona pronto para uso e não requer nenhuma configuração. Uma vez ativado, ele desativará automaticamente o recurso de carregamento lento padrão em seu site.

Tutorial em Vídeo

Se você não prefere instruções escritas, pode assistir ao nosso tutorial em vídeo:

Inscreva-se no WPBeginner

Bônus: Aumente a Velocidade e o Desempenho do Seu Site

Uma vez que você desativou o lazy loading, isso pode afetar negativamente a velocidade e o desempenho do seu site.

Nesse caso, você pode tentar outras dicas para aumentar o desempenho do seu site e diminuir o tempo de carregamento da página. Por exemplo, você pode otimizar as imagens do seu site comprimindo-as, usando JPEG ou PNG como formatos de arquivo, e muito mais.

Além disso, você deve sempre executar a versão mais recente do WordPress, usar resumos na página inicial, dividir comentários em páginas e usar temas otimizados para SEO em seu site.

O diretório de temas do WordPress.org

Além disso, você também pode usar plugins de cache como WP Rocket ou WP Super Cache para aumentar ainda mais a velocidade do seu site.

Para mais dicas, você pode conferir nosso guia para iniciantes sobre como aumentar a velocidade e o desempenho do WordPress.

Perguntas Frequentes Sobre Desativar o Carregamento Preguiçoso

Frequentemente recebemos perguntas de leitores sobre como o carregamento lento afeta o desempenho do site e quando ele deve ser desativado. Aqui estão as respostas para algumas das perguntas mais comuns.

1. Desativar o carregamento lento prejudicará minhas classificações de SEO?

Desativar o carregamento lento globalmente pode deixar seu site lento porque todas as imagens serão carregadas de uma vez. Como a velocidade da página é um fator de classificação para o Google, um site mais lento pode impactar negativamente seu SEO.

No entanto, desativar o carregamento lento apenas para sua imagem principal (o Maior Elemento de Conteúdo Pintado) pode, na verdade, melhorar suas pontuações das Core Web Vitals.

2. Posso desativar o carregamento lento apenas para imagens específicas?

Sim, você pode desativar o carregamento lento para imagens específicas (como seu logotipo ou imagem de cabeçalho). Para fazer isso, você pode adicionar manualmente o atributo loading="eager".

No editor de conteúdo do WordPress, basta selecionar o bloco de Imagem, clicar no menu de três pontos na barra de ferramentas e selecionar 'Editar como HTML' para adicionar o atributo.

Isso diz ao navegador para carregar essa imagem específica imediatamente, enquanto deixa o carregamento lento ativo para o restante do site WordPress.

3. O WordPress carrega imagens de fundo com carregamento lento?

Não, o recurso de lazy load padrão do WordPress se aplica apenas a imagens dentro de tags <img> e iframes. Imagens adicionadas como elementos de fundo usando CSS não são carregadas lentamente pelo software principal do WordPress.

4. É melhor usar um plugin ou código para desativar o lazy load?

Se você se sente confortável em colar trechos de código, usar o WPCode é o método melhor porque mantém seu site leve. No entanto, se você deseja uma solução rápida sem configurar nada, o plugin Disable Lazy Load é uma escolha segura e eficaz para iniciantes.

Recursos Adicionais

Esperamos que este artigo tenha ajudado você a aprender como desativar corretamente o lazy load no WordPress. Você também pode querer ver estes recursos adicionais:

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.

Aviso: Nosso conteúdo é apoiado pelos leitores. Isso significa que, se você clicar em alguns de nossos links, poderemos ganhar uma comissão. Veja como o WPBeginner é financiado, por que isso importa e como você pode nos apoiar. Aqui está nosso processo editorial.

O Kit de Ferramentas Definitivo para WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Interações do Leitor

6 CommentsLeave a Reply

  1. Obrigado pelo snippet. Depois que o PageSpeed Insights começou a me alertar sobre problemas de carregamento preguiçoso e me informou que era problemático para o meu site, tentei desativar o carregamento preguiçoso de várias maneiras. O site é construído no Elementor e nada funcionou corretamente. O snippet finalmente corrigiu o problema e agora o PageSpeed Insights não marca mais esse problema. Eu pensei que o carregamento preguiçoso seria melhor para o desempenho, mas de acordo com as medições no meu site e template, não foi. Este snippet me salvou.

  2. E desativar o carregamento preguiçoso APENAS na imagem em destaque (primeira imagem acima da dobra)? Existe uma maneira fácil?

    • Não temos uma recomendação para desativá-lo condicionalmente, mas se isso mudar, teremos certeza de compartilhar!

      Admin

Deixe uma resposta

Obrigado por escolher deixar um comentário. Por favor, tenha em mente que todos os comentários são moderados de acordo com nossa política de comentários, e seu endereço de e-mail NÃO será publicado. Por favor, NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.