Lazy Load: o que é e sua importância para otimização e monetização de sites

Com o número de usuários de dispositivos móveis crescendo exponencialmente, itens como a velocidade de carregamento das páginas ganharam muita importância. E soluções como o Lazy Load surgiram para aprimorar a experiência dos usuários.

 

Pesquisas apontam que sites e portais que demoram pra carregar geram altas taxas de rejeições, o que pode causar impactos não só no número de acessos – mas também no seu faturamento.

 

Vamos embarcar em um exercício de faz de conta: imagine que você está na rua, utilizando uma rede wi-fi pública ou seu 3G, com instabilidade de conexão. Você precisa buscar uma informação com urgência, usa o Google, clica no primeiro resultado e… nada.

 

Quanto tempo você espera pra página carregar? Nesse cenário, 5 ou 10 segundos parecem uma eternidade.

 

É bem provável que você feche a página, retorne ao buscador, e tente novamente. Não se sinta sozinho: segundo uma pesquisa realizada pelo Aberdeen Strategy & Research, 40% dos usuários abandonam um site após meros dois segundos de espera.

 

Esse cenário hipotético, entretanto, é impreciso. Pois um site que tem problemas de carregamento dificilmente estará no topo das buscas do Google, já que a velocidade é um dos itens avaliados pelo algoritmo da empresa.

 

Visando oferecer uma melhor experiência aos usuários, a gigante da internet leva a agilidade da entrega em consideração na hora de definir quem vai ocupar as primeiras posições da busca.

 

Ou seja, ter problemas de lentidão no carregamento das informações é prejudicial para o seu conteúdo em diversos sentidos: não só coloca todo o seu esforço em otimização em risco, como também gera altas taxas de rejeição da audiência.

 

Mas como resolver isso e oferecer uma melhor experiência para os usuários?

 

Hoje vamos falar sobre o Lazy Load e como ele é importante para manter a boa performance do seu conteúdo![O que é Lazy Load?

 

O Lazy Load (também conhecido como Lazy Loading, ou “carregamento preguiçoso”, em bom português) é uma técnica de programação que ajuda as páginas a exibirem seus conteúdos de maneira mais ágil e eficiente.

 

Com a evolução dos smartphones, que produzem imagens em resolução cada vez maior, o Lazy Load consiste em exibir os arquivos mais pesados no final do carregamento, ou apenas quando entram no campo de visão do usuário.

 

Se você visita uma página onde o conteúdo é ilustrado com uma foto em alta resolução, o Lazy Load vai dar prioridade a carregar todos os outros elementos para que o site abra mais rapidamente.

 

Apesar de ser uma técnica relativamente antiga, o Lazy Load se tornou mais acessível através de uma tag criada a partir da API Intersection Observer.[

 

Os benefícios de usar o Lazy Load

Adotar o Lazy Load em seu site ou portal pode ser extremamente benéfico. Confira algumas vantagens de adotar o método na programação do seu conteúdo:

 

– Melhoria no SEO

Como você já deve saber, a velocidade de carregamento de uma página é crucial para o bom desempenho nas buscas. E usar uma técnica como o Lazy Load potencializa as suas ações de SEO, já que a velocidade melhora consideravelmente.

Ao oferecer uma boa experiência aos usuários e ter uma taxa de rejeição menor, o Google entende que sua página cumpre os requisitos da empresa – e ela passa a aparecer cada vez mais no topo das buscas.

 

O uso do Lazy Load diminui a latência (o atraso para carregamento de determinados elementos da página), portanto a tendência é que o seu site tenha um melhor desempenho nos Core Web Vitals, as métricas do Google que avaliam a qualidade de experiência do usuário que sua página proporciona.

 

– Melhor experiência de usuário

Quando sua página carrega mais rapidamente, o usuário tem uma experiência melhor navegando por seu conteúdo. Isso porque o número de acessos através de dispositivos móveis é cada vez maior, e a instantaneidade é crucial para manter a atenção dos internautas.

 

Ninguém quer ficar olhando para uma tela em carregamento por muito tempo, né?

 

E a experiência do usuário é fundamental para ter um bom desempenho, tanto do ponto de vista editorial quanto financeiro. Uma página que carrega rapidamente e entrega conteúdo de qualidade é sucesso na certa!

 

– Aumento de receita

Quanto mais usuários envolvidos com a sua página e seu conteúdo, melhor será o seu faturamento. Simples assim.

Pois, dessa maneira, você aumenta a fidelização dos leitores e, consequentemente, a visualização e engajamento com os anúncios implementados em seu site.

 

Estratégias de implementação do Lazy Load

O Lazy Load pode ser aplicado a vários recursos e por meio de diversas estratégias. O WordPress, por exemplo, incluiu o recurso nativo a partir da versão 5.5. Isso significa que não é necessário fazer absolutamente nada para ter o Lazy Loading no carregamento da sua página.

 

Caso você não utilize o WordPress, ou use uma versão anterior, existem outras maneiras para implementar o Lazy Load.

Confira algumas delas, recomendadas pela Mozilla:

 

Divisão de código

Códigos como JavaScript, CSS e HTML podem ser divididos em pedaços menores. Isso permite o envio do código mínimo necessário para fornecer valor antecipadamente, melhorando os tempos de carregamento da página. O resto pode ser carregado sob demanda.

– Divisão de ponto de entrada: separa o código por ponto(s) de entrada no aplicativo

– Divisão dinâmica: separa o código onde as instruções dynamic import são usadas

 

JavaScript

Qualquer tag de script com o código type=”module” é tratada como um módulo JavaScript e é adiada por padrão.

 

CSS

Por padrão, o CSS é tratado como um recurso de bloqueio de renderização. Portanto, o navegador não renderizará nenhum conteúdo processado até que o CSSOM seja construído. O CSS deve ser leve, entregue o mais rápido possível, e os tipos de mídia de uso e consultas são aconselhados a desbloquear a renderização.

<link href = “style.css” rel = “stylesheet” media = “all”>

<link href = “portrait.css” rel = “stylesheet” media = “orientação: retrato”>

<link href = “print.css” rel = “stylesheet” media = “print”>

É possível realizar algumas otimizações CSS para conseguir isso.

 

Fontes

Por padrão, as solicitações de fontes são atrasadas até que a árvore de renderização seja construída, o que pode resultar em atrasos na renderização do texto.

É possível substituir o comportamento padrão e pré-carregar recursos de fonte da web usando <link rel = “preload”>, a propriedade CSS font-display e a API de carregamento de fonte.

 

Imagens e iframes

Muitas vezes, as páginas da web contém muitas imagens que contribuem para o uso de dados e a demora de carregamento de uma página. Muitas dessas imagens estão fora da tela (não críticas), exigindo interação do usuário (por exemplo, a rolagem) para visualizá-las.

O atributo de carregamento em um elemento <img> (ou o atributo de carregamento em um <iframe>) pode ser usado para instruir o navegador a adiar o carregamento de imagens / iframes que estão fora da tela até que o usuário role para perto deles.

<img src = “image.jpg” alt = “…” loading = “lazy”>

<iframe src = “video-player.html” title = “…” loading = “lazy”> </iframe>

 

O carregamento é disparado quando o conteúdo exibido anteriormente é totalmente carregado. Naquele momento, é totalmente possível (ou até provável) que possam haver imagens carregadas lentamente que estão dentro da janela de visualização visual, mas que ainda não foram carregadas.

 

Você pode determinar se uma determinada imagem terminou de carregar examinando o valor de sua propriedade booleana completa.

 

Polyfill

Inclua este polyfill para fornecer suporte para navegadores mais antigos e atualmente incompatíveis: loading-attribute-polyfill

 

API Intersection Observer

A API Intersection Observer permite que o usuário saiba quando um elemento entra ou sai da janela de visualização do navegador.

 

Cuidados na implementação do Lazy Load

Apesar de toda a importância do Lazy Load, é importante ter alguns cuidados na implementação da técnica em seu site ou portal.

 

Segundo o Google, é fundamental realizar testes com frequência para garantir que os elementos são exibidos aos usuários no momento certo.

 

Digamos que você possui um e-commerce e usa o Lazy Loading: não ter as imagens dos produtos exibidas enquanto o usuário rola a página pode ser extremamente prejudicial para seu negócio, além de entregar uma experiência ruim para o consumidor.

 

Além disso, o conteúdo deve ser visível para os bots que fazem o rastreamento do conteúdo para a indexação do Google.

 

A empresa recomenda fortemente que os publishers se certifiquem de que o conteúdo seja exibido corretamente para o Googlebot.

 

Uma das maneiras de fazer isso é ter uma biblioteca Javascript compatível com o carregamento de dados na janela de visualização.

 

O Google recomenda também o uso de carregamento lento nativo para imagens e iframes, além do uso da API Intersection Observer e polyfill.

 

Para testar a implementação, a dica do Google é o uso do script Puppeteer. Clique aqui para ver como usar o script.

 

Outra dica é o uso da ferramenta de inspeção de URL no Google Search Console para verificar como anda a exibição das imagens na sua página.

 

Dicas da Alright para a implementação do Lazy Load

Usar o Lazy Load impacta diretamente na performance dos publishers no Core Web Vitals, as métricas do Google que avaliam o nível de experiência dos usuários em sua página.

 

O Core Web Vitals é cada vez mais importante para o bom desempenho dos sites e portais, portanto é fundamental ter bons resultados em LCP (Largest Contentful Paint, ou exibição do maior conteúdo), FID (First Input Delay, ou latência de entrada) e CLS (Cumulative Layout Shift, ou mudança de layout cumulativa).

 

Existem diversas soluções no mercado para auxiliar na implementação do Lazy Load, mas muitas não levam um ponto fundamental em consideração: o Lazy Load não deve ser aplicado à primeira dobra dos sites (a parte visível quando você acessa uma página).

 

E isso é elementar, já que os itens da primeira dobra devem ser exibidos imediatamente para entregar aquela boa experiência tão necessária para os usuários.

 

Aqui na Alright estamos atentos, e trabalhando para que o Lazy Load entregue o conteúdo de nossos publishers com a velocidade necessária, mas sem prejudicar a visibilidade – especialmente dos anúncios.

 

Nossa recomendação é de que o Lazy Load atue a pelo menos 300 pixels de distância dos elementos visíveis da primeira dobra, para que o usuário não se depare com imagens em carregamento durante a sua navegação.

 

Segundo Luciano Terres, da Alright, essa técnica de proximidade é vital para que o usuário visualize todo o conteúdo durante a sua trajetória de rolagem. Caso contrário, o internauta pode não ver os elementos publicados na página.

 

“Se eu aplico isso à publicidade, o dano é diretamente no bolso. Porque vou derrubar as métricas de viewability e CTR do site, que são os principais KPIs comprados pelos anunciantes hoje no ambiente programático”, afirmou Terres em live recente promovida pela Alright.

 

Para garantir os bons resultados, tanto para os anunciantes quanto para os publishers, a tecnologia proprietária de Header Bidding da Alright só leiloa os espaços não visíveis no site quando eles entram no campo de visão dos visitantes.

 

Outra dica importante compartilhada por Terres é ficar de olho no número de dobras na página. Sites com conteúdo mais rápido, que não ultrapassam as duas dobras, podem ser prejudicados pela técnica, por exemplo. Ou seja, é uma solução que não se aplica a todos os casos, que devem ser analisados um a um.

 

Também é importante salientar que o Lazy Loading influencia positivamente nas métricas de velocidade de carregamento do Core Web Vitals, mas pode prejudicar em outras, já que o número de processos durante a exibição da página aumenta.

 

Em conclusão, o Lazy Load pode ser extremamente benéfico para os publishers, já que diminui a latência e garante melhores resultados no Core Web Vitals.

 

Mas é importante considerar cada caso, já que o Lazy Load pode prejudicar a visão que o algoritmo do Google tem do seu site, além de gerar processos que nem sempre são necessários.