Morina

Análise de Performance
Lighthouse

Home:
Desktop:

Mobile:
PDP:
Desktop:

Mobile:

PDC:
Desktop:

Mobile:
Institucional:
Desktop:

Mobile:
Sobre a análise
As métricas são extraídas do PageSpeed Insight, que por sua vez
avalia a performance do site na primeira vez que um usuário acessa.
A estratégia de performance do VTEX IO gira em torno da melhora
gradual do caching conforme o cliente navega pelo site. Por conta
disso, a performance medida pela ferramenta costuma mostrar números
baixos, pois não considera sua evolução durante a navegação, apenas
a primeira impressão.

Possíveis melhorias

Reduzir o impacto de terceiros (TBT)

- A demanda já está contabilizando no outro, já que ambas usam o

mesmo GTM.

Códigos de terceiros (Google Analytics, por exemplo) podem afetar a

performance, pois precisam ser processados em conjunto com o código
que faz a página renderizar.
É importante que apenas scripts essenciais sejam implementados no
site, e revisar o que pode ser removido, eliminando completamente o
problema em alguns casos.
Para scripts essenciais, é possível implementar a ferramenta
Partytown, que cuida de tornar a execução do código de terceiro
paralela com a execução principal do site, fazendo com que eles não
tenham muito impacto na performance.
Essa implementação também ajuda na sugestão Minimize o trabalho da
thread principal do PageSpeed Insight.
Cumulative Layout Shift (CLS)

- demanda estimada em (12:00) para mobile.

O CLS indica mudanças inesperadas de layout na página durante o

carregamento. Por exemplo, quando entramos em um determinado site
pode ser que o banner do site não apareça inicialmente, e quando ele
enfim carrega, todo o conteúdo é jogado para baixo.
Essa pontuação quantifica a movimentação desses elementos como
mencionado no exemplo acima.
Para atingir uma boa pontuação no CLS, é preciso seguir as boas
práticas de estilização de CSS, melhorar tratativas de carregamento
de elementos dinâmicos, e garantir que as ferramentas externas não
atrapalhem a estrutura do site.

Remover código inutilizado (FCP, LCP)

- demanda estimada em (12:00)

Durante o desenvolvimento e evolução de e-commerce, é comum features

serem adicionadas, removidas e/ou substituídas através de
componentes em JavaScript. Com isso, muitas vezes resíduos de código
inutilizado ficam no repositório e podem afetar no carregamento,
pois esse código ainda precisa ser lido.
Também é possível implementar técnicas de lazyload para features
customizadas mais complexas.