Como integrar “Lazy Load” de imagens no Blogger

Siga o Ferramentas Blog: Canal no Youtube | Facebook | Twitter | Google+
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

O tempo de carregamento de uma página de blog é relevante não só para a satisfação do visitante que não precisa ficar esperando interminavelmente o navegador abrir o que se quer visitar, como é significativo para questões de SEO – indexação do seu blog no Google. As imagens são responsáveis por boa parte da lentidão e do peso. É possível reduzir esse peso com um recurso chamado “Lazy Load”, que carrega as imagens da página do seu blog apenas quando for necessário exibí-las. Somente quando o visitante rola a página é que as imagens são buscadas.

Há este mesmo recurso em plugin para WordPress.org: Plugin LazyLoad de imagens para WordPress.

O recurso que vou ensinar aqui é importante para qualquer blog, especialmente os que usam muitas imagens nas páginas. É possível, com um código conhecido como “Lazy Load”, determinar que as imagens das páginas só sejam carregadas quando estiverem visíveis na janela do navegador do visitante. Ou seja: as imagens no final da página, se não aparecerem, não carregam, o que significa economia na velocidade de seu blog.

Você pode ver isso funcionando no Blogger, em uma página de testes que tenho: Ver Lazy Load em teste. Se você rolar rapidamente a página, verá que as imagens só carregam quando vão ser visualizadas.

Como o próprio nome diz, Lazy Load, é o carregamento preguiçoso, lento das imagens, apenas sob demanda. Se não for demandado visualizar, então não carregam, tornando seu blog mais rápido para o visitante.

Como integrar Lazy Load de imagens no Blogger

O Blogger já é um sistema de blogs bem rápido por contar com a infraestrutura da Google, mas nada impede que você melhore ainda mais o desempenho do seu blog, pensando na navegabilidade dos visitantes e na melhoria para questões de SEO.

O recurso é bem simples de integrar no Blogger. Abra o painel de controle, clique no menu “Modelo” e clique no botão “Editar HTML” para ver o código fonte do seu blog.

Na janela que abrir você já verá a estrutura de código do seu blog. É nesse espaço que vamos inserir o trecho de código do Lazy Load.

Então marque a caixa que diz “Expandir modelos de widgets” para ver todo o código fonte.

Agora procure exatamente pela seguinte linha:

</body>

Imediatamente ACIMA disso, cole o seguinte trecho:

<script src="http://lazyload-blogger-ferramentasblog.googlecode.com/files/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://lazyload-blogger-ferramentasblog.googlecode.com/files/lazyload-blogger-ferramentasblog.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({placeholder : "https://lh4.googleusercontent.com/-Jm4FhMxPEVE/Tzlro9Qn7oI/AAAAAAAAD70/NEnO3eSW_WY/h120/greys.gif"});
});
</script>

Agora clique no botão “Salvar modelo”.

Se não apresentar nenhum erro, vá à página ou artigo do seu blog com o maior número de imagens para testar o recurso e ver se tudo carrega mais rápido.

Isso se aplica a todas as imagens do Blog, inclusive o que vai na barra lateral (sidebar), rodapé e qualquer outra parte. Não afeta o SEO individual das imagens, mas melhora o SEO geral do Blog, já que o tempo de carregamento de uma página é fator de ranking.

.

P.S.: JavaScript, jQuery e outras linguagens de internet são códigos “open source” e não possuem propriedade autoral. Para a biblioteca original acesse: Lazy Load Plugin for jQuery e também jQuery Lazyload.

Já pensou em ser um(a) Blogueiro(a) mais Profissional?

Está cansado(a) de ser um blogueiro mediano(a) e que não tem resultados com seu Blog, não ganha dinheiro e não recebe as visitas que gostaria?

Você chegou aqui procurando como aprofundar seus conhecimentos em Blog, como Ganhar Dinheiro com seu Blog, aplicar as melhores técnicas de SEO, divulgar seu Blog e fidelizar seu público alvo. E posso te ajudar com essas coisas e muito mais, elevando o nível de qualidade do seu projeto.

Desenvolvi um curso completo, totalmente online, cobrindo tudo o que é necessário para um Blog atingir seu potencial máximo, detalhe por detalhe, que vão te tornar um Blogueiro de Elite:
  • Técnicas de produção de conteúdo
  • Fidelização do Público alvo
  • Divulgação e Técnicas de SEO
  • Métodos e técnicas de Monetização
Acesse AGORA: https://blogueiro.pro e se torne um Blogueiro de Elite.

Esta é sua chance de ser mais profissional e ter um blog eficiente, completo e que pode ser sua fonte de renda permanente. Sou Blogueiro desde 2007 e condensei todo este conhecimento dentro do curso Blogueiro de Elite para entregar a você.

23 Comentários

  1. Puxa! Sério adorei pois meus posts sempre tem muitas imagens!
    Só tenho uma coisinha pra dizer: qdo coloquei não funcionou pois o script está configurado para carregar as imagens de .post-outer… eu não tenho essa div , obviamente setei o nome correto para o meu template mas seria legal vc avisar sobre essa parte pra quem tem template modificado 🙂

    Desculpa a chateação e obrigadoo pela dica!

    [ ]s

    Responder

  2. Bela dica Marcos!

    O meu blog têm muitas imagens, uma delas a do cabeçalho. Recentemente fiz uma limpeza no código CSS, o que melhorou consideravelmente a velocidade dele, no entanto eu ainda sentia que algumas imagens “engasgavam”.
    Com este código percebi uma melhora neste carregamento, valeu.

    Um abraço,

    Wellington Ferreira

    Responder

  3. Muito legal esse script. A idéia é simples e objetiva, e faz todo sentido. Minha sidebar tem bastante imagens e caiu como uma luva, hehehe. Parabéns Ferramentas Blog!

    Responder

  4. Dúvida: E se já houver algum outro código inserido acima da palavra ? Este novo código pode ser colocado abaixo do código existente, desde que continue acima de ?

    *Verifiquei que não há necessidade do botão copiar para usar o código sugerido, mil perdões.

    Responder

    • Zaack,

      Ficou um pouco confuso o que vc escreveu pq não apareceu os trechos de códigos que vc quis citar. Mas acho que você se referia ao “body”. Vai ter muito código antes dele. Esse é pra ser adicionado.

      Responder

  5. Pingback: 10 melhores Gadgets e recursos para o Blogger de 2012 - [ Ferramentas Blog ] | [ Ferramentas Blog ]

Deixe um comentário

Ao comentar você concorda com nossa Política de Comentários.