Como usar LazyLoad para adiar o carregamento de imagens fora da tela no Blogger - Elaine Gaspareto- Dicas para blogs e inspirações para a vida

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

Publicado em 18/03/2019

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.


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!


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



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é?





17 comentários

  1. Olá Elaine!
    E como tem valor a sua boa vontade em nos ajudar. Sem dúvida você é uma pessoa muito importante para nós que amamos o seu blog. De coração agradeço tudo quanto aprendi no seu blog. Que Deus a ilumine sempre. Obrigada!

    ResponderExcluir
  2. Nossaaaaaa! que blog de testes deslumbrante!! Clean! Apaixonei!!! Excelente post.

    ResponderExcluir
  3. Post excelente como sempre Elaine. Eu fiz, já instalei no meu blog que está absurdamente lento, fiquei até chocada com o resultado, preciso trabalhar muito para deixar ele ais rápido. E já comecei por este tutorial e deu conflito como vc mencionou, as fotos das postagens mais acessadas sumiram na sidebar. Claro que opto por esse código, só não sei o que fazer com este conflito, mas, paciência!
    As demais dicas me serviram de alerta também. Obrigada! Obrigada por tudo!

    ResponderExcluir
    Respostas
    1. Jack, seu blog tá fora do ar?
      Tentei acessar mas não abre :(

      As imagens dos posts mais vistos não somem, mas demoram pra carregar porque, no Blogger, o carregamento é feito da esquerda para a direita, e de cima pra baixo.
      Então, com esse plugin, as imagens laterais vão carregar depois que a área do post estiver toda carregada.
      Sim, é um probleminha, mas não me preocupa pois o que mais importa é o texto, o resto é acessório...
      bjsssss

      Excluir
    2. Oi Elaine, não. Está normal, estranho rsrs.
      Mas o conflito se resolveu rsrs exatamente como vc disse, era só aguardar um pouquinho, as postagens mais acessadas estão aparecendo. Agradeço toda a sua atenção e vou trabalhar duro aqui para dar uma acelerada no blog pq a coisa tá feia :(

      Excluir
  4. O post foi muito útil pra mim, Elaine, já pinei <3

    Usei o Google Page Speed e vi que meu blog está bem lento, eu redimensiono todas as imagens, mas não comprimo porque não tenho tempo... Meu tempo para o blog é bem limitado :(

    Nossa! Que Vício

    ResponderExcluir
    Respostas
    1. O meu varia, mas ainda tenho muito a melhorar.
      Mas sabe? O tempo muda de acordo até com o horário do teste.
      Hora de pico fica mais lento ainda, de madrugada fica ligeiro rsrsr

      Excluir
    2. kkkkkk meu coração acelerou e pelo visto só o coração pq o blog tá lentinho.
      Vou ficar até de madrugada para testar kkkkk
      Bjos!

      Excluir
  5. Olá Elaine, eu sempre por aqui, fuçando nas suas coisas e aprendendo de montão !! Amo esse blog ! Uma dúvida, não entendi a parte que vc fala sobre áreas vazias, espaço em branco na imagem, que tb pesam....que áreas vazias são essas ??
    Desde já obrigada sempre !!

    ResponderExcluir
    Respostas
    1. Luciana, área vazia é quando a área está... vazia rsrs em branco, sem imagem, as vezes é uma borda grande pra emular um espaço de parágrafo, etc...
      Mais ou menos assim:
      https://static3.tcdn.com.br/img/img_prod/358069/snoopy_com_maquina_de_escrever_10754_1_20180827105440.jpg

      Excluir
  6. AAaahh, agora entendi kkkkk sou meio lerdinha mesmo rss. Brigadaço de novo, vc é show !!

    ResponderExcluir
  7. Muito obrigado por suas dicas😀😀!

    ResponderExcluir
  8. Fiz os passos, mas não mudo0u em nada lá na analise do blog. continua pedindo para adiar as imagens para fora da tela. O que eu posso fazer?

    ResponderExcluir
    Respostas
    1. Dei uma olhada em seu blog e está funcionando, mas para que apareça a alteração no PagSpeed demora cerca de 1 semana, é o tempo médio que os robots levam para identificar alterações. Inserir e já testar não vai mostrar resultado, ao menos não geralmente :)

      Excluir
  9. Sua dica mim ajudou muito. Quase ninguém fala disso no blogger. Agora estou procurando como reduzir o tempo de execução do java script

    ResponderExcluir

Olá! Muito obrigada por ler meu blog e obrigada também por se dispor a comentar meus posts. Seja muito bem-vindo(a)!

Importante!
Devido à falta de tempo hábil eu não me comprometo a responder perguntas referentes aos tutoriais postados neste blog.
Pedidos de ajuda individual serão respondidos conforme o meu tempo e disponibilidade permitirem.
Deixe sua pergunta ou solicitação sempre nos comentários, eu infelizmente não tenho como responder pedidos de ajuda por email.
Por favor, entenda: comentários sem relação alguma com o post não serão liberados e nem respondidos.

Para saber mais sobre a melhor forma de utilizar este blog leia Termos de uso do blog.



Muito obrigada, fique à vontade para interagir.
Mas lembre-se:
Gentileza, educação e boas maneiras servem também para a vida nos blogs…