Aula 82 – Loja Shopify do Zero ao Avançado: Lazy loading e carregamento progressivo

🎉 Bem-vindos de volta, futuros magnatas do Shopify! Nesta aula, vamos mergulhar em técnicas avançadas para turbinar a performance da sua loja: Lazy Loading e Carregamento Progressivo. Preparem-se para deixar sua loja mais rápida como um foguete! 🚀

📚 O que você vai aprender nesta aula

• O que é Lazy Loading e seus benefícios para SEO e UX.
• Implementar Lazy Loading de imagens com código Liquid.
• Implementar Lazy Loading com JavaScript puro.
• Entender e aplicar o carregamento progressivo de imagens.
• Boas práticas e otimizações para Lazy Loading.
• Utilizar bibliotecas JavaScript para facilitar a implementação.

🔗 Conectando com aulas anteriores

Nas aulas anteriores, vimos como otimizar imagens e códigos para melhorar o desempenho da sua loja. Lazy Loading e carregamento progressivo são complementos essenciais a essas otimizações, levando a performance a um novo patamar. Lembram da aula sobre otimização de imagens (Aula 32)? O Lazy Loading potencializa os resultados obtidos lá! 😉

📖 Conteúdo Principal

Lazy Loading (Carregamento Preguiçoso): Carrega imagens e outros elementos apenas quando eles estão prestes a se tornar visíveis na viewport do usuário. Isso reduz o tempo de carregamento inicial da página, melhorando significativamente a experiência do usuário e o SEO.

Carregamento Progressivo: Exibe uma versão de baixa resolução da imagem primeiro, que é progressivamente substituída por uma versão de alta resolução à medida que ela carrega. Isso proporciona ao usuário uma percepção de carregamento mais rápido e evita a tela branca enquanto aguarda o download completo.

Por que usar Lazy Loading e Carregamento Progressivo?

• Melhora o tempo de carregamento da página: Menos recursos carregados inicialmente resultam em um carregamento mais rápido.
• Melhora a experiência do usuário (UX): Usuários não precisam esperar que toda a página carregue para interagir com o conteúdo acima da dobra.
• Economiza banda do usuário: Imagens não visíveis não são baixadas, economizando dados móveis.
• Melhora o SEO: O Google considera a velocidade de carregamento da página como um fator de ranqueamento.

💻 Exemplos Práticos

1. Lazy Loading com Liquid e atributo loading="lazy":

A forma mais simples de implementar Lazy Loading em imagens é usando o atributo loading="lazy" diretamente na tag . O Shopify suporta este atributo nativamente.

html

2. Lazy Loading com JavaScript:

Para maior controle e compatibilidade com navegadores antigos, podemos usar JavaScript.

javascript

document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Código de fallback para navegadores antigos
}
});

HTML correspondente:

html

3. Carregamento Progressivo com LQIP (Low Quality Image Placeholder):

Podemos usar uma versão minúscula e compactada da imagem como placeholder, codificada diretamente no HTML ou CSS.

html

🎯 Exercícios e Desafios

1. Implemente Lazy Loading em sua loja Shopify usando o atributo loading="lazy".

2. Crie um snippet Liquid para implementar Lazy Loading com JavaScript e inclua-o em sua loja.

3. Pesquise e implemente uma biblioteca JavaScript para Lazy Loading, como o lazysizes.

4. Experimente com o carregamento progressivo usando LQIP.

📝 Resumo da Aula

Aprendemos sobre Lazy Loading e carregamento progressivo, técnicas essenciais para otimizar a performance de uma loja Shopify. Vimos exemplos práticos com Liquid e JavaScript, além de dicas de boas práticas. Com essas técnicas, sua loja estará mais rápida e eficiente! ⚡️

🚀 Preparação para próxima aula

Na próxima aula, vamos explorar a criação de temas personalizados no Shopify, permitindo que você tenha total controle sobre o design da sua loja.

📚 Recursos Adicionais

• Documentação do Shopify sobre performance (link fictício)
• lazysizes – biblioteca JavaScript para Lazy Loading

Lembrem-se, a prática leva à perfeição! Testem, experimentem e explorem as diferentes opções para encontrar a melhor solução para a sua loja. Até a próxima aula! 👋