Executando verificação de segurança...
1
dev4me
1 min de leitura ·

Criar site para uma industria com quase 3 mil produtos

Olá, pessoal. Espero que todos estejam bem.
Estou com algumas duvidas para criar um site, basicamente esse site tem muitos produtos, vou criar uma página apenas para eles, para que assim o usuário consiga selecionar/pesquisar os que ele deveja, no entanto, como são muitos, se eu fosse colocar todos de forma literal, vai se tornar um problema já que irá demorar demais para carregar, pois, junto a descrição do produto, haverá uma imagem. Então fiquei com duvidas do que fazer para resolver esse problema do carregamento, queria fazer com que o site carregasse os itens conforme o usuários descesse a página, assim, o site carregaria mais rápido e só carregasse o necessário conforme a iteração do usuário

Carregando publicação patrocinada...
1

Tem várias formas de resolver esse problema em diferentes níveis: Banco de dados, Front, Back, Redes. Da forma que você falou parece um lazy loading com infinite scroll, pode resolver o problema de certa forma, mas acredito que a paginação e a categorização também pode ser uma boa. Outra possibilidade é através de Cache com CDN.

Algumas bibliotecas possuem um outro método chamado virtual Scrolling presentes em frameworks como React e Vue. Depende do muito da arquitetura e contexto da sua aplicação, normalmente o lazy loading resolve de forma temporária

1

Faça paginação dos produtos, salve a imagem dos produtos em webp, se possível com no máximo 1000px, vai dar mais ou menos uns 100 e pouco a 200KB. Salve junto uma thumbnail para cada imagem, em webp também, se tiver até uns 150px de altura, não vai passar de 5 a 10KB. Tudo isso vai deixar o seu carregamento mais rápido. Aconselho usar Nginx como servidor web, o cache dele é bom e bem rápido.

Outras coisas que você pode deve fazer é separar os produtos por categorias. Você pode fazer uma paginação simples, ou até mesmo uma paginação de carregar produtos conforme rola a página com Livewire e AlpineJS: Exemplo 1 e Exemplo 2.

1

Faça paginação dos resultados.
Crie categorização e tags para cada produto, desta forma a pessoa pode pesquisar por uma categoria que tem 35 produtos e você mostrar em duas páginas de 20 resultados cada por exemplo.
Permita que o usuário faça pesquisas por mais de um filtro.
Exemplo:
categoria brinquedos, tags pilha recarregável, texto carrinho, paginação 20.