Imagens fora do ecrã adiadas

A Silktide verifica se a sua página descarrega imagens que o visitante ainda não consegue ver — imagens mais abaixo na página, além do primeiro ecrã. Carregá-las antecipadamente atrasa o conteúdo que o visitante está realmente a consultar.

A solução é o : o navegador obtém cada imagem pouco antes de esta entrar no campo de visão, em vez de descarregar imediatamente todas as imagens da página.

Por que motivo isto é importante

Quando uma página carrega, o navegador tem uma largura de banda limitada para utilizar, e cada imagem que descarrega concorre com tudo o resto. Gastar essa largura de banda em imagens que estão três ecrãs abaixo significa que a imagem principal, o texto e os botões que o visitante está à espera de ver chegam mais tarde.

Em páginas longas e com muitas imagens, o desperdício é significativo: um visitante que lê o primeiro ecrã e sai pode ter pago — em tempo e dados móveis — por dezenas de imagens que nunca viu.

Como corrigir

Adicione loading="lazy" às imagens abaixo do primeiro ecrã. Os navegadores suportam esta funcionalidade nativamente, sem necessidade de scripts:

<!-- Muito abaixo na página: não carregar até o visitante se aproximar -->
<img src="team-photo.jpg" alt="A nossa equipa" loading="lazy" width="800" height="600">

Não utilize o carregamento tardio para imagens no topo da página, especialmente para a maior imagem — isso atrasa o que os visitantes veem primeiro e prejudica mais do que ajuda.
Muitos CMS e frameworks já carregam imagens tardiamente de forma automática; se o seu não o fizer, procure uma definição ou um plugin antes de editar os modelos.
Mantenha dimensões explícitas nas imagens carregadas tardiamente para que a página não salte quando estas aparecem — consulte Tamanhos explícitos das imagens.

Como a Silktide testa isto

Carrega a página num navegador real, utilizando o tipo de dispositivo, a velocidade de ligação e a localização de teste configurados para os seus testes de velocidade.
Identifica as imagens que são descarregadas durante o carregamento inicial, mas que estão inteiramente abaixo do ecrã visível e ainda não foram adiadas.
Comunica cada imagem fora do ecrã com o tamanho do descarregamento que poderia ser adiado.
Avalia a página com base no tamanho total que pode ser adiado: cerca de 30 KB resulta numa classificação inferior; 100 KB ou mais é classificado como fraco.

Resolução de problemas

A imagem está visível no meu ecrã

O que está "fora do ecrã" depende do ecrã. A Silktide testa com o dispositivo configurado para os seus testes de velocidade, por isso uma imagem junto à área visível no seu computador pode ficar abaixo do primeiro ecrã de uma mais pequena. O carregamento tardio continua a ser seguro: a imagem é carregada assim que o visitante se aproxima dela.

Já utilizamos o carregamento tardio com um script

As abordagens mais antigas baseadas em scripts por vezes ainda acionam os descarregamentos demasiado cedo, ou o script pode não abranger imagens adicionadas por outros plugins. As imagens comunicadas mostram exatamente o que foi descarregado enquanto estava fora do ecrã; o loading="lazy" nativo é a solução fiável mais simples.