Lazy loading: guia completo

Lazy loading. Parece até algo ruim, né? Mas a realidade é que trata-se de uma ação mega benéfica para sua estratégia de SEO.

O carregamento lento deveria ser lei em sua empresa.

Afinal, vivemos em uma era em que alguns milissegundos podem significar a diferença entre um usuário permanecer em sua página ou cair fora.

O lazy load é uma solução projetada para otimizar o desempenho de uma página, em que elementos de um site são carregados seletivamente, de modo a priorizar a experiência do usuário.

E sabe do que mais? Essa pode ser a chave para que seu site suba algumas posições no ranqueamento das páginas de busca, bem como para melhorar algumas métricas.

Eu sei, ninguém gosta de ter que lidar com uma taxa de rejeição alta e não saber como resolver. Bom, essa é uma opção que talvez você ainda não tenha experimentado!

E aí, preparado(a) para entender mais? Nesse guia, te conto tudo que sei sobre o tema. Bora lá?

Já que falamos sobre otimização, te convido a baixar minha checklist avançada de SEO. Um guia passo a passo para garantir que sua página esteja otimizada. Baixe, é gratuito!

O que é lazy loading?

Lazy loading é uma solução que permite adiar o carregamento de alguns elementos de uma página, em detrimento de outros. É uma maneira de agradar aos usuários e garantir que eles permaneçam conectados, reduzindo as chances de rejeição.

Para quem conhece um pouquinho de SEO, sabe que a velocidade do site não determina apenas a experiência do usuário, mas também diminui ou melhora a retenção e as conversões.

Nesse sentido, o carregamento lento é o equivalente a uma linha de montagem bem ajustada, onde escolhe-se quando e quais elementos produzir com base na demanda imediata.

Desse modo, em vez de um site tentar carregar tudo de uma vez, ele decide de forma inteligente carregar determinados ativos apenas quando são necessários.

Pense em um garçom em uma noite agitada de um restaurante. Ele tem vários pedidos em aberto e muitos deles já estão disponíveis para serem entregues.

Uma forma inteligente de fazer seu trabalho seria distribuir os pedidos aos poucos, em vez de tentar fazer malabarismos com muitos pratos e copos.

Bom, isso é basicamente o que o carregamento lento possibilita.

Se você quer uma definição mais pragmático, busquei a que o Fórum de Desenvolvedores do Google fornece:

“O carregamento lento permite que as páginas carreguem mais rapidamente, reduz o consumo e a contenção de recursos e melhora a taxa de visibilidade, pausando a solicitação e a renderização de anúncios até que a janela de visualização do usuário esteja próxima.”

E por que isso é importante?

Busquei essa resposta no Fórum de Desenvolvedores Mozilla. De acordo com eles, o cenário digital tem visto um aumento acentuado no peso dos recursos digitais ao longo dos anos.

De 2011 a 2019, o peso médio dos recursos para desktops cresceu de aproximadamente 100KB para 400KB, enquanto em dispositivos móveis aumentou de 50KB para quase 350KB.

O tamanho das imagens durante esse período também aumentou, de 250KB para cerca de 900KB em desktops e de 100KB para aproximadamente 850KB em dispositivos móveis.

Ou seja, é preciso de uma boa conexão com a internet para que a experiência seja positiva.

Ok, mas e quando isso não é possível? E quando o usuário depende do WiFi de velocidade instável do seu coworking ou café preferidos?

É aí que o lazy load entra em cena.

Os benefícios de usar o Lazy Load

Se algum dia você me ver falando que não vou mais usar ditados clichês, não acredite. É inevitável. E nesse caso, vale resgatar uma relíquia: “tempo é dinheiro”, especialmente no mundo online.

Cada fração de segundo que um usuário espera o carregamento de uma página desgasta sua paciência e comprometimento com seu conteúdo.

Duvida?

Um atraso de apenas 500 milissegundos no loading time pode resultar em um boom no “pico de frustração” do usuário de mais de 26%, bem como uma diminuição no engajamento de 8%.

Eu vi esse dado no blog da Radware.

Bom, e o que o lazy loading oferece? Uma solução. Uma resposta técnica que assegura que o desempenho do seu site permaneça ideal.

Que tal conferir os benefícios? Se liga:

Melhora o desempenho

Ao carregar seletivamente apenas o conteúdo essencial quando um usuário acessa uma página ou aplicativo, você reduz drasticamente o peso inicial dos dados.

Essa abordagem é particularmente benéfica para usuários com conexões lentas de internet, como os exemplos que citei antes, ou mesmo para aqueles que acessam seu conteúdo em dispositivos com recursos restritos.

Assim, em vez de ficar atolada em um dilúvio de dados, a plataforma oferece conteúdo rapidamente, mantendo a experiência do usuário ininterrupta.

Não é apenas sobre carregar elementos seletivamente, mas adaptar a experiência digital aos recursos do usuário.

Melhora a experiência do usuário

Vou te falar algo que pode abalar seu mundo — mas essa é a minha missão aqui.

Tem esse estudo super interessante que eu sempre volto, cujo dado principal utilizo como âncora em muitos de meus conteúdos, veja só:

Bastam 50 milissegundos para que um usuário tenha uma primeira impressão do seu site. É isso que determina se eles gostam do seu site e se vão permanecer nele.

E aí, conseguiu digerir?

Com o lazy load, você contribui com isso e personaliza, com apoio de um dev, exatamente o que deve ser carregado primeiro e o que deve ser adiado.

Quer acessar um blogpost? O conteúdo escrito deve ser o rei e sua presença é elementar, as imagens podem ficar para um segundo momento.

Quer acessar um vídeo? O conteúdo no qual o usuário clicou deve ser priorizado — a barra de recomendações é secundária.

Reduz a taxa de rejeição

Não tem jeito: basta uma página demorar um pouquinho para carregar e o que acontece? Nossos dedos já coçam para apertar o X ou para voltar à SERP.

É comum, um comportamento que adquirimos após anos e anos de lidar com sites e apps otimizados.

A parte boa do lazy loading é que ele agiliza a entrega imediata de conteúdo, assim mantém os usuários engajados desde o primeiro clique.

Ao se concentrar em carregar o essencial, você traz à sua página uma sensação de conforto.

Tudo isso é traduzido em uma menor taxa de rejeição, já que os usuários têm acesso ao que lhes interessa, o que favorece a exploração e, claro, à conversão.

Economia de recursos do servidor

O carregamento lento garante que o servidor não seja inundado com múltiplas solicitações simultâneas.

Em vez de apresentar cada parte do conteúdo de uma só vez, ele alimenta os dados com base nas interações do usuário.

Desse modo, com uma abordagem distribuída, o conteúdo é liberado de forma gradual (de acordo com a hierarquia estabelecida), o que evita picos avassaladores, capazes de desestabilizar o servidor.

É algo essencial para momentos de pico de tráfego, como em dias de promoção, Black Friday e outras datas comemorativas.

Na prática, falo de um uso inteligente da banda, o que se traduz em uma experiência mais integrada para os usuários.

Compatibilidade com Dispositivos Móveis

A era do mobile-first cobra seu preço. E a mobilidade — ou seja, a perspectiva de não ter uma boa conexão sempre disponível — é um dos desafios aqui.

Nesse sentido, o lazy load brilha.

Com o espaço restrito da tela e a velocidade imprevisível de conexão, carregar tudo antecipadamente pode ser contraproducente.

O carregamento lento, com sua abordagem on-demand, garante que apenas os dados necessários sejam carregados e favoreçam uma navegação dinâmica.

Lazy loading afeta o SEO?

A resposta curta? Sim.

Para a maior parte das pessoas, o tempo que leva para acessar seu site é, basicamente, a primeira impressão da sua marca.

O SEO não se trata apenas de uma lente unidimensional que olha apenas para o que buscadores como o Google querem, mas multifacetada, onde o usuário deve estar no topo.

E a experiência do usuário, especialmente de acordo com as diretrizes E.E.A.T. do Google, é um dos pilares avaliados ao ranquear um site nas páginas de busca.

Afinal, a velocidade afeta a experiência do usuário, e o Google se preocupa em priorizar o usuário.

De acordo com um estudo do Google, à medida que o tempo de carregamento da página passa de 1 para 3 segundos, a probabilidade de rejeição aumenta em 32%.

Quanto mais tempo leva, mais prejudicial se torna para a retenção de usuários e para o SEO.

No entanto, vale ressaltar: essa não é a única ação que você deve tomar.

Digamos que você fez uma análise do seu site no PageSpeed ​​Insights e os resultados foram bons.

Bom, talvez não seja necessário recorrer ao lazy load, mas outras áreas podem exigir sua atenção e você pode realizar ações como:

• compactação Gzip;
• redução de JavaScript, CSS e HTML;
• aproveitamento do cache do navegador;
• aprimoramento dos tempos de resposta do servidor;
• para citar alguns.

Mas aqui vai uma palavra de cautela: embora o carregamento lento possa ser seu melhor amigo, se implementado incorretamente, pode ser seu grande inimigo.

Um passo em falso pode ocultar conteúdo valioso do robô de crawl do Google, o que dificulta a indexação de uma página e de seu conteúdo.

É um tiro no pé no mundo do SEO — e eu sei que você não quer isso.

Quais elementos podem ser carregados preguiçosamente?

Não pense que o lazy loading se restringe a um ou outro elemento de uma página. O escopo de itens pode ser bem amplo.

Os elementos mais comuns que se beneficiam dessa técnica são imagens e iframes.

Imagens são, normalmente, um dos aspectos que mais consomem recursos em muitos sites.

Quer seja uma foto de alta resolução, um carrossel de imagens de produtos ou até mesmo conteúdo gerado pelo usuário em um feed social, o carregamento lento garante que eles não prejudiquem a velocidade inicial de carregamento da página.

Em vez disso, eles aparecem de acordo com o scrolling dos usuários.

Já os iframes, por outro lado, são elementos da web que incorporam outro documento HTML ao atual.

Pense em elementos como vídeos incorporados do YouTube ou mapas do Google Maps.

Dado que os iframes podem extrair quantidades consideráveis de dados de servidores externos, é mais prudente carregá-los preguiçosamente e manter o conteúdo principal de uma página leve e rápido.

Como implementar o lazy loading?

Existem várias estratégias por trás do lazy loading. O que eu indico é, antes de tudo, contar com o auxílio de um desenvolvedor que conheça o tema.

Basicamente, o carregamento lento requer atributos especiais, como data-src, para serem adicionados às tags HTML dos elementos que você deseja carregar lentamente. Mas isso é apenas arranhar a superfície.

Em geral, essa solução pode ser aplicada a várias partes do seu site, como JavaScript, CSS e imagens.

Algumas das principais:

• Divisão de código: pense em um site como um livro. Em vez de carregar o livro inteiro de uma vez, o carregamento lento nos permite carregar apenas um capítulo (ou mesmo uma página) por vez. Dessa forma, o usuário pode começar a ler mais rápido, sem esperar que tudo seja carregado.
• JavaScript: existe um tipo de script chamado ‘module’ que é automaticamente adiado até ser necessário. Essa é uma forma integrada de carregamento lento.
• CSS: ele informa ao seu site como ele deve ser. Mas às vezes você não precisa de todas essas instruções, assim, de cara. Com as técnicas certas, você pode garantir que apenas os estilos essenciais sejam carregados primeiro.
• Fontes: esse elemento pode ser pesado. Assim, em vez de esperar o carregamento de todas as fontes, você pode priorizar e carregar apenas as necessárias no início.
• Imagens e iframes: são os elementos mais aproveitados pelo carregamento preguiçoso. Assim, em vez de carregar todas as imagens desde o início, o carregamento lento carrega apenas aquelas visíveis na tela. Conforme você rola, mais imagens são carregadas.
  • Existe uma ferramenta chamada “loading attribute” que pode ser adicionada a imagens e vídeos. É como dizer ao navegador o seguinte: “Ei, espere até que seja realmente necessário”.
  • Outra solução é o Intersection Observer API, que serve como um vigia. Ele fica de olho e avisa quando uma imagem está prestes a ser exibida. Isso pode ser usado para começar a carregar a imagem pouco antes de ser necessária.
• Alternativas: caso alguém esteja usando um navegador antigo que não suporta esses novos truques, existem planos de backup em vigor, como ‘polyfills’, para garantir que todos tenham uma boa experiência.

Embora a estrutura HTML seja a base, CSS e JavaScript desempenham papéis essenciais na determinação de como e quando esses elementos são carregados.

Eles orquestram a mágica, garantindo que os elementos sejam carregados apenas quando entrarem na janela de visualização ou estiverem prestes a fazê-lo.

Para aqueles que desejam se aprofundar nos detalhes, o Google oferece um guia completo. Já a Mozilla, empresa por trás do navegador Firefox, também apresenta uma visão técnica esclarecedora sobre o lazy load.

Ah, e não esqueça de baixar gratuitamente meu checklist de SEO, ok? É como um guia simplificado para você que quer deixar a otimização de seu site daquele jeito. Confira!

Conclusão

O nome é engraçadinho, a solução parece ser contraprodutiva, mas acredite: o lazy loading é mais uma daquelas cartas que todo analista de marketing deve ter na manga.

Mandar bem no SEO não é apenas seguir as boas práticas.

Sendo sincero? Eu, você, seu concorrente, meu concorrente… Todos nós as seguimos. É sobre quem encontra gaps e os explora com sabedoria.

Bom, tá aí um pílula de conhecimento que pode fazer a diferença em seus resultados.

Me diga: gostou de aprender? Já conhecia o carregamento lento ou ainda era algo desconhecido?

Se quiser, compartilhe aqui algo que deixei escapar sobre a aplicação desse recurso. O que você faria diferente de mim? Tô bem curioso para saber e ficarei de olho nos comentários logo abaixo.

Até a próxima!

Perguntas frequentes sobre lazy loading

O lazy loading é benéfico para o marketing digital?

Com certeza. O lazy load melhora o desempenho do site e a experiência do usuário, bem como reduz a taxa de rejeição. Um site mais rápido e responsivo tem maior probabilidade de reter visitantes, aumentar taxas de conversão e impactar positivamente nos esforços de SEO.

O lazy loading é recomendado para todos os tipos de sites?

Embora o carregamento lento ofereça benefícios para muitos sites, especialmente aqueles com conteúdo visual intenso, pode não ser necessário para sites minimalistas ou baseados somente em texto. A decisão deve ser baseada na estrutura e no conteúdo do site.

Existem ferramentas para ajudar na implementação do lazy loading?

Sim, diversas ferramentas e plugins, especialmente para plataformas como WordPress, facilitam o carregamento lento. Além disso, os desenvolvedores podem consultar a documentação do Google e da Mozilla para uma implementação mais prática.

Como o lazy loading economiza largura de banda?

O lazy load carrega apenas o conteúdo essencial que o usuário vê na tela. À medida que se ‘scrolla’ a página, mais conteúdo é carregado sob demanda. Isso significa que dados desnecessários não são carregados antecipadamente, conservando os recursos do servidor e a largura de banda.