Guia completo para Lazy Load: maximize a monetização do seu site com essas dicas

This post was most recently updated on dezembro 8th, 2023

O mercado de monetização de conteúdo na web está em constante evolução, com novas estratégias e técnicas emergindo a cada dia. Uma dessas estratégias que tem ganhado destaque nos últimos anos é o “lazy load” (carregamento lento). 

Neste artigo, exploraremos o que é lazy load e como os editores de conteúdo monetizado podem tirar o máximo proveito dessa técnica.

O que é lazy load?

É uma técnica de otimização de desempenho que adia o carregamento de recursos não essenciais, como imagens, vídeos e scripts, até que o usuário role a página e os elementos se tornem visíveis. Em vez de carregar todo o conteúdo de uma só vez, o lazy loading carrega o mínimo necessário para exibir a parte inicial da página, permitindo que o restante do conteúdo seja carregado gradualmente conforme o usuário interage com a página.

Essa abordagem ajuda a reduzir o tempo de carregamento da página e a economizar largura de banda, o que é benéfico tanto para os editores quanto para os usuários. 

A melhoria na velocidade de carregamento também é um fator importante para melhorar a classificação nos mecanismos de busca, uma vez que o Google considera o desempenho da página em seu algoritmo de classificação.

Como o lazy load beneficia os editores de conteúdo monetizado?

O lazy loading pode ter um impacto significativo na monetização de conteúdo online. Aqui estão algumas maneiras pelas quais os editores de conteúdo monetizado da MonetizeMore podem se beneficiar com essa técnica:

1. Melhora a experiência do usuário

A experiência do usuário é fundamental para reter os visitantes e incentivar o envolvimento com o conteúdo. Ao adiar o carregamento de elementos pesados, como imagens e vídeos, os usuários podem acessar o conteúdo inicial mais rapidamente, reduzindo a taxa de rejeição e aumentando o tempo gasto na página. Isso pode levar a uma audiência mais engajada e, consequentemente, a um aumento nas oportunidades de monetização.

2. Aumenta a velocidade de carregamento

Páginas mais rápidas não apenas proporcionam uma experiência melhor para o usuário, mas também são mais atraentes para os anunciantes. Anúncios carregam mais rapidamente em páginas com lazy loading, o que pode resultar em uma melhor experiência para os anúncios e, por sua vez, em taxas de cliques mais altas.

3. Reduz custos de largura de banda

Ao adiar o carregamento de elementos de página não visíveis, você economiza largura de banda, o que pode ser especialmente benéfico para sites com um grande número de visitantes. Isso pode resultar em economia significativa de custos, uma vez que a largura de banda é frequentemente um dos maiores custos operacionais para os editores de conteúdo.

4. Otimiza o carregamento de anúncios

Lazy loading não se aplica apenas a conteúdo, mas também a anúncios. Ao adiar o carregamento de anúncios até que sejam visíveis na tela do usuário, você pode garantir que os anúncios sejam exibidos de maneira eficaz, maximizando a receita publicitária.

Implementando o Lazy Load 

A implementação do lazy load pode ser realizada de várias maneiras, e a escolha dependerá da plataforma, do CMS (Sistema de Gerenciamento de Conteúdo) que você está usando e das necessidades específicas do seu site. Aqui estão algumas etapas gerais para implementar o lazy loading em seu site:

1. Avaliação de recursos

Identifique os recursos em seu site que podem se beneficiar do lazy loading. Isso pode incluir imagens, vídeos, anúncios, scripts e outros elementos que não são necessários imediatamente na exibição inicial da página.

2. Escolha de ferramentas

Escolha as ferramentas e tecnologias necessárias para implementar o lazy loading. Existem muitos plugins e bibliotecas disponíveis para facilitar a implementação, dependendo da plataforma de seu site. O Wordpress, por exemplo, tem um recurso nativo, o que significa que, ao ativá-lo, você já terá acesso ao lazy loading.

3. Configuração

Configure as regras de lazy loading de acordo com suas necessidades. Você pode especificar quais elementos devem ser carregados de forma preguiçosa e definir critérios para o carregamento, como a proximidade do elemento à área visível da página.

4. Teste e ajuste

Após a implementação, teste o desempenho do seu site para garantir que o lazy loading funcione conforme o esperado. Faça ajustes conforme necessário para otimizar o desempenho e a experiência do usuário.

5. Monitore o impacto

Acompanhe o impacto do lazy loading em suas métricas de monetização, incluindo o aumento na velocidade de carregamento da página, o engajamento do usuário e a receita publicitária. Use esses dados para fazer ajustes e refinamentos contínuos.

Recomendações do Google para implementação do lazy load

Além da separação do código em bundles através de tags específicas para cada linguagem, o Google faz algumas recomendações para a implementação e teste do lazy loading para que tenha-se a garantia de que os recursos serão carregados no momento certo.

• Lazy loading de imagens e iframes;
• Biblioteca JS compatível com os dados na janela de visualização;
• Instalação do API Intersection Observer para realização de teste que permite ao administrador saber de fato quando um usuário está olhando para um anúncio, por exemplo;
• Inclusão do Polyfill para que o lazy loading seja compatível com navegadores mais antigos e desatualizados.

Vale lembrar que, se for bem feita, a implementação do lazy loading no site não afetará a indexação da página através dos bots do Google. Para que não haja nenhuma dúvida se suas atualizações continuam a ser ranqueadas, mantenha um sitemap atualizado.

Algumas estratégias mais comuns de implementação do lazy load

Divisão de Código (HTML, JavaScript, CSS):

• HTML: Para páginas da web com muito conteúdo, você pode dividir o conteúdo em partes distintas e carregar apenas a seção visível inicialmente. Conforme o usuário rola a página, carregue mais conteúdo sob demanda. Isso pode ser feito usando divs ou contêineres separados para seções de conteúdo, carregando o próximo contêiner quando o usuário chega perto dele.
• JavaScript: Utilize a divisão de código com a técnica “Code Splitting”. Plataformas como Webpack e Babel oferecem suporte para dividir seu código JavaScript em módulos menores, que são carregados somente quando necessário.
• CSS: A técnica “Critical CSS” envolve carregar apenas as regras de estilo críticas para a parte visível inicial da página. As regras de estilo adicionais podem ser carregadas à medida que o usuário rola a página.

Lazy loading de imagens e iframes:

• Atributo HTML “loading”: uma abordagem simples é usar o atributo HTML “loading” nas tags de imagem. Defina “loading” como “lazy” para garantir que as imagens só sejam carregadas quando forem visíveis na janela de visualização do usuário.

<img  src=”imagem.jpg” alt=”Descrição da Imagem” loading=”lazy”>

• JavaScript: use JavaScript para identificar imagens que estão visíveis na janela do navegador e, em seguida, carregue-as dinamicamente. Isso requer a implementação de eventos de rolagem na página e lógica para carregar as imagens sob demanda.
• API Intersection Observer: você pode usar a API Intersection Observer para controlar o carregamento de imagens e iframes com base em seu posicionamento na página. Isso oferece um controle mais granular e preciso.

javascript

const observer = new IntersectionObserver((entries) => { 

             entries.forEach((entry) => { 

                    if (entry.isIntersecting) { 

                          const element = entry.target; 

                          element.src = element.dataset.src;    

                          observer.unobserve(element); 

                     } 

              }); 

}); 

document.querySelectorAll(‘img[data-src]’).forEach((img) => { 

           observer.observe(img); 

});

Lazy Loading de Fontes:

• Use a propriedade `font-display` na declaração `@font-face` no CSS para controlar como as fontes são carregadas. A configuração “swap” permite que o navegador mostre uma fonte de fallback até que a fonte principal esteja disponível.

css

@font-face { 

           font-family: ‘MinhaFonte’; 

           src: url(‘minhafonte.woff2’) format(‘woff2’);

           font-display: swap; 

}

Lazy loading de vídeos:

• Elemento HTML “video”: o elemento HTML “video” suporta o atributo “loading” da mesma forma que as imagens. Configure-o como “lazy” para atrasar o carregamento do vídeo até que ele esteja visível.

<video src=”video.mp4″ controls loading=”lazy”>

• JavaScript: da mesma forma que com imagens, o carregamento preguiçoso de vídeos pode ser implementado com JavaScript, monitorando a posição do vídeo na página e iniciando o carregamento quando ele estiver próximo da visibilidade.

Lazy loading de anúncios:

• Ad tags: alguns sistemas de anúncios permitem o carregamento de anúncios de forma preguiçosa, atrasando o carregamento até que o anúncio esteja visível na janela do navegador. Consulte sua rede de anúncios ou servidor de anúncios para saber se essa opção está disponível.
• JavaScript customizado: se sua rede de anúncios não oferecer suporte nativo ao lazy loading, é possível criar uma solução personalizada com JavaScript. Isso pode ser feito monitorando a visibilidade dos espaços publicitários na página e solicitando os anúncios quando eles estiverem prestes a serem exibidos.

Lazy loading de scripts:

• Async e Defer: quando possível, use os atributos “async” e “defer” em elementos <script> para controlar o momento do carregamento de scripts. O atributo “async” permite que o script seja baixado sem bloquear o carregamento da página, enquanto o “defer” faz o download do script, mas o executa apenas após o carregamento da página.

<scrip src=“seuscript.js” async></script>

• Dinamicamente com JavaScript: use JavaScript para carregar scripts dinamicamente quando necessário, com base em interações do usuário ou outros eventos. Essa abordagem é especialmente útil para scripts que não são essenciais durante o carregamento inicial da página.

Polyfill:

• Se você precisa dar suporte a navegadores mais antigos que não possuem suporte nativo ao lazy loading, pode implementar um polyfill. O LazyLoad é um exemplo de biblioteca JavaScript que oferece suporte ao lazy loading em navegadores que não o suportam nativamente.
• Exemplo de uso do LazyLoad:

html

<img data-src=”imagem.jpg” class=”lazyload” alt=”Descrição da Imagem”> <scriptsrc=”lazyload.min.js”></script> 

<script> 

    lazyload(); 

</script>

Dicas dos gurus da M2

Ufa, cansados? Mas temos mais. 

Se não bastasse todo esse guia, nós trouxemos mais uma surpresa. Aqui estão dicas adicionais que os especialistas da MonetizeMore podem oferecer aos publishers sobre o lazy load, complementando as informações fornecidas anteriormente:

Seja estratégico com o lazy loading:

• Não aplique o lazy loading de forma indiscriminada. Em vez disso, identifique os elementos críticos que podem se beneficiar mais com a técnica, como imagens pesadas, anúncios ou conteúdo dinâmico.

Limite as requisições de terceiros:

• Esteja ciente de que o lazy loading pode resultar em um aumento no número de requisições de terceiros, como redes de anúncios e scripts de análise. Monitore essas requisições de perto e, se possível, otimize ou reduza o número delas para evitar impactos negativos no desempenho da página.

Considere a latência da rede:

• Lembre-se de que a latência da rede pode afetar a eficácia do lazy loading. Em áreas com conexões de internet mais lentas, o atraso na exibição de recursos pode ser mais perceptível. Adapte sua estratégia de lazy loading para garantir uma experiência satisfatória em diferentes cenários de conectividade.

Teste diferentes estratégias de lazy loading:

• Não tenha medo de experimentar e testar diferentes estratégias de lazy loading. Cada site é único, e o que funciona para um pode não funcionar para outro. A realização de testes A/B e a análise dos resultados podem ajudar a identificar a abordagem mais eficaz para o seu público e conteúdo específico.

Otimização da tecnologia lazy:

• Ao implementar o lazy loading, ajuste um parâmetro relacionado à viewport para controlar quando o navegador solicita recursos preguiçosamente carregados. Adapte esse parâmetro com base no comportamento do usuário: para rolagens rápidas, ative os recursos a 1-2 viewports de distância do conteúdo; para rolagens mais lentas, atrasos como o de 0,5-1 viewport do conteúdo podem ser considerados.

Ao seguir essas dicas, os publishers podem implementar o lazy loading de forma eficaz, aprimorar a monetização e proporcionar uma experiência mais ágil e agradável aos usuários. A equipe de AdOps da MonetizeMore desempenha um papel crucial em orientar os publishers para alcançar o equilíbrio certo entre desempenho e monetização por meio do lazy loading e outras estratégias e tecnologias.

Caminho do sucesso

Para se destacar, crescer e conquistar seu lugar no cenário da monetização online, é necessário aproveitar constantemente as vantagens do lazy load e outras técnicas, além de ter um parceiro de monetização experiente e transparente.

Ser um parceiro da MonetizeMore significa estar disposto a abraçar as melhores práticas, adotar novas tecnologias e estratégias, e colocar o usuário no centro de tudo o que fazemos. É um compromisso com a experiência do usuário, a otimização de desempenho e a busca incessante pela maximização da monetização.

Se você é um editor de conteúdo que se destaca em seu nicho, está disposto a se aprimorar constantemente e a entregar um conteúdo de alta qualidade, então a MonetizeMore está pronta para ser sua parceira no caminho do sucesso. Inscreva-se hoje mesmo!