Nem todas as imagens de uma página precisam de carregar ao mesmo tempo. O lazy loading de imagens adia o descarregamento das imagens que ainda não estão visíveis na área de visualização do visitante, para que o navegador se concentre no conteúdo que o visitante realmente pode ver, em vez de carregar a página inteira de uma vez. Nas páginas com muitas imagens, só esta mudança pode reduzir bastante o tempo de carregamento inicial e melhorar as métricas que importam tanto para a experiência dos visitantes como para o ranking de pesquisa. Este artigo explica o que é o lazy loading, como funciona tecnicamente, o que deve e não deve ter lazy loading e como afeta as pontuações das Core Web Vitals.
Quando um navegador carrega uma página sem lazy loading, descarrega todas as imagens da página, quer alguma delas esteja visível ou não. Um visitante que abre uma página e sai logo continua a desencadear o descarregamento de todas as imagens abaixo da área visível. Isso é largura de banda desperdiçada e atrasa o carregamento de tudo o que está na área visível e que o visitante realmente vê. O lazy loading muda isto, para que só o conteúdo que está à vista seja descarregado. Para um contexto sobre como isto se encaixa no quadro mais amplo da velocidade de carregamento das páginas, lê o artigo sobre como reduzir o tempo de carregamento do teu website.
O que é o lazy loading?
O lazy loading é uma técnica que adia o carregamento de recursos não críticos até serem necessários. No caso das imagens, significa que uma imagem não é descarregada até o visitante fazer scroll para perto dela. Em vez de o navegador pedir todas as imagens quando a página carrega, só pede as que estão visíveis ou prestes a ficar visíveis à medida que o visitante interage com a página.
O que o lazy loading muda na sequência de carregamento
- Sem lazy loading: o navegador pede todas as imagens quando a página carrega pela primeira vez, estejam ou não na área de visualização
- Com lazy loading: o navegador só pede as imagens que estão na área de visualização atual ou perto dela. As restantes são pedidas à medida que o visitante faz scroll na direção delas
- A quantidade total de dados transferidos ao longo de um scroll completo da página é a mesma, mas o carregamento inicial é bastante mais leve
- Os visitantes que não passam de certo ponto de uma página nunca desencadeiam o descarregamento das imagens que nunca alcançam
Como funciona o lazy loading tecnicamente?
Há duas formas de implementar o lazy loading de imagens: o atributo nativo do navegador e as soluções baseadas em JavaScript.
Lazy loading nativo
- Todos os navegadores principais suportam o lazy loading nativo através do atributo
loading="lazy"acrescentado diretamente à etiqueta da imagem - Não é preciso JavaScript nem bibliotecas externas. O navegador trata do comportamento de carregamento de forma nativa
- É hoje a abordagem padrão para o lazy loading de imagens na web e exige poucos conhecimentos técnicos para ser implementada
- O navegador determina quando começar a carregar uma imagem com base na distância dela à área de visualização, um limite que varia ligeiramente entre navegadores
Lazy loading baseado em JavaScript
- Antes de o lazy loading nativo ser amplamente suportado, os programadores usavam bibliotecas JavaScript que acompanhavam a posição do scroll e desencadeavam o carregamento das imagens à medida que entravam na área de visualização
- A Intersection Observer API é a abordagem JavaScript padrão, detetando quando um elemento entra ou sai da área de visualização sem depender de ouvintes do evento de scroll
- O lazy loading baseado em JavaScript continua a ser usado em cenários mais complexos, como o lazy loading de imagens de fundo definidas em CSS ou de conteúdo de vídeo
- Nos elementos de imagem normais, o lazy loading nativo com
loading="lazy"é mais simples e mais fiável
O que pode ter lazy loading além das imagens?
Iframes
- O atributo
loading="lazy"também funciona em iframes em todos os navegadores principais - Os mapas incorporados, os formulários e o conteúdo de terceiros em iframes podem ser adiados até o visitante fazer scroll até eles
- É particularmente útil em páginas com mapas incorporados ou widgets de terceiros perto do fundo da página, já que estes costumam envolver scripts externos pesados
Vídeo
- Os ficheiros de vídeo são bastante maiores do que as imagens e podem ter um grande impacto no tempo de carregamento inicial quando estão abaixo da área visível
- O lazy loading de vídeo exige uma abordagem em JavaScript, já que o atributo nativo
loadingnão se aplica a elementos de vídeo - Uma abordagem comum é carregar inicialmente só uma miniatura ou imagem de capa e começar a carregar o ficheiro de vídeo apenas quando o visitante interage com ele ou faz scroll até ele
Componentes e secções
- Nas aplicações com muito JavaScript, secções ou componentes inteiros da página podem ter lazy loading, o que significa que o seu código e conteúdo só são obtidos quando o visitante chega a essa parte da página
- É uma técnica avançada usada em aplicações web complexas e é normalmente tratada pela framework, e não implementada à mão
O que não deve ter lazy loading?
O lazy loading melhora o desempenho quando é aplicado corretamente, mas aplicá-lo no sítio errado causa problemas em vez de os resolver.
Imagens na área visível
- A imagem principal, o logótipo ou qualquer conteúdo visual de destaque visível quando a página abre pela primeira vez tem de carregar de imediato
- Aplicar lazy loading a imagens na área visível atrasa o LCP, o que piora as pontuações das Core Web Vitals e a experiência dos visitantes
- A regra é simples: tudo o que é visível sem fazer scroll deve carregar de imediato. Tudo o que está abaixo da área visível pode ter lazy loading
Imagens perto do limite da área visível
- As imagens logo abaixo da área visível podem aparecer depressa quando o visitante começa a fazer scroll. Se o lazy loading for aplicado de forma demasiado agressiva, estas imagens podem ainda estar a carregar quando o visitante chega a elas, fazendo aparecer brevemente um espaço em branco
- O lazy loading nativo trata disto usando um limite, começando a carregar as imagens antes de estarem totalmente na área de visualização em vez de esperar até ao último momento
Conteúdo crítico em páginas de carregamento rápido
- Nas páginas com muito pouco conteúdo e só algumas imagens, a sequência de carregamento já é rápida. O lazy loading acrescenta complexidade sem benefício significativo nestes casos
- O lazy loading é mais valioso em páginas com muitas imagens ou com conteúdo longo para percorrer
Como afeta o lazy loading as Core Web Vitals?
O lazy loading tem um efeito direto em duas métricas das Core Web Vitals e nenhum efeito na terceira, quando aplicado corretamente.
Largest Contentful Paint (LCP)
- O lazy loading nunca deve ser aplicado ao elemento que provavelmente será o candidato a LCP, normalmente a imagem principal
- Quando aplicado corretamente, o lazy loading reduz o número de recursos que competem pela largura de banda durante o carregamento inicial, o que pode melhorar o LCP ao permitir que o conteúdo da área visível carregue mais depressa
- Aplicado de forma incorreta a imagens na área visível, o lazy loading piora diretamente o LCP ao atrasar o maior elemento visível
Interaction to Next Paint (INP)
- Reduzir o número de imagens carregadas inicialmente significa menos atividade de rede a competir com a execução de JavaScript durante a janela crítica de carregamento
- Isto pode reduzir de forma indireta o bloqueio do processo principal e melhorar as pontuações de INP em páginas que antes carregavam muitas imagens em simultâneo
Cumulative Layout Shift (CLS)
- O lazy loading não afeta o CLS diretamente, mas as imagens com lazy loading e sem atributos de largura e altura definidos podem causar deslocações de layout quando carregam
- Define sempre dimensões explícitas nas imagens com lazy loading, para que o navegador reserve o espaço certo antes de a imagem carregar
Para um resumo completo de como o LCP, o INP e o CLS são pontuados e de quais são os limites, lê o artigo sobre o que são as Core Web Vitals.
O lazy loading afeta o SEO?
Quando implementado corretamente, o lazy loading não prejudica o SEO e pode contribuir para um melhor desempenho na pesquisa através de melhores pontuações de velocidade da página.
Como tratam os motores de pesquisa o conteúdo com lazy loading
- Os rastreadores dos motores de pesquisa apresentam as páginas de forma semelhante aos navegadores e conseguem indexar o conteúdo que tem lazy loading
- As imagens com lazy loading continuam a ser rastreáveis e podem aparecer nos resultados de pesquisa de imagens
- O benefício de SEO vem sobretudo das melhorias de velocidade que o lazy loading permite. As páginas com melhores pontuações nas Core Web Vitals, que o lazy loading pode ajudar a melhorar, têm vantagem de ranking
O texto alternativo continua a aplicar-se
- As imagens com lazy loading exigem o mesmo texto alternativo que qualquer outra imagem. O atributo alt deve ser preenchido com uma descrição da imagem, tenha ou não lazy loading
- Para orientação sobre como escrever um bom texto alternativo, lê o artigo sobre como usar imagens no teu website
Como acrescentar lazy loading ao teu website?
Para imagens individuais em HTML
- Acrescenta
loading="lazy"a qualquer etiqueta de imagem que esteja abaixo da área visível - Garante que cada imagem com lazy loading tem atributos
widtheheightexplícitos, para evitar deslocações de layout quando as imagens carregam - Não acrescentes
loading="lazy"à imagem principal nem a qualquer imagem visível sem fazer scroll
Através da tua plataforma de websites
- Muitos criadores de websites aplicam o lazy loading automaticamente às imagens abaixo da área visível, sem exigirem qualquer implementação manual
- Consulta a documentação de desempenho da tua plataforma para confirmares se isto é tratado automaticamente antes de o acrescentares à mão
Para um guia completo sobre otimização de imagens além do lazy loading, incluindo formatos de ficheiro, compressão e dimensionamento responsivo, lê o artigo sobre como otimizar imagens para um carregamento mais rápido.
Como o WEMASY trata o lazy loading
O criador de websites do WEMASY aplica automaticamente o lazy loading às imagens abaixo da área visível em todas as páginas. As imagens na área visível, incluindo as imagens principais e qualquer conteúdo visível sem fazer scroll, ficam de fora do lazy loading para serem apresentadas de imediato. As imagens também são servidas com dimensões definidas por defeito, o que evita deslocações de layout quando as imagens com lazy loading carregam para a sua posição.
O lazy loading funciona a par da compressão de imagens e da entrega por CDN em todos os planos do WEMASY. Estas três melhorias em conjunto reduzem tanto o peso inicial da página como o tempo de entrega das imagens, o que contribui diretamente para um LCP mais rápido e melhores pontuações das Core Web Vitals no painel de análise.
Vê o que está incluído no criador de websites WEMASY, ou consulta as opções de planos na página de preços.
Perguntas frequentes
O que é o lazy loading?
O lazy loading é uma técnica que adia o descarregamento de imagens e outros recursos até o visitante estar perto de os ver. Em vez de carregar todas as imagens de uma página quando ela abre pela primeira vez, o navegador só carrega as imagens que estão visíveis ou perto da área de visualização. As imagens mais abaixo na página são carregadas à medida que o visitante faz scroll na direção delas. Isto reduz a quantidade inicial de dados descarregados e permite que o conteúdo visível carregue mais depressa. Com o criador de websites do WEMASY, podes configurar isto diretamente no teu website.
O lazy loading prejudica o SEO?
Não. Quando implementado corretamente, o lazy loading não prejudica o SEO. Os rastreadores dos motores de pesquisa conseguem indexar imagens e conteúdo com lazy loading. O impacto no SEO é geralmente positivo porque o lazy loading melhora as métricas de velocidade da página, que os motores de pesquisa usam como sinais de ranking. O requisito principal é que o lazy loading não seja aplicado ao conteúdo da área visível, o que atrasaria o Largest Contentful Paint e afetaria negativamente as pontuações das Core Web Vitals.
Todas as imagens de uma página devem ter lazy loading?
Não. As imagens que estão visíveis quando a página abre pela primeira vez, na área visível, devem carregar de imediato. Aplicar lazy loading a estas imagens atrasa a pontuação do Largest Contentful Paint, o que piora as Core Web Vitals e a experiência dos visitantes. Só as imagens abaixo da área visível beneficiam do lazy loading. Na prática, isto significa normalmente que a imagem principal e qualquer conteúdo de destaque na secção de topo da página nunca devem ter o atributo de lazy loading.
Como acrescento lazy loading às imagens?
Nos elementos de imagem normais, acrescenta o atributo loading="lazy" diretamente à etiqueta da imagem. Todos os navegadores principais o suportam de forma nativa, sem precisares de nenhuma biblioteca JavaScript. Garante que cada imagem com lazy loading também tem atributos de largura e altura explícitos, para o navegador reservar o espaço certo antes de a imagem carregar e evitar deslocações de layout. Não acrescentes lazy loading à imagem principal nem a qualquer imagem visível sem fazer scroll.
O lazy loading funciona no telemóvel?
Sim. O lazy loading nativo com o atributo loading="lazy" é suportado por todos os navegadores móveis principais. É particularmente benéfico no telemóvel porque as ligações móveis são mais lentas e mais variáveis do que as de computador, o que torna a redução do peso inicial da página mais impactante. Os visitantes em telemóvel que não percorrem a página até ao fim também beneficiam de não descarregarem imagens que nunca alcançam.
Qual é a diferença entre lazy loading e pré-carregamento?
O lazy loading adia o descarregamento de recursos até serem necessários. O pré-carregamento faz o contrário: diz ao navegador para descarregar um recurso específico o mais cedo possível, antes de ele ser normalmente encontrado na sequência de carregamento. O pré-carregamento usa-se em recursos críticos, como a imagem principal ou letras importantes, para garantir que carregam o mais depressa possível. As duas técnicas complementam-se: pré-carrega os recursos críticos da área visível e usa lazy loading em tudo o que está abaixo da área visível.