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...):
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:
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é?
Olá Elaine!
ResponderExcluirE 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!
Muito obrigada, meu bem :)
Excluirbeijosss
Nossaaaaaa! que blog de testes deslumbrante!! Clean! Apaixonei!!! Excelente post.
ResponderExcluirrsrsrs obrigada!
Excluirbjsss
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!
ResponderExcluirAs demais dicas me serviram de alerta também. Obrigada! Obrigada por tudo!
Jack, seu blog tá fora do ar?
ExcluirTentei 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
Oi Elaine, não. Está normal, estranho rsrs.
ExcluirMas 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 :(
O post foi muito útil pra mim, Elaine, já pinei <3
ResponderExcluirUsei 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
O meu varia, mas ainda tenho muito a melhorar.
ExcluirMas 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
kkkkkk meu coração acelerou e pelo visto só o coração pq o blog tá lentinho.
ExcluirVou ficar até de madrugada para testar kkkkk
Bjos!
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 ??
ResponderExcluirDesde já obrigada sempre !!
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...
ExcluirMais ou menos assim:
https://static3.tcdn.com.br/img/img_prod/358069/snoopy_com_maquina_de_escrever_10754_1_20180827105440.jpg
AAaahh, agora entendi kkkkk sou meio lerdinha mesmo rss. Brigadaço de novo, vc é show !!
ResponderExcluirMuito obrigado por suas dicas😀😀!
ResponderExcluirFiz 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?
ResponderExcluirDei 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 :)
ExcluirSua dica mim ajudou muito. Quase ninguém fala disso no blogger. Agora estou procurando como reduzir o tempo de execução do java script
ResponderExcluirOlá Elaine você sabe me dizer se esse código para adiar as imagens também funciona na loja integrada?
ResponderExcluirRay, esse código só testei no Blogger. Acho que não funciona não...
ExcluirAi que pena, não funcionou no meu blog! Mas vou continuar procurando soluções,para deskop tá bacana o speed, mas para mobile fica sempre no vermelho, puxa vida! https://www.tutoracraft.com/
ResponderExcluirBruh, caso seu template seja um dos novos responsivos nativos do Blogger (tipo Soho, Notável, Contempo e Empório) não vai funcionar...
ExcluirOla Elaine... muito obrigado pela dica!!!
ResponderExcluirminhapage.com
Ola Elaine... muito obrigado pelas dicas interessantes!!
ResponderExcluirminhapage.com