Melhorando load inicial
Melhorando load inicial
Introdução
A performance é um ponto cada vez mais crítico na criação de uma loja e, para garantir que seu tema está dentro das nossas melhores práticas de otimização, criamos este curso totalmente voltado para pontos de melhoria em um tema.
Para este curso, podemos usar um tema já completo para focarmos apenas em pontos de melhoria.
Clone o repositório:
https://github.com/vtex-apps/demostore-theme
git clone https://github.com/vtex-apps/demostore-theme
Bloco de fold
Nem todo conteúdo de uma página precisa ser carregado de primeira. Inicialmente quando um usuário entra na loja existe um limite do quanto este consegue ver. É por isso que com o bloco de __fold__
você consegue controlar o que inicialmente será visto, diminuindo assim a necessidade de carregamento de dados no load inicial. Automaticamente, o que fica abaixo do __fold__
é então carregado depois que o essencial já estiver disponível e o usuário começar a scrollar para baixo.
Atividade
-
Rode um
vtex workspace reset
garantindo que nenhum outro tema está linkado na loja -
Vá até o diretório do repositório clonado e linke, então, o tema oferecido:
vtex link
Você deve ver a seguinte loja:
-
O conteúdo abaixo da prateleira de Clearance não pode ser visto pelo usuário, vamos então otimizar o primeiro carregamento, postergando o fetching deste. Para isso, no arquivo
home.jsonc
no diretório/store/blocks/home/
adicione o bloco__fold__
logo abaixo do"shelf#clearance"
:"store.home": { "blocks": [ "flex-layout.row#slider", "shelf#new-arrivals", "shelf#clearance", + "__fold__", "flex-layout.row#newsletter", "rich-text#brands", "flex-layout.row#brands", "rich-text#instagram", "flex-layout.row#instagram" ] }
No seu navegador, então, rode um CTRL(Cmd) + -
(dando um zoom out para conseguir enxergar toda a página) e perceba que tudo que está abaixo da Clearance
é carregado posteriormente (assim que o scroll é executado) ao que está acima:
Está com dúvidas?
Veja o gabarito para esta etapa ou acompanhe nosso [office hours] no canal VTEX Developers(https://www.youtube.com/c/VTEXDevelopers)
Ajude-nos a fazer este conteúdo melhor!
Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!
Faça uma contribuiçãoUpdated 10 months ago