Lazy Loading: Guia Completo de Carregamento Diferido
Quando se trata de usar plataformas online, como sites, a velocidade de carregamento e a otimização se tornam essenciais, com os usuários exigindo cada vez mais velocidade e responsividade.
Por essa razão, o padrão de design de página conhecido como lazy loading está ganhando cada vez mais importância. Mas o que é exatamente o lazy loading (carregamento diferido)?
É isso que abordaremos a seguir.
O que é Lazy Loading?
Especificamente, o lazy loading é uma técnica, um padrão de design de programação aplicado a sites, no qual elementos e recursos não são carregados por completo, mas sim executados em tempo real ou sob demanda de acordo com o uso do usuário, produzindo um "carregamento diferido" dos conteúdos.
Dessa forma, os recursos são otimizados e conteúdos como texto, vídeos, imagens e outros materiais só carregam quando necessário, melhorando a velocidade, o uso de memória e processamento, a responsividade e os tempos de carregamento. Isso contrasta com o carregamento completo, onde um site ou página é carregado por completo, mesmo que o usuário não use todos os elementos.
Vantagens gerais do lazy loading
Já que o principal propósito do lazy loading é otimizar o carregamento de elementos apenas quando são usados, há múltiplas vantagens que podem ser resumidas em:
- Velocidade na exibição dos principais elementos de um site.
- Melhoria significativa na experiência do usuário no site (UX).
- Melhoria de desempenho em dispositivos móveis, especialmente quando têm recursos limitados de conexão de rede; ter o Lazy Loading ativo permitirá a navegação em páginas que, em condições de cobertura tão precárias, seriam de outra forma inviáveis.
- Otimização geral e total de recursos como CPU, RAM e bateria em dispositivos móveis.
- O aumento do tempo de permanência em nossas páginas, ao não ter problemas de carregamento, traduz-se indiretamente em melhorias no ranqueamento.
- Diminuição da taxa de rejeição.
Da mesma forma, a abordagem de programação do lazy loading tem vantagens e novidades de um ponto de vista mais técnico, como:
- O lazy loading é totalmente compatível com frameworks JS como React e Angular, bem como com plataformas CMS como WordPress. Na verdade, foi anunciado recentemente que o lazy loading para imagens será incluído por padrão na versão 5.5 do WordPress.
- Graças à API IntersectionObserver, ele não esconde imagens dos buscadores.
- Suporte para vários tipos de conteúdo, como imagens e recursos de classe responsive.
- Permite que as imagens do site sejam indexadas, o que é vital para SEO.
- É um recurso 100% SEO Friendly, já que melhora direta e indiretamente muitos pontos-chave em SEO.
Como implementar lazy loading no WordPress?
Se temos nosso site no WordPress, devemos saber que temos uma grande vantagem, já que existem muitas soluções para implementar lazy loading em nossas páginas para que elas carreguem muito mais rápido. Esta captura de tela abaixo mostra algumas das possíveis soluções que temos no repositório de plugins:
Visão dos plugins WordPress mais destacados para implementar lazy loading.
Para realizar essa implementação, temos várias opções:
- Escolher um plugin específico de lazy loading como "Lazy loader", "a3 lazy load"...
- Escolher um plugin de otimização web como "WP Rocket", que já tem essa opção incluída por padrão junto com outras melhorias.
Aspectos de SEO relacionados ao Lazy Loading
Já conhecemos a missão principal do carregamento diferido e suas vantagens-chave, e como ele afeta a melhoria do desempenho da nossa página, da nossa UX e do SEO.
Agora, deve-se fazer um uso inteligente do carregamento diferido para tirar o máximo proveito dele, já que se usado de forma inadequada, pode causar o efeito contrário.
Por exemplo, o lazy loading faz uso do cache para melhorar a velocidade, então se muito conteúdo for armazenado lá, podem ocorrer lentidão ou erros se não for implementado corretamente, podendo até impedir que o Google indexe páginas e elementos, o que pode ter um efeito grave no ranqueamento do site. Algumas dicas são:
- Otimizar o cache e fazer uso inteligente dele.
- Usar o Google Search Console para verificar o conteúdo que o Google rastreia no site.
- Adicionar texto ALT para tornar cada imagem indexável pelo Google.
- Sempre fazer uso da API IntersectionObserver.
- Adicionar o atributo loading ao iframe ou conteúdo embedado de outras páginas ou fontes, graças à função Blink LazyLoad do navegador Chrome. Aplica-se a imagens, fotos, vídeos, texto e outros conteúdos.
Lazy loading e UX
Quando se trata de um site, tanto a otimização técnica quanto a geral para oferecer uma boa experiência do usuário (UX) é essencial, com respeito aos tempos de carregamento, responsividade, uso de recursos e comportamento geral. Se um site não é muito responsivo, sua taxa de rejeição será alta, e se oferece uma experiência ruim para o usuário, isso afetará seu tráfego, visibilidade e até mesmo o SEO.
Com o carregamento diferido, o objetivo é melhorar a UX de um site dramaticamente em uma única etapa, carregando seu conteúdo progressivamente e quando o usuário o requer enquanto rola a página, sejam imagens ou texto, o que otimiza o uso de recursos em comparação ao carregamento da plataforma inteira, provavelmente mostrando elementos que não são importantes para o usuário.
Lazy loading nativo (HTML) no Chrome
Demonstrando a importância que o Google dá à UX, desde 2020 e a partir da versão 75 do seu navegador Chrome, é possível adicionar lazy loading nativo às tags de página HTML e seu conteúdo multimídia, como fotos, vídeos, entre outros.
Dessa forma, ao adicionar automaticamente o atributo HTML lazy loading, o navegador Chrome entende que o conteúdo da página será carregado de acordo com a navegação do usuário e não de uma só vez, melhorando a velocidade e a responsividade. Para usá-lo, o atributo loading com valor lazy é adicionado a cada tag dos recursos visuais e multimídia, bem como aos iframes:
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> Esse recurso pode ser usado tanto em imagens, que representam grande parte das informações que o navegador precisa baixar, quanto em iframes; lembre-se de que os usamos para incorporar recursos externos em nosso site.
É importante destacar o uso em iframes, já que estes podem representar pontos críticos de carregamento em nosso site.
Como ponto negativo, o lazy loading nativo só é compatível com o Chrome, embora seu uso possa ser implementado em outros navegadores por meio de bibliotecas compatíveis, caso não haja suporte como acontece no Mozilla Firefox.
Usos do Lazy loading
Como já comentamos, o lazy loading se concentra em atrasar o carregamento de elementos em uma página para otimizar sua resposta. Nesse sentido, o uso dado à ferramenta se concentra em todos os recursos visuais, embora se enfatize em imagens, vídeos e iframes que podem incluir documentos e outros arquivos, tudo por meio da modificação de tags e da inclusão do atributo loading com valor lazy, otimizando a velocidade geral do site mesmo que tenha elementos pesados ou grande conteúdo multimídia.
Tem dúvidas sobre lazy loading ou quer implementá-lo no seu projeto? Estamos à sua disposição!
Documentação e Referências:
Autor: David Kaufmann
Passei os últimos 10 e tantos anos completamente obcecado por SEO — e, sinceramente, não quereria que fosse de outra forma.
A minha carreira atingiu um novo patamar quando trabalhei como Senior SEO Specialist na Chess.com — um dos 100 sites mais visitados de toda a internet. Operar nessa escala, em milhões de páginas, dezenas de idiomas e numa das SERPs mais competitivas que existem, ensinou-me coisas que nenhum curso ou certificação jamais poderia. Essa experiência mudou a minha perspetiva sobre o que é realmente um grande trabalho de SEO — e tornou-se a base de tudo o que construí desde então.
Foi a partir dessa experiência que fundei a SEO Alive — uma agência para marcas que levam a sério o crescimento orgânico. Não estamos aqui para vender dashboards e relatórios mensais. Estamos aqui para construir estratégias que realmente fazem a diferença, combinando o melhor do SEO clássico com o novo e empolgante mundo da Generative Engine Optimization (GEO) — garantindo que a tua marca apareça não só nos links azuis do Google, mas também dentro das respostas geradas por AI que o ChatGPT, o Perplexity e o Google AI Overviews entregam a milhões de pessoas todos os dias.
E como não consegui encontrar uma ferramenta que lidasse corretamente com esses dois mundos, construí uma eu mesmo — a SEOcrawl, uma plataforma enterprise de SEO intelligence que reúne rankings, auditorias técnicas, monitoramento de backlinks, saúde do crawl e tracking de visibilidade de marca em AI, tudo num só lugar. É a plataforma que sempre desejei que existisse.
Descubra mais conteúdos deste autor
