Usar LazyLoad em imagens para melhorar desempenho SEO

Criado: 27 de Junho, 2019 Frontend

O que faz o LazyLoad?

A técnica de LazyLoad consiste em adiar o carregamento (neste caso de imagens) no teu site até que o utilizador faça scroll à página e precise de as ver. Ou seja, quando a imagem fica visível no ecrã do utilizador.

O Google PageSpeed indica esta recomendação como “defer offscreen images”.

Como é que pode ajudar o teu site?

O principal objectivo é reduzir o tempo que é necessário para carregar a página, o tamanho de recursos descarregados e os recursos de sistema usados. Tudo isto são impactos possitivos em SEO.

Se numa página onde apresentas 20 notícias e cada notícia tem uma imagem com 1MB, aos descarregares as 20 imagens de uma só vez vai afectar o tempo necessário para carregar a página e prejudicar o desempenho.

Se pensares nos utilizadores mobile não só se torna mais lento como também vai consumir mais dados pois precisam de descarregar 20 MB só por acederem á página, mesmo que não cheguem a ver todas as imagens no ecrã. Num termo mais técnico, só queremos que as imagens sejam descarregadas quando elas estejam visíveis na viewport.

Como aplicar o LazyLoad em imagens

Eu recomendo usares este script: https://github.com/verlok/lazyload
Não só suporta imagens mas também videos e iframes!

Para implementares o LazyLoad basta substituíres o atributo SRC por data-src:

<img alt="Uma boa descrição para o SEO" data-src="lazy.jpg">

O script vai atribuir automáticamente o atributo SRC, fazendo o browser descarregar a imagem.

Podes também querer atribuir uma imagem temporária com menos qualidade, ou então usar sempre a mesma imagem inicial (sendo assim só descarregada uma vez para todas as imagens) e depois susbtituíres com uma para LazyLoad:

<img alt="Uma boa descrição para o SEO" src="lazy-default.jpg" data-src="lazy.jpg">

Este script também permite aplicar o LazyLoad em imagens que usem o CSS background-image.

Nota: O conteúdo deste blog é exclusivamente para ajudar e partilhar conhecimentos.
Qualquer erro que seja detetado por ti, por favor, avisa-me. Quanto melhor for o conteúdo, melhor para todos nós.

Partilhar este artigo