O Desafio do Lighthouse
Se você leu meu último post, sabe que eu estava na luta pelos últimos 8 pontos do SEO para alcançar a pontuação máxima. Mas não era só isso — os outros índices ainda deixavam a desejar. Performance, Acessibilidade e Best Practices precisavam de atenção.
A meta era clara: 100/100 em todos os critérios.
──────────────────────────────────────────────────────────────
A Jornada Técnica
Performance & SEO ✅
A questão do SEO foi superada! Em relação à performance, implementei:
1- Lazy loading nos componentes e hooks
2- Code splitting otimizado
3- Build de produção completamente otimizado com Next.js 15
──────────────────────────────────────────────────────────────
Entendendo as Otimizações de Performance
1- Lazy Loading: Carregue apenas o necessário
O problema era simples: por que carregar TODOS os 12 cards de projetos se o usuário ainda está vendo a introdução? Por que trazer a seção de newsletter antes dela aparecer na tela?
Como implementei:
Utilizei o React.lazy() combinado com dynamic imports do Next.js para componentes pesados:
// Componente carregado apenas quando necessário
const Newsletter = dynamic(() => import('@/components/Newsletter'), {
loading: () => <div>Carregando...</div>
})
Para as imagens, o Next.js já faz lazy loading automaticamente com o componente Image, mas configurei o loading="lazy" explicitamente e usei priority={false} para imagens abaixo da dobra.
Por que funciona:
1- Reduz o JavaScript bundle inicial em ~40%
2- Melhora o Time to Interactive (TTI)
3- Carrega recursos apenas quando o usuário vai vê-los
4- Browser usa menos memória
──────────────────────────────────────────────────────────────
2- Code Splitting: Divida para Conquistar
Code splitting significa dividir seu código JavaScript em pedaços menores (chunks) em vez de um único arquivo gigante.
Como o Next.js faz automaticamente:
O Next.js já faz code splitting por rota (cada página é um chunk separado), mas otimizei ainda mais criando rotas dinâmicas para os posts do blog:
// app/blogs/[slug]/page.tsx // Cada post é carregado sob demanda
E separei bibliotecas pesadas em chunks independentes. Por exemplo, o editor de posts (que só admin usa) não é carregado para visitantes normais.
Como implementei manualmente:
// Carregar biblioteca pesada apenas quando necessário
const loadEditor = async () => {
const module = await import('react-markdown')
return module
}
Por que funciona:
1- Visitantes carregam apenas o código da página que estão vendo
2- Bibliotecas pesadas não bloqueiam o carregamento inicial
3- First Contentful Paint (FCP) melhora drasticamente
4- Cada rota tem seu próprio bundle otimizado
──────────────────────────────────────────────────────────────
3. Build de Produção: Otimização Máxima
Durante o desenvolvimento, usamos npm run dev, mas para produção, o npm run build faz mágica.
O que o build de produção faz:
Minificação: Remove espaços, comentários e reduz nomes de variáveis
// Desenvolvimento
function calculateTotalPrice(items) {
return items.reduce((total, item) => total + item.price, 0)
}
// Produção (minificado)
function c(i){return i.reduce((t,i)=>t+i.p,0)}
Tree Shaking: Remove código não utilizado
Se você importa apenas useState do React, não traz o React inteiro!
Static Site Generation (SSG): Páginas são geradas em build time
// next.config.js
output: 'export' // Gera HTML estático
Meu blog usa SSG para páginas estáticas e ISR (Incremental Static Regeneration) para posts que mudam:
export const revalidate = 3600 // Revalida a cada 1 hora
Por que funciona:
1- JavaScript 70% menor (minificado + tree shaking)
2- Imagens até 80% menores (WebP vs PNG)
3- Tempo de carregamento reduzido drasticamente
4- SEO melhor (páginas pré-renderizadas)
──────────────────────────────────────────────────────────────
Acessibilidade: O Último Obstáculo 🎯
Accessibility estava em 85 pontos. O Lighthouse apontava problemas simples, mas cruciais:
Os problemas identificados:
❌ Faltava aria-label no botão do menu mobile
❌ Links para GitHub e LinkedIn sem labels descritivos
❌ Contraste de cor inadequado na seção Newsletter
As Correções:
// Antes
<button>
<MenuIcon />
</button>
// Depois
<button aria-label="Abrir menu de navegação">
<MenuIcon />
</button>
E ajustes no contraste de cores da Newsletter para cumprir os padrões WCAG.
Alterações feitas e... VOILÀ!
──────────────────────────────────────────────────────────────
🎊 A Surpresa do Lighthouse
Não sabia que quando você atinge 100 pontos em todos os critérios, o Lighthouse solta confetes pela tela como uma verdadeira celebração! 🎉
Foi um momento especial. Pode parecer besteira, mas me senti genuinamente recompensado. É a ferramenta reconhecendo o esforço e atenção aos detalhes. 😊
──────────────────────────────────────────────────────────────
Migração: AWS Amplify → Vercel
Com a confiança de ter um site perfeitamente otimizado, chegou a hora da migração completa.
Setup anterior: AWS Amplify
Setup atual: Vercel
Por que a mudança?
O deploy já estava funcionando perfeitamente no Vercel
Bastava redirecionar o DNS do Route 53
Processo simples, prático e rápido
A migração foi suave — em menos de 10 minutos, tudo estava rodando no novo ambiente com SSL ativo e performance impecável.
──────────────────────────────────────────────────────────────
Reflexões Finais
Estou muito animado com esse projeto! Além de todo o aprendizado técnico que a construção deste blog me proporcionou, ter esse cantinho para escrever o que eu quiser é libertador.
Mas o mais importante: escrever sobre o processo me ajuda a:
1- Reforçar o aprendizado— escrever ainda é a melhor forma de aprender
2- Documentar a jornada— revisitar decisões técnicas
3- Ajudar outras pessoas— se alguém enfrentar os mesmos desafios, já tem um guia
Se você está construindo seu portfolio ou blog, minha dica é: não se contente com "funciona". Invista tempo em acessibilidade, performance e SEO. A diferença é notável e seu trabalho se destaca.
──────────────────────────────────────────────────────────────
Tech Stack
Framework: Next.js 15 + TypeScript
Styling: Tailwind CSS
Hosting: Vercel
CMS: Sistema próprio de blog com CRUD
Forms: Formspree
Analytics: Preparado para integração
E você, já testou seu site no Lighthouse? Compartilha os resultados nos comentários! 👇
#WebDevelopment #NextJS #Frontend #Lighthouse #WebPerformance #Accessibility #SEO #TypeScript #TailwindCSS #Vercel #DevJourney
