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

[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.

Carregando publicação patrocinada...
1
scheremetta

[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 :(

1
1
Pilati

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?

1
theProgrammerWolf
Autor
Autor

Estou utilizando o Next/Image para carregar as imagens. Algumas estão no assets do projeto, como o boneco do Hero, as imagens do carrousel do Sobre, e a logo. O restante, como logo das empresas, imagens de projetos e os ícones de tecnologia estão sendo puxados via requisição ao CMS (Hygraph). Antes de subir as imagens, tanto as que estão contidas dentro de Assets quanto dentro do CMS, eu comprimi elas, e também as que eu pude converter em Webp, eu converti...