Lazy loading
Como o lazy loading funciona, por que ele afeta a captura de tela e técnicas para detectar e tratar conteúdo com carregamento adiado.
Lazy loading é uma técnica da web que adia o carregamento de recursos fora da tela até que estejam prestes a entrar na viewport. Ela é usada em imagens, iframes, vídeos e seções inteiras de página.
Os navegadores a suportam nativamente pelo atributo loading em elementos img e iframe, com o valor lazy, definido no HTML Living Standard. Sites também a implementam em JavaScript, geralmente com a API IntersectionObserver, que informa quando um elemento se aproxima da área visível.
Até que um recurso seja carregado, a página mostra um marcador: uma caixa vazia, uma cor sólida, uma prévia borrada ou um indicador de carregamento. O lazy loading reduz o peso inicial da página e acelera a primeira visualização.
Como o lazy loading funciona
- A página carrega com marcadores nas imagens fora da tela.
- O navegador ou um script observa a posição de cada marcador.
- Quando o usuário rola a página até perto dele, o arquivo real é solicitado.
- A imagem substitui o marcador quando chega.
A rolagem infinita usa a mesma ideia para conteúdo: novos itens são buscados quando o usuário chega ao fim da lista.
Lazy loading e capturas de tela
Uma captura de página inteira que renderiza a página toda de uma vez não rola a página, então o conteúdo com lazy loading abaixo da dobra pode nunca ser solicitado. O resultado mostra caixas em branco ou prévias borradas. Uma captura da viewport é menos afetada, porque mostra apenas o que está visível.
Detectando conteúdo com lazy loading
- Procure caixas vazias ou cinzas na parte inferior de uma captura de página inteira.
- Role a página manualmente e observe as imagens que aparecem gradualmente.
- Inspecione os elementos de imagem nas DevTools do navegador para ver o atributo loading ou as fontes dos marcadores.
- Compare uma captura rápida com uma captura feita após um atraso.
No Website Capture do Temposhot, escolha Network idle como configuração de Wait ou adicione um atraso de 0 a 60 segundos. A extensão Full Page Screenshot do Temposhot rola a página ativa durante a captura, o que dispara o carregamento baseado em rolagem.
Erros comuns
- Capturar no evento load e presumir que a página está completa.
- Definir um atraso longo sem rolar a página, o que não ajuda imagens disparadas pela rolagem.
- Capturar páginas de rolagem infinita como "página inteira", o que nunca termina de forma limpa.
- Ignorar imagens de marcador borradas que parecem carregadas em tamanhos pequenos.
Repetindo as mesmas capturas o tempo todo?
Defina a condição de espera uma vez e reutilize-a para cada URL na automação de capturas de tela de sites.
Perguntas frequentes
Um atraso maior resolve as imagens com lazy loading?
Ajuda quando o conteúdo carrega por temporizador ou após atividade de rede. Conteúdo disparado pela rolagem precisa de rolagem.
Devo evitar lazy loading no meu próprio site?
Não. Ele melhora a velocidade. Mantenha as imagens acima da dobra com carregamento imediato para que apareçam logo.
Fontes
Recursos relacionados
- Opções do Website Capture: configurações de espera e atraso.
- Captura de página inteira: captura a altura total da página.
Você tira as mesmas capturas de tela várias vezes?
O Temposhot captura uma tela, janela ou área em intervalos programados e exporta o conjunto como PDF, imagens, ZIP ou MP4. As ferramentas gratuitas do navegador capturam apenas uma imagem por vez.
Recursos relacionados
Termos relacionados
- Captura de página inteiraO que é uma captura de página inteira, em que ela difere das capturas da viewport e de rolagem e quando usá-la.
- Otimização de imagemO que é otimização de imagem, como ela afeta o desempenho da web e quais erros evitar.
- Captura de tela com rolagemO que é uma captura de tela com rolagem, em que ela difere da captura de página inteira e quando usá-la.
- Navegador headlessO que é um navegador headless, como ele é usado em capturas de tela automatizadas e quais armadilhas comuns evitar.