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.

.

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.