AD Network Full Service
  • HOME
  • BLOG
  • CONTATO
  • CLIENTES
  • LOGIN
  • CADASTRE-SE
  • IDIOMA
    • PORTUGUÊS
    • INGLÊS
    • ESPANHOL
  • 3 de fevereiro de 2022
  • 8
  • Blog, Otimização do Site
  • Atualizado em 10 de maio de 2022 às 9:54
  • 6 min
  • By Fernanda Calandro

Lazy Loading: um guia para publishers

  • Home »
  • Blog »
  • Lazy Loading: um guia para »
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.

Lazy Loading de imagem

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

Sumário

  • 1 O que é Lazy Loading
    • 1.1 Como uma página da Web carrega
    • 1.2 Aplicação do Lazy Loading
  • 2 Benefícios da técnica
  • 3 Lazy Loading e SEO
  • 4 Quando usar e como usar Lazy Loading
    • 4.1 Como verificar se o Lazy Loading está funcionando
  • 5 Pensamentos finais

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.

 

Lazy Loading de imagem

 

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.

 

Lazy Loading de imagem

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.

 

Lazy Loading de imagem

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. ​​​

Quer receber nossos conteúdos?

Tags : Core Web Vitals, implementar Lazy Loading, Lazy Loading, lazy loading chrome, lazy loading html, lazy loading images, lazy loading javascript, lazy loading wordpress
Categories: Blog, Otimização do Site

Comments (8)

  1. Posição de anúncios: 7 dicas para melhorar o viewability - Programmatic Media

    at 10 de fevereiro de 2022

    […] Leia mais: Lazy Loading: o que é e quando implementar […]

  2. Google Ad Exchange (Adx) ou Google AdSense? Entenda a diferença - Programmatic Media

    at 12 de fevereiro de 2022

    […] Leia mais: Lazy Loading: o que é e quando implementar […]

  3. Parceiro Google AdX: como escolher? - Programmatic Media

    at 13 de fevereiro de 2022

    […] Leia mais: Lazy Loading: o que é e quando implementar […]

  4. 3 ferramentas que ajudam melhorar e aumentar o tráfego do site - Programmatic Media

    at 13 de fevereiro de 2022

    […] Leia mais: Lazy Loading: o que é e quando implementar […]

  5. Viewability e Active View: como otimizar essa métrica no seu site - Programmatic Media

    at 14 de fevereiro de 2022

    […] Leia mais: Lazy Loading: o que é e quando implementar […]

  6. Google AdSense, Ad Manager e AdMob: entenda a diferença na monetização - Programmatic Media

    at 15 de fevereiro de 2022

    […] Leia mais: Lazy Loading: o que é e quando implementar […]

  7. AdBlocker: 8 maneiras de amenizar a perda de receita - Programmatic Media

    at 15 de fevereiro de 2022

    […] Leia mais: Lazy Loading: o que é e quando implementar […]

  8. Ad tags inteligentes: soluções da Grumft para você - Programmatic Media

    at 15 de março de 2022

    […] Leia mais: Lazy Loading: o que é e quando implementar […]

Comments are closed.

A GRUMFT é uma rede de anúncios de mídia programática (Ad Network), que traz receita premium em display e vídeo versões mobile, desktop e AMP, com a mesma configuração fácil e rápida que o Google Adsense.

Endereço

Rua Girassol, 925 - Vila Madalena

São Paulo | SP | Brasil

Código de conduta

Download







FALE CONOSCO



  • HOME
  • BLOG
  • CONTATO
  • CLIENTES
  • LOGIN
  • CADASTRE-SE
  • IDIOMA
    • PORTUGUÊS
    • INGLÊS
    • ESPANHOL

Controle sua privacidade

Esse site utiliza cookies  Leia mais

Aceitar