Embora as velocidades globais de internet tenham melhorado significativamente—atingindo uma média de 90,67 Mbps na banda larga fixa e 44,67 Mbps nas conexões móveis no início de 2024—muitos clientes ainda enfrentam conexões mais lentas dependendo da localização e das condições da rede. Por isso, é essencial garantir que suas páginas de produto carreguem o mais rápido possível para todos os clientes.
Uma solução simples é adicionar lazy load às suas páginas. Lazy loading é uma estratégia para identificar recursos como não bloqueantes e carregá-los apenas quando necessário, encurtando o caminho crítico de renderização e reduzindo o tempo de carregamento da página. Ele é usado principalmente para imagens em um site.
Benefícios do Lazy Loading
Por um lado, ele melhora o desempenho e a velocidade. O lazy loading impacta diretamente o desempenho da loja ao reduzir os tempos de carregamento inicial, melhorar métricas do Core Web Vitals como Largest Contentful Paint (LCP) e minimizar o uso de recursos do servidor—métricas críticas que o Google considera ao ranquear sites. Por outro, ele faz com que seus clientes sintam que os produtos estão carregando mais rápido, em um fenômeno chamado desempenho percebido.
Você pode adicionar lazy load à sua loja Shopify das seguintes formas.
Use o Lazy Loading Nativo do HTML
O lazy loading nativo agora é compatível com todos os principais navegadores, como Chrome, Firefox, Safari e Edge. A abordagem mais simples e moderna é adicionar o atributo loading=”lazy” diretamente nas suas tags de imagem. Veja como fazer:
- Acesse o admin da Shopify e selecione Loja virtual.
- Selecione Temas e escolha o tema que você pretende editar.
- Selecione Ações e clique em Editar código.
- Encontre as tags de imagem nos arquivos de template (como templates de produto, páginas de coleção etc.).
- Adicione o atributo loading=”lazy” às tags de imagem para imagens que aparecem abaixo da dobra (below the fold).
<img src="image.jpg" loading="lazy" alt="Product image" />Importante: Não aplique lazy-load em imagens que provavelmente estarão visíveis na viewport quando a página carregar, especialmente imagens de LCP (Largest Contentful Paint), pois isso pode prejudicar o desempenho. Para imagens acima da dobra (above the fold), use loading=”eager” em vez disso.
Adicionar script de lazy loading (Método legado)
Se você precisa oferecer suporte a navegadores mais antigos ou quer usar uma abordagem com biblioteca JavaScript, ainda pode usar este método. Veja como:
- Acesse o admin da Shopify e selecione Loja virtual.
- Selecione Temas e escolha o tema que você pretende editar.
- Selecione Ações e clique em Editar código.
- Vá até o diretório Layouts .
- Clique em themes.liquid.
- Em seguida, cole o código abaixo antes da tag </head> no editor de código online.
{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}Salve as alterações. Agora, as imagens com a classe lazyload serão carregadas com lazy loading.
Adicionar lazy loading a imagens específicas
Você também pode definir quais imagens devem ser carregadas com lazy loading se não quiser aplicar a configuração à loja inteira. Se você quiser que uma imagem específica use lazy load, aplique a classe ‘lazyload’. Além disso, substitua o atributo src por data-src.
<!-- Before -->
<img src="image.jpg" />
<!-- After -->
<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="image.jpg" />Adicionar lazy loading ao documento JS
Se você adicionar este código Javascript ao arquivo js.liquid ou .js no diretório Assets da sua loja, o lazy load será adicionado ao site.
$(document).ready(function(){$("img.lazyload").lazyload();});Usando um app
Se você não se sente à vontade para editar arquivos do tema e precisa de uma solução rápida, pode conferir apps que oferecem essa funcionalidade.
Loadify
Melhore o desempenho e a experiência do usuário da sua loja Shopify com telas de carregamento personalizáveis e transições suaves entre páginas com o Loadify. Implemente lazy loading e previsão de links para aumentar a velocidade das páginas, adiando o carregamento de imagens e vídeos até que sejam necessários, enquanto aproveita a previsão de links baseada em hover.
Tiny SEO Image optimize
O TinyIMG oferece um conjunto completo de ferramentas de otimização de velocidade de página e SEO, incluindo texto ALT de imagens, JSON-LD, gerenciamento de página 404, redirecionamentos 301, SEO de plugins, rich snippets e um compressor de imagens para SEO. Ele também conta com descrições geradas por IA, redimensionamento de fotos, compressão de imagens, lazy loading, criação de sitemap e integração com IA do ChatGPT.
Conclusão
Lazy loading é uma técnica eficaz para melhorar o desempenho e a velocidade da sua loja Shopify ao adiar o carregamento de imagens até que elas sejam necessárias. O lazy loading de imagens é uma técnica poderosa que pode ajudar a melhorar o desempenho do site ao reduzir o tempo de carregamento inicial da página e o uso total de banda, e com a disponibilidade de navegadores modernos e APIs JavaScript, implementar lazy loading ficou mais fácil do que nunca.
Ao implementar lazy loading por meio de atributos nativos do HTML (a abordagem moderna recomendada) ou por meio de scripts, você garante uma experiência de navegação mais fluida para os usuários, especialmente para aqueles com conexões de internet mais lentas. Isso pode aumentar a satisfação do cliente e, potencialmente, elevar as taxas de conversão. Adicionar lazy loading à sua loja Shopify é um processo simples que pode trazer benefícios significativos tanto para o desempenho da sua loja quanto para a experiência dos seus clientes, especialmente à medida que a velocidade de carregamento continua sendo um fator crítico para o sucesso no e-commerce.
