WordPress lazy loading: como implementá-lo em seu site

Se o seu site WordPress depende muito de conteúdo visual, você pode adicionar a funcionalidade de lazy loading a ele. Esse recurso do WordPress ajuda a melhorar a velocidade e o desempenho das suas páginas, o que o torna essencial para seus esforços de SEO.

Este artigo irá explorar como o lazy loading funciona no WordPress, junto dos seus prós e contras. Você também aprenderá como implementá-lo em seu site e as formas de otimizar seu uso para obter melhores resultados.

Como Funciona o Lazy Loading no WordPress?

Quando um usuário visita um site do WordPress, seu navegador baixa todas as imagens da página de uma só vez. Para páginas com muitas imagens de alta resolução, esse processo pode aumentar significativamente o tempo de carregamento, prejudicando o desempenho do seu site.

Adicionar lazy loading ao seu site solicita que ele baixe apenas as imagens visíveis na tela do usuário. O restante dos arquivos de mídia são substituídos por um espaço reservado para as imagens e são carregados apenas quando o usuário rola mais para baixo na página.

Prós e Contras do Lazy Loading no WordPress

Se você ainda está se perguntando se deve implementar lazy loading de imagens no WordPress, aqui estão os prós e contras do recurso:

Prós:

• Reduz o uso de largura de banda, diminuindo os custos de hospedagem.
• Aumenta a velocidade do site, tornando a experiência de navegação dos visitantes melhor.
• Refina a experiência em dispositivos móveis.
• Otimiza a maior pontuação de Largest Contentful Paint.
• Melhora os esforços de SEO, aumentando o ranqueamento do seu site em motores de busca.

Contras:

• Causa buffer de conteúdo, prejudicando a velocidade de carregamento.
• Retarda a rolagem rápida.

Como Adicionar o Lazy Loading ao seu Site WordPress: 3 Métodos

Existem três maneiras de implementar o lazy loading em seu site WordPress. Recomendamos escolher a que melhor se adapte à sua situação.

1. Atualize para o WordPress 5.4 ou Superior

As versões do WordPress 5.4 e superiores incluem por padrão o lazy loading para imagens. Atualizar seu WordPress para a versão mais recente ativará automaticamente a funcionalidade.

Apesar de ser o método mais fácil, ele não permite configurar quais imagens carregam lentamente. Consequentemente, seu site pode abusar do recurso, manifestando os pontos negativos mencionados acima.

Outro fator a ser considerado é a natureza diferente do recurso de lazy loading em cada versão do WordPress. Recentemente, o WordPress postou que a versão 5.9 implementa refinamentos para resolver os problemas com pontuações ruins de Large Contentful Paint de versões mais antigas.

Isso significa que sites executados em versões mais antigas do WordPress não obtêm os mesmos benefícios que aqueles que usam o WordPress 5.9.

2. Ative o Lazy Loading Nativo pelo Navegador

Navegadores populares como Chrome, Firefox e Opera suportam lazy loading de imagem nativa. Você só precisa adicionar o atributo de carregamento <img loading= “lazy”> às imagens e vídeos desejados para ativá-lo automaticamente.

No lazy loading nativo, o atributo de carregamento suporta estes três valores:

• Auto ‒ aciona o lazy loading padrão, que é o mesmo que não incluir um atributo de carregamento.
• Lazy ‒ distribui o carregamento dos ativos até que cada um atinja a distância especificada da janela de visualização.
• Eager ‒ carrega todos os ativos assim que a página é carregada, independentemente de sua localização.

Aqui está um exemplo de como usá-lo:

<img src=”image-name.png” loading=”lazy” alt=”alt attribute” width=”200″ height=”200″>

Esse método é ideal para o lazy loading de certas imagens, dando a cada uma um atributo de carregamento que determina seu tempo de aparição na janela de visualização. No entanto, pode levar algum tempo para carregar imagens individuais com a funcionalidade, especialmente se o seu site tiver muitos arquivos de mídia.

3. Instale um Plugin

Como nem todos os navegadores suportam lazy loading para imagens e vídeos, o segundo método pode não funcionar o tempo todo. Você pode mitigar esse problema instalando um plugin de lazy loading no seu WordPress. Esse método oferece mais controle sobre quais imagens carregar lentamente, mas sem precisar mexer com códigos.

A seguir, estão os melhores plugins de lazy loading do WordPress para você escolher. Todos podem ser encontrados através do diretório de plugins da plataforma.

Otimização de imagem e lazy loading da Optimole

Um dos pontos positivos do Optimole é que ele suporta todos os tipos de imagem, incluindo AVIF. Este plugin freemium de lazy loading fornece otimização e dimensionamento de imagens do WordPress para ajustá-las aos dispositivos dos visitantes, garantindo uma ótima experiência do usuário.

Quando detecta uma rede mais lenta, o Optimole oferece a opção de reduzir a qualidade da imagem. Além disso, você pode economizar espaço de armazenamento ao salvar imagens na biblioteca em nuvem do Optimole.

O plugin gratuito permite otimizar imagens para até 5 mil visitas mensais. A compra do plano Pro permite que você carregue imagens lentamente para 25 mil visitantes ativos mensais e muito mais. As imagens em ambos os planos são veiculadas por meio do AWS Cloudfront CDN.

Smush

Smush é um popular plugin de otimização de imagem que suporta lazy loading. É compatível com temas populares, construtores de páginas e plugins de biblioteca de mídia. Além disso, permite salvar as configurações do plugin de maneira ilimitada e aplicá-las em apenas alguns cliques.

Outros recursos úteis incluem detecção de tamanho de imagem incorreto, suporte a vários sites e ferramentas de compactação de imagem. A atualização para o Smush Pro permite otimizar imagens grandes sem limitações de tamanho, fazer backup de imagens originais e acessar outros plugins WPMU Pro. Os preços partem de US$ 5/mês.

a3 Lazy Load

a3 Lazy Load é um plugin WordPress gratuito de lazy loading orientado para dispositivos móveis. É totalmente compatível com o WordPress 5.9 e várias ferramentas populares, incluindo plugins WebP e AMP.

Além de oferecer recursos básicos de lazy loading de imagem, o a3 Lazy Load também permite carregar vídeos lentamente — incluindo vídeos incorporados em páginas, postagens, tipos de postagem personalizadas e widgets. Efeitos de lazy loading e a opção de carregar scripts do cabeçalho ou rodapé também estão disponíveis.

Outros recursos notáveis ​​incluem suporte multisite, suporte a imagens WebP e lazy loading de iframe – ele se aplica a iframes que o núcleo do WordPress não carrega, como Google Maps e mídia incorporada.

Dicas de Lazy Loading do WordPress

A chave para tirar o máximo proveito do lazy loading é usá-lo corretamente. Aqui estão algumas dicas na hora de implementar a funcionalidade em seu site WordPress:

• Não carregue imagens com lazy loading acima da dobra. Como as imagens colocadas no topo da página ficam visíveis ao carregar, o lazy loading não traz nenhum benefício.
• Escolha espaços reservados apropriados. Recomendamos usar uma cor sólida e dominante ou uma imagem de baixa qualidade como espaço reservado para suas imagens.
• Adicione tempo de buffer para carregamento de imagem. Dessa forma, suas imagens ficam prontas logo antes de entrar na janela de visualização dos visitantes, eliminando qualquer tempo de espera.
• Defina as dimensões para contêineres de imagem. Isso ajudará a evitar mudanças repentinas de layout, fazendo com que sua página da Web pareça organizada ao ser carregada.
• Implemente o lazy loading apenas em páginas longas. As páginas longas incluem aquelas que levam mais de duas rolagens para chegar ao final e têm mais de cinco imagens abaixo da dobra.

Conclusão

O lazy loading de imagens no WordPress permite que você ofereça uma melhor experiência de navegação aos seus visitantes. Além de melhorar a velocidade do site, esse recurso também reduz o uso de largura de banda. No geral, contribui para seus esforços de SEO em busca de ranqueamentos melhores em buscadores.

Esperamos que este artigo tenha ajudado você a entender como aproveitar ao máximo o recurso de lazy loading no WordPress. Certifique-se de usar um servidor WordPress de alta qualidade para melhorar ainda mais o desempenho do seu site. Boa sorte!

All of the tutorial content on this website is subject to Hostinger's rigorous editorial standards and values.