Lazy Loading: um guia para publishers

O Lazy Loading ajuda você quer alto desempenho no seu site, vai precisar redimensionar e compactar as imagens corretamente antes de carregá-las. Portanto, neste artigo, você vai entender o princípio dessa técnica que adia o carregamento de imagens e vídeos e até anúncios, deixando-os “fora da tela” até que o usuário precise delas. Além disso, você também vai saber porque o Lazy Loading é uma boa prática de SEO e quando você deve implementá-lo no seu site.

Se você é um parceiro de anúncios da Grumft, seja bem-vindo ao nosso blog. Mas se ainda não é, esperamos que este conteúdo te motive a conhecer nossas soluções Full Service para websites.

Leia mais: Ad Network Full Service: o que é e quais as vantagens

O que é Lazy Loading

O objetivo do lazy loading é carregar uma imagens ou iframes apenas quando elas precisam ser exibidas aos usuários. Ou seja, eles não precisam esperar que todos os elementos da página sejam carregados para usar a página da web. Portanto, suas páginas mostrarão apenas imagens acima da dobra, o restante abre apenas quando o usuário rolar a página.

Em outras palavras, o Lazy Loading é um JavaScript que verifica a janela de visualização atual do visitante e carrega apenas imagens acima da dobra. Você pode aplicar esse script às suas imagens por meio de um plug-in ou programação. Essa é, sem dúvida, a melhor técnica para otimizar o desempenho percebido e real.

Leia mais: Manutenção de site em WordPress para publishers: importância e vantagens

Como uma página da Web carrega

Quando você pede ao navegador para abrir um URL, o fluxo é o seguinte:

• O clique em um link aciona uma solicitação;
• Os recursos (arquivos) da página serão baixados;
• O navegador constrói a página usando os recursos contidos nela;
• O usuário vê a página;

Recursos normalmente incluídos em uma página:

• HTML (de cerca de 15 a 120 KB de código)
• Arquivos JavaScript e CSS (de 5 a 200 KB de código)
• Imagens e iframes (se você não redimensionar, de 200 KB para cima)

As imagens e iframes geralmente são os últimos recursos a serem baixados na página e, às vezes, a parte mais pesada. Portanto, sua página não estará totalmente operacional até que o download de todas as imagens seja concluído.

 

 

Aplicação do Lazy Loading

O usuário pode usar uma página mesmo que nem todas as imagens e iframes tenham sido baixadas quando essa técnica é utilizada para otimizar o processo. Portanto, é isso acontece quando você usa o lazy loading:

1. Você começa a rolar enquanto lê o conteúdo da página;
2. Quando uma imagem deve aparecer na janela de visualização, uma imagem de espaço reservado ficará visível;
3. A imagem original substitui rapidamente a imagem de espaço reservado.

Dessa forma, quando as imagens são carregadas lentamente, elas são armazenadas em uma página, mas são cobertas por um “espaço reservado” do mesmo tamanho da imagem original. Ou seja, as imagens ficam sob o “espaço reservado” abaixo da dobra até que o usuário decida rolar a página para baixo.

Leia mais: Otimização de sites: SEO, Core Web Vitals, AMP e Google EAT

Benefícios da técnica

O Lazy Loading é importante e existem várias razões para você implementar, pois estão diretamente relacionadas à aceleração e otimização do seu site. Pontuamos alguns deles: 

• Melhora o tempo de carregamento percebido e real para suas páginas;
• Reduz o trabalho para o navegador;
• Diminui o número de solicitações HTTP durante o carregamento da primeira página;
• Consome menos dados servidos pelo servidor ou pela CDN;
• Economiza dados e largura de banda (especialmente do celular);

Leia mais: Core Web Vitals: como aumentar a receita de publicidade do site

Lazy Loading e SEO

Muitos dizem que o Lazy Loading pode ser crítico para SEO porque o Google pode excluir imagens carregadas lentamente da indexação. Mas isso depende, pois existem dois fatores para considerar:

1. Como implementar o Lazy Loading
2. Os recursos do rastreador do mecanismo de pesquisa

Quanto à implementação de lazy load: em primeiro lugar, o Lazy Loading nativo é um formato compatível com SEO porque mantém a propriedade src visível para que os mecanismos de pesquisa considerem. Na verdade, o atributo src é essencial para permitir que os mecanismos de busca verifiquem e indexem as imagens.

Em segundo lugar, outro atributo de imagem a ser considerado é a propriedade srcset, que não é legível por todos os mecanismos de pesquisa. É por isso que é uma prática recomendada adicionar um ‘src’ como fallback, pois quando você faz isso, garante que o Lazy Loading não vai afetar a indexação da imagem.

Para garantir que os mecanismos de pesquisa indexam corretamente suas imagens (independentemente do Lazy Loading), você também deve usar um mapa do site de imagens. 

Quanto aos recursos do rastreador do mecanismo de pesquisa: alguns mecanismos de pesquisa, como o Google, podem disparar JavaScript enquanto verificam a página. Esses funcionarão bem com Lazy Loading orientado por JavaScript e  Lazy Loading nativo. Por outro lado, alguns mecanismos de pesquisa não acionam o JavaScript enquanto verificam as páginas. Para cobrir esses, você deve adicionar a imagem normal com a tag src preenchida dentro de uma tag <noscript> (que é legível quando os navegadores têm o JavaScript desativado). Você pode encontrar um código de exemplo no GitHub.

No geral, o Lazy Loading é uma boa prática para SEO e não há impacto negativo se implementado corretamente. Além do mais, em seu próprio guia do desenvolvedor o Google promove o lazy loading.

 

Leia mais: Atualização de software do site: por que é tão importante?

Quando usar e como usar Lazy Loading

Você deve usar o lazy loading para as imagens abaixo da dobra, pois essa técnica reduzirá o tempo de carregamento real e percebido e a experiência do usuário será melhor.

Não use o lazy loading para as imagens acima da dobra, pois ele retarda o carregamento das imagens que precisam ser carregadas imediatamente, afetando o LCP de conteúdo, por exemplo. 

Você pode usar Lazy Loading  manualmente e com plugins. Se você tem algum conhecimento técnico e deseja implementá-lo você mesmo, pode consultar um guia manual como CSS-tricks .

Por outro lado, se você deseja economizar tempo e encontrar uma solução fácil para o seu site WordPress, pode escolher um plugin de Lazy Loading. Você também pode usar um plugin de cache para carregar suas imagens enquanto acelera seu site.

Leia mais: Como a estrutura do site pode afetar o SEO

Como verificar se o Lazy Loading está funcionando

Abra o Chrome DevTools para ter certeza que o Lazy Loading está funcionando corretamente. Verifique se as imagens não são carregadas até a rolagem, por isso, siga os passos a seguir:

• Abra o Chrome DevTools, vá para a guia Rede e o filtro Img. Neste ponto, recarregue a página. Você deve ver apenas as imagens acima da dobra incluídas na lista de imagens.

Ao começar a rolar a página, você verá as imagens abaixo da dobra aparecendo na lista uma após a outra. Você também encontrará os dados de carga lenta na coluna Iniciador. Significa que as imagens foram carregadas somente após a rolagem do usuário. O carregamento lento está funcionando corretamente.

 

Leia mais: O que é Fill Rate e como você pode otimizá-lo

Pensamentos finais

Resumindo, neste artigo, você aprendeu a base do Lazy Loading, por que e quando implementá-lo. Acima de tudo, conte com a Grumft para continuar a apoiá-lo. ​​​