Redimensionar e compactar suas imagens corretamente antes de subir no seu site é algo obrigatório se você deseja ter uma página com um bom desempenho.
Mas o que acontece depois que as imagens são carregadas? Existe uma maneira de otimizá-los um pouco mais e melhorar o tempo de carregamento do site? A resposta é sim!
Portanto, neste post falamos mais sobre o Lazy Loading e como ele funciona no seu site, otimizando para que o carregamento seja melhor para seus visitantes.
1. O que é Lazy Loading?
A ideia básica do Lazy Loading é carregar imagens ou iframes apenas quando os usuários precisam exibi-las. Não é preciso esperar que todos os elementos da página sejam carregados, portanto, o usuário pode começar a usar o site mais cedo.
Isso significa que suas páginas mostrarão apenas imagens acima da dobra, ou seja, apenas imagens que estão na tela; o restante virá assim que o usuário rolar a página.
Tecnicamente falando, o Lazy Loading é um JavaScript que verifica a viewport atual de seus visitantes e carrega apenas imagens acima da dobra.
Esse script pode ser aplicado às suas imagens por meio de um plugin ou programaticamente, e é uma maneira brilhante de otimizar o desempenho do seu site.
2. O que acontece quando o Lazy Loading é aplicado?
O Lazy Loading foi criado para que os usuários possam navegar no site mesmo que nem todas as imagens tenham sido baixadas.
Quando um script de Lazy Loading é aplicado às suas imagens, é isso o que acontece:
- Você começa a rolar enquanto lê o conteúdo da página.
- Quando uma imagem deve aparecer na janela de exibição, uma imagem de espaço reservado ficará visível.
- A imagem original substituirá rapidamente a imagem do espaço reservado.
Você pode pensar no Lazy Loading como um daqueles álbuns de fotos antigos em que todas as fotos são protegidas por um véu de papel de seda.
As imagens permanecerão sob o “véu de papel de seda” abaixo da dobra até que o usuário decida rolar a página e desvelá-las.
3. Por que utilizar o Lazy Loading ao invés de carregar todas as imagens de uma vez?
Há várias razões pelas quais você deve utilizar o Lazy Loading em suas imagens em vez de deixá-las carregar de uma só vez. Um dos mais importantes pontos são:
- Melhoria no tempo de carregamento do seu site
Como vimos, a quantidade de dados da imagem precisa ser totalmente baixada antes que a página se torne 100% utilizável. Se utilizar o Lazy Loading nas imagens, o problema será resolvido, pois somente as colocadas acima da dobra serão carregadas na primeira instância. Isso resultará em uma redução real do tempo de carregamento da página.
- Redução de trabalho para o navegador
Se as imagens forem carregadas com Lazy Loading, seu navegador não precisará analisar nem decodificar recursos até o momento em que forem solicitados rolando a página.
- Diminuição no número de solicitações HTTP durante o carregamento da primeira página
Como conseqüência direta do ponto anterior, o número de solicitações HTTP também terá uma redução.
- Menos dados servidos pelo servidor ou pela CDN
O servidor ou a CDN terá que baixar menos dados, resultando em contas mais baratas para você.
- Economia de dados (especialmente do celular)
Se a parte mais significativa dos dados do seu site – geralmente obtida por imagens – for baixada apenas ao rolar a página, os clientes que acessarem seu site a partir de dispositivos móveis ficarão agradecidos, pois as imagens carregadas como Lazy Loading economizarão os dados dos seus visitantes.
Veja também: HTTP/2 e WordPress: Entenda algumas questões
4. O Lazy Loading é uma má prática de SEO?
Você pode já ter visto opiniões dizendo que o Lazy Loading pode ser ruim para o SEO, porque o Google pode excluir imagens carregadas da indexação.
Isso não é verdade, pois o Google e os mecanismos de pesquisa podem lidar com imagens carregadas lentamente, além disso, o lazy Loading é um requisito solicitado pelo Google PageSpeed (ferramenta do Google que mede a performance de um site). Podemos concluir então que Lazy Loading é sem dúvida uma boa prática de SEO.
