Category: OpenCart Tutoriais

No mundo atual, impulsionado pela internet, os usuários esperam que os sites carreguem instantaneamente. Os clientes querem que as páginas carreguem rapidamente quando visitam o seu site. OpenCart Site. Os clientes podem ficar irritados e sua empresa pode perder receita se as páginas de seus produtos demorarem muito para carregar, especialmente em dispositivos móveis, onde a velocidade da internet pode ser menor.

Gráficos grandes ou numerosos são frequentemente a principal causa de carregamento lento de páginas. As fotos de produtos podem ser arquivos grandes, mas são um componente essencial de qualquer site de comércio eletrônico. O carregamento lento (lazy loading) pode ajudar a resolver esse problema.

O desafio de desempenho em sites de comércio eletrônico

Os espaços de e-commerce da Moment são verdadeiramente visuais. Um assistente de pedidos padrão pode ter

• 20 a 50 fotos do produto
• Banners
• Miniaturas e ícones
• Seções sobre produtos relacionados

Se todas as imagens forem carregadas simultaneamente, o navegador precisará carregar cada uma delas antes que a página se torne completamente interativa. Isso leva a:

• Primeiro Contentful Paint (FCP) em ritmo mais lento
• Aumento do tempo de interação 
• Desempenho ruim em dispositivos móveis
• Uma carga de servidor mais alta
• Aumento nas taxas de recuperação

A experiência do usuário será significativamente impactada por isso, principalmente em redes mais lentas.

O que é carregamento lento?

A técnica conhecida como “carregamento lento” adia o carregamento de imagens (ou outros conteúdos) até que sejam realmente necessárias, o que geralmente ocorre quando o usuário está pronto para visualizá-las rolando a página. O carregamento lento espera até que o usuário esteja pronto para visualizar a imagem antes de carregá-la, em vez de carregar todas as imagens de uma só vez.

O carregamento lento (lazy loading) apresenta as seguintes vantagens:

• Conservação da largura de banda
• Melhor desempenho em dispositivos móveis
• SEO aprimorado e elementos essenciais da web
• Carregamento rápido da primeira página

Quando muitas imagens podem carregar simultaneamente nas páginas de produtos, o carregamento lento (lazy loading) é especialmente útil.

Por que o carregamento lento é importante

Imagine que você está folheando um catálogo de produtos. Mesmo que as imagens dos produtos estejam bem abaixo da dobra da página, seu navegador tentará carregá-las todas de uma vez ao usar o carregamento tradicional. Ao usar o carregamento lento (lazy loading), apenas as imagens que estiverem na área visível da tela ou próximas a ela serão carregadas inicialmente. As demais imagens serão carregadas gradualmente conforme o usuário rola a página.

Tanto seus clientes quanto mecanismos de busca como o Google, que priorizam sites com carregamento rápido, se beneficiarão de uma experiência mais ágil e fluida.

Exemplo prático: Página de categoria sem carregamento lento (lazy loading).

Considere este exemplo:

24 produtos em uma página de categoria, Cada miniatura = 150 KB, Peso total da imagem = 3.6 MB

Antes mesmo de carregar banners, CSS e JavaScript, o navegador precisa baixar cerca de 4 MB de imagens.

Agora considere que o visitante rolou a página apenas até a metade. Metade das imagens nunca foi visualizada, mas mesmo assim foi baixada. Portanto, tIsso é largura de banda desperdiçada e 0É aí que entra o carregamento lento.

Carregamento lento e funções vitais da web principais

Dados vitais da web. Os seguintes aspectos são diretamente afetados por imagens grandes:

• Pinte com o maior conteúdo (LCP)
• Deslocamento no Layout Cumulativo (CLS)
• Próxima interação de pintura (INP)

Carregar imagens corretamente e lentamente melhorará as métricas de desempenho, principalmente nas páginas de listagem de produtos e categorias.

No entanto, há uma coisa importante a ter em mente.

 As imagens acima da embalagem, como a imagem principal do produto em um folheto informativo, não devem ser carregadas de forma lenta (lazy loading).

Quando aplicar o carregamento lento?

O carregamento lento é mais adequado para:

• Páginas de listagem de produtos
• Páginas de categoria
• Páginas de listagem de blogs
• Páginas do fabricante
• Seções de venda adicional

Pode não ser a melhor opção para:

• Faixas de heróis acima da dobra
• Imagem principal do produto na página do produto
• Elementos visuais essenciais para a identidade visual da marca

Como implementar o carregamento lento (lazy loading) no OpenCart

Método 1: Carregamento lento em navegadores nativos

Os navegadores modernos usam a propriedade `loading=”lazy”` para fornecer carregamento lento integrado.

Exemplo:

<img src=”image.jpg” carregando=”preguiçoso” alt=”Imagem do produto”>

Etapas do OpenCart:

• Abra o arquivo do seu tema:

Versão	Caminho de arquivo
OpenCart2.x	catalog/view/theme/your_theme/template/product/category.tpl
OpenCart3.x	catalog/view/theme/your_theme/template/product/category.twig
OpenCart4.x	catalog/view/template/product/category.twig

• Localize a imagem do produto. tag.
• Altere da seguinte forma:

Antes:

<img src="{{ product.thumb }} alt="{{ product.name }}"  width="300"  height="300"

     título="{{ product.name }}">

Depois:

<img src="{{ product.thumb }}"carregando="preguiçoso"  alt="{{ product.name }}" width="300" height="300"     título="{{ product.name }}">

É só isso. JavaScript não é necessário. Além disso, esta é a maneira mais fácil e simples.

Método 2: Usando lazysizes (Melhor para navegadores mais antigos)

Passos:

1. Adicione o script lazysizes:
   

2. Abra o arquivo do seu tema com base na versão do OpenCart mencionada no Método 1 e atualize a marcação da imagem:

• Antes:
  

• Depois:
  

Método 3: Utilizando a API Intersection Observer (Controle Avançado)

API JavaScript moderna para melhor controle.

Exemplo:

const images = document.querySelectorAll(“img[data-src]”);

const observer = new IntersectionObserver((entries, observer) => {

  entradas.forEach(entrada => {

se (entrada.isIntersecting) {

   const img = entry.target;

   img.src = img.dataset.src;

      observador.desobservar(img);

}

  });

});

 

imagens.forEach(img => observer.observe(img));

Este método oferece controle total sobre o comportamento de carregamento.

Importante: Filtragem de produtos baseada em AJAX

Quando os produtos são carregados dinamicamente via AJAX:

Nativo carregando=”preguiçoso” Funciona automaticamente.

No entanto, se você estiver usando tamanhos preguiçosos, Observador de Interseção então Você deve reativar o carregamento lento após o carregamento do conteúdo AJAX.

Exemplo:

document.addEventListener('ajaxComplete', function() {

    lazySizes.autoSizer.checkElems();

});

Caso contrário, as imagens recém-injetadas podem não carregar corretamente.

Os melhores métodos para carregamento lento (lazy loading) no OpenCart

✔ Evite carregar as imagens acima da dobra.

✔ Certifique-se de que suas imagens tenham o tamanho correto; evite usar miniaturas muito grandes.

✔ Sempre utilize o PageSpeed ​​Insights para testar; otimize as imagens para o formato WebP.

✔ Sempre faça testes com o PageSpeed ​​Insights

✔ Após fazer alterações no modelo, limpe o cache do OpenCart.

Medição de desempenho antes e depois da implementação

Para avaliar o impacto do carregamento lento, siga estes passos:

Antes da implementação

Teste a página da sua categoria e registre as seguintes métricas:

• Tamanho da página
• Tempo de carregamento da página
• Pontuações principais do Web Vitals

Após a implementação

Execute os mesmos testes novamente e compare os resultados. Você deverá observar:

• Tempo de carregamento inicial reduzido
• Reduzir o Tempo Total de Bloqueio (TBT)
• Melhoria na pontuação de desempenho do Farol

As opções de implementação descritas neste guia, desde atributos HTML nativos até lazysizes e a API Intersection Observer, oferecem soluções para todos os níveis de complexidade técnica. Seja você responsável por uma pequena loja boutique ou por um catálogo de alto tráfego com várias categorias, existe uma abordagem que se adapta às suas necessidades. Comece com o Método 1 para obter resultados imediatos e avance para métodos mais complexos à medida que suas necessidades aumentarem. A otimização de desempenho não é uma tarefa pontual, mas sim um compromisso contínuo. Combine o carregamento lento (lazy loading) com compressão de imagens, conversão para WebP e um cache adequado para liberar todo o potencial de velocidade da sua loja OpenCart.

Sobre a Knowband

A Knowband é uma fornecedora confiável de plugins e extensões para e-commerce, com anos de experiência ajudando lojistas online a criar lojas mais rápidas, inteligentes e repletas de recursos. Seja qual for a plataforma em que sua loja opera — a Knowband, por exemplo —, oferece soluções completas e inovadoras para lojas virtuais. PrestaShop, OpenCartShopify, WooCommerce, MagentoSeja para a Microsoft Store ou qualquer outra plataforma importante, a Knowband oferece uma ampla gama de plugins e extensões prontos para uso que ajudam a aprimorar a funcionalidade, melhorar o desempenho e proporcionar uma melhor experiência de compra, sem a necessidade de desenvolver tudo do zero. Além dos plugins, a Knowband também oferece soluções completas. Desenvolvimento de sites e desenvolvimento de aplicativos móveis Serviços. Seja para criar uma loja virtual totalmente personalizada do zero, um aplicativo de compras para dispositivos móveis sob medida para iOS e Android ou uma integração personalizada com seus sistemas existentes, a equipe de desenvolvedores da Knowband tem a expertise necessária para transformar sua visão em realidade. Se você busca otimizar ainda mais sua loja OpenCart ou qualquer outra plataforma de e-commerce, explore o marketplace de plugins da Knowband ou entre em contato com nossa equipe para discutir uma solução personalizada que atenda aos seus objetivos de negócios. Entre em contato conosco pelo e-mail [inserir endereço de e-mail aqui]. support@knowband.com Para serviços de desenvolvimento de plugins personalizados, desenvolvimento de websites e desenvolvimento de aplicativos móveis.