[SEO] Lazy Loading, Viewport e Otimização de Sites

O Google acabou de lançar uma documentação explicando a importância da técnica de "Lazy Loading" para a otimização de sites, o que vem a contribuir para a relevância do site e por conseguinte, no rankeamento.

E o que é Lazy Loading?

É uma técnica de otimização de desempenho ao se carregar uma página, fazendo com que conteúdos mais pesados como vídeos e imagens sejam carregados somente quando entram na viewport do browser. Ou seja, de maneira condicional. Somente os conteúdos da área desvelada no viewport que são carregados, e conforme o usuário vai conferindo o resto da página, os demais elementos vão sendo carregados. Neste caso, se o conteúdo não for exibido, não será carregado. Logo, o tempo total de carregamento da página será menor.

E o que é viewport?

É a área onde seu website aparece, imaginem o canvas de um editor de imagens como Photoshop ou Gimp, então, estamos falando da área branca quando você abre o browser. O viewport sempre terá o tamanho do "canvas" da janela.

Caso o conteúdo demore para carregar, a indexação do site pode ser gravemente afetada. Para ilustrar melhor a situação, a Conversion em seu site dá como exemplo o estudo

da Amazon, que concluiu que cada segundo a mais de carregamento, representa uma perda de ao menos US $1,6 bilhão em receita a cada ano.

Principais benefícios adquiridos com a técnica segundo a Conversion:

1. Aumento de performance e alto impacto em SEO

2. Melhoria na experiência do usuário

3. Aumento de receita indiretamente

4. Possibilidade de adição de mais conteúdo na página sem impactos negativos na otimização do site

5. Velocidade do site é fator de rankeamento na pesquisa mobile

Como fazê-lo?

Através de um script em JQuery, como explicado aqui e neste curso do YouTube.

Quer saber mais sobre o documento do Google? Clique aqui.