Como integrar “Lazy Load” de imagens no Blogger

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.