Como usar LazyLoad para adiar o carregamento de imagens fora da tela no Blogger

Quando fazemos, no Google PageSpeed Insights, uma avaliação da velocidade de nosso blog costuma aparecer um item que muita gente não faz ideia de como solucionar. Estou falando do item "Adie imagens fora da tela".

Para explicar em poucas palavras: quando um blog é acessado ele carrega todas as imagens (dos posts, das postagens mais vistas, postagens relacionadas, banners da lateral, imagens do rodapé, etc...) ao mesmo tempo. Não precisa pensar muito pra deduzir que se fosse possível ir carregando as imagens à medida em que elas fossem sendo de fato exibidas esse carregamento seria mais rápido, não é?

Acontece que, no Blogger, isso não existe de modo nativo. Mas há um script, adaptado de um plugin WP, que faz a mágica acontecer.
Uso atualmente aqui no blog, mas você pode ver em ação clicando em meu blog de demonstração (porque vai que um dia eu deixe de usar ou mude de script e aí ficaria sem demonstrativo...):


Demonstração do tutorial

Note que as imagens vão aparecendo gradativamente ao rolar a tela.
Isso é muito útil (além de ser legal rsrrs) pois ao adiar o carregamento de imagens que ainda não são necessárias o blog fica mais leve e carrega mais rápido.
E, aliado a outros métodos para agilizar o carregamento, o uso do script LazyLoad é muito eficaz.
Quer aprender e colocar em seu blog?
É tão simples que ao final vou complementar esse tutorial com mais algumas dicas para otimizar o carregamento do blog.
Vem comigo!

Como usar o LazyLoad no Blogger?

Para começar copie o código que vamos usar:


Copiar o código

A seguir vá até o painel administrativo de su blog e clique na aba Tema.
Aí selecione Editar HTML e dentro da caixa do código-fonte tecle Ctrl+F.
Na barra de busca que aparecer digite </body> e tecle Enter para localizar.
Acima de </body> cole o código que pedi para copiar.
Salve.
E é só isso.

Um alerta: claro que pode haver conflito caso seu template tenha outros elementos que usem JQuery para rodar. Slide, por exemplo.
Se der ruim tem que optar e manter o que for mais útil.
Nos testes que fiz só notei conflito com o Slide de destaques que já ensinei aqui no blog.
Mas, como sempre eu digo, tem que testar.

Dicas práticas para acelerar o carregamento do blog

Como eu disse acima vou complementar este post com algumas dicas simples, práticas e perfeitamente executáveis que, combinadas, vão te ajudar a acelerar o carregamento de seu blog.

1- Redimensione imagens no tamanho que serão exibidas: se sua área de postagem comporta imagens com 800px de largura por que raios você vai carregar imagens que medem 1500px?
Redimensione TODAS as suas imagens para o tamanho real de exibição, e faça isso usando um editor de imagens. Não adianta carregar imagens imensas e na hora de postar marcar para que a imagem seja exibida em Tamanho grande.
Ela sempre será carregada no tamanho real e mandar que ela seja exibida em outro tamanho não vai mudar isso. Redimensione usando um editor de imagem. Sempre.

 Como baixar, instalar e usar o Photoscape

2- Comprima e compacte suas imagens: além de definir o tamanho de exibição redimensionando-as corretamente é importante também comprimir e compactar suas imagens.
A menos que seu site seja de fotografia você não precisa de uma qualidade altíssima para suas imagens. Na web uma qualidade média já é mais do que suficiente.
Comprima, compacte e reduza o peso de suas imagens!

 Como reduzir o peso das imagens e melhorar o carregamento do blog

3- Quantas imagens realmente seu post precisa?
Muitas vezes a imagem é dispensável.
Lembre: se a imagem não agrega valor ao post ela pode ser dispensada. Só para embelezar não é boa escolha pois do que adianta beleza nas imagens se o post não abre de tão pesado? Selecione as imagens que for usar, e tenha a certeza que elas agregam valor ao texto e não o atrapalhem.
Sim, é duro. Eu sofro com isso mas estou tentando mudar e aprender...

Outra coisa muito comum que eu vejo são imagens com grandes áreas vazias, seja porque não foram editadas corretamente, seja porque a pessoa tem a ilusão de que precisa usar espaço em branco na imagem ao invés de parágrafo separando texto e imagem.
Imagem vazia pesa, e aí é peso vazio, portanto inútil.

4- Nem todos os recursos são para todos os blogs: é muito comum me perguntarem, quando eu mostro algum recurso novo aqui no blog, por que eu mesma não o estou usando em meu próprio blog.
A resposta é simples: se eu fosse colocar aqui tudo que conheço, ou tudo que aprendo, ou ainda tudo o que gosto esse blog não abriria.
Então passe um pente fino em seu blog e mantenha apenas o essencial, aquilo que realmente é útil e tem uma razão para estar ali.

Firula é bonitinho, mas lembre: tudo que colocamos no blog tem um peso, até um simples banner na lateral.
Uma coisa que talvez você não saiba: eu sempre recomendo usar 5 posts nas Postagens mais vistas. Poderia usar 10? Poderia. Mas pesaria o dobro.
Entendeu?

5- Texto sobre imagem=peso extra.
Sim, dói dizer isso porque eu uso muito aqui no blog imagens com texto sobreposto.
Mas adicionar texto na imagem eleva o peso dela, e o pior é que com texto a compressão tende a minar a qualidade da fonte e aí a gente acaba não reduzindo o peso para não ter um texto borrado.
Difícil abrir mão, então o jeito é usar com parcimônia e cuidado... #sofro

 Top 5 sites para baixar imagens flat lay de graça

E terminei!
Tutorial fácil de seguir, com dicas preciosas de quem gere um blog há mais de 10 anos e já sofreu muito com blog lento.
Ainda estou aprendendo and sofrenu, mas partilhar o que tem dado certo pra mim e pode te ajudar tem seu valor, né?