[Ajuda] Problemas de Peformance em Portfólio feito em Next 14 (App Router)
Pessoal, eu estou desenvolvendo meu portfólio usando Next App Router, e queria um help. Na verdade, meu portfólio já está hospedado em produção, mas em ambiente de produção eu estou percebendo uns gargalhos de performance que rodando localmente eu não tive a mesma experiência (na minha máquina funciona rs), e queria ajuda de alguém que já desenvolveu bastante com Next para entender essa causa...
Ele é desenvolvido com Next 14 usando o App Router, com Tailwind, Shadcn/ui, Aceternity UI, Framer Motion, uma animação com Lottie e integração com um CMS para puxar as minhas informações dinamicamente. O CMS em questão é o Hygraph, então o gargalo pode estar acontecendo por conta dessas requisições ao CMS...
Segue o link do meu portfólio, e fiquem a vontade também para me passarem feedbacks se encontrarem algo que possa melhorar 😁!
https://marioaugustolima.com.br/
link do repositório com o código: https://github.com/limaCoder/personal-portfolio
OBS 1: Mesmo com esse aparente problema de performance, meu site está com ótimas notas no Lighthouse, obtendo entre 91 e 100 em Performance, Acessibility, Best Practices e SEO.
OBS 2: Relevem a seção pobre de projetos, ela está em construção ainda. Como já estou empregado na área há um tempo, acabo tendo dificuldade em encontrar tempo para me dedicar a projetos pessoais, mas agora tenho como objetivo melhorar essa parte.
[OPINIÃO SOBRE O DESIGN] Minha honesta e singela opinião:
Eu achei meio desconexo o estilo que está sendo utilizado na página. Não parece que faz parte de um "todo", sabe?
Parece que não é o mesmo design system para a página inteira.
Você começa apresentando um 3D na primeira dobra com um motion blur suave de fundo. Não tem transição suave para a segunda dobra e já de cara:
BOOOMMMM, toma um carrossel de imagens animados com um gradiente bem forte.
E logo depois outro boom:
Um fundo em grade com uma motion flat.
Descendo um pouco mais, tem as tecnologias com o blur gigante de efeito neon.
E desce mais um pouquinho....
No contato temos também um grid com fonte luminosa!
Meu feedback é:** mantenha consistência no estilo visual**.
Acho legal querer abordar vários estilos, mas levando em consideração que estamos falando de um site em que todas as informações e visuais devem conversar.
Não que o site todo precise também de um "grid", esqueci o nome agora de como isso é chamado, mas a parte de ter uma referência de onde se inicia e encerra o conteúdo, fazer o "container" pai ter o mesmo tamanho, cada dobra do site tem um padding/margin diferente.
Enfim, sucesso, te entendo sobre os projetos pessoais porque estou até hoje no "em andamento", tá difícil arrastar o card no Jira :(
Abri seu portifólio em uma guia anônima e rolei com uma velocidade de scroll constante até o fim da página com o inspetor aberto.
Percebi que ocorre um spike sempre que uma imagem é carregada. Como é feito o carregamento das imagens?