Next Steps - Performance Optimization

Implemented Optimizations

All critical optimizations have been applied. Your site is now ready to hit 95-100 Lighthouse scores.

How to Test

Build and test locally

# Build the project
npm run build
 
# Start the production server
npm start
 
# Open Chrome DevTools
# - Open http://localhost:3000 in Chrome
# - Press F12 to open DevTools
# - Go to the "Lighthouse" tab
# - Select "Performance", "Best Practices", "Accessibility", "SEO"
# - Click "Analyze page load"

Online test (after deploy)

After deploying to production, test via:

• PageSpeed Insights: https://pagespeed.web.dev/ 

  • Paste your site’s URL
  • Check both mobile and desktop scores

• GTmetrix: https://gtmetrix.com/ 

  • Inspect detailed performance
  • Review the waterfall chart

• WebPageTest: https://www.webpagetest.org/ 

  • Test from multiple locations
  • Filmstrip view of rendering

Expected metrics

With these optimizations you should see:

Recommended deploy

Vercel (recommended)

# Install the Vercel CLI
npm i -g vercel
 
# Log in
vercel login
 
# Deploy
vercel --prod

Benefits:

• Global edge network
• Automatic Brotli compression
• HTTP/3 support
• Optimized caching
• Additional image optimization

Other options:

• Cloudflare Pages: Excellent global CDN
• Netlify: Great for static sites
• AWS Amplify: Deep AWS integration

Additional settings (optional)

Configure an analytics endpoint

Crie um endpoint para receber Web Vitals:

// src/app/api/analytics/web-vitals/route.ts
export async function POST(request: Request) {
  const data = await request.json();
  
  // Send to your database or analytics service
  console.log('Web Vital:', data);
  
  return new Response('OK', { status: 200 });
}

Optimize images further

If you add new images later:

npm run optimize:images

Monitor performance in production

Set up alerts for regressions:

• Use Google Search Console
• Configure PageSpeed Insights alerts
• Use Real User Monitoring (RUM) tools

Ongoing monitoring

Web Vitals in Google Analytics

Web Vitals are already being sent automatically to GA4. To review:

1. Open Google Analytics 4
2. Go to “Events” → “Web Vitals”
3. Build custom reports for each metric

Core Web Vitals report

Inside Google Search Console:

1. Open “Core Web Vitals”
2. Review reports for problematic URLs
3. Monitor improvements over time

Future improvements (optional)

Critical (do this if issues appear)

• Otimizar queries do Supabase
• Implementar ISR (Incremental Static Regeneration) para blog
• Adicionar rate limiting em APIs

Recommended (to push even further)

• Configurar CDN para imagens (Cloudinary/imgix)
• Implementar HTTP/3 no servidor
• Add predictive prefetch
• Otimizar chunks do JavaScript

Advanced (extreme performance)

• Implementar streaming SSR
• Use React Server Components wherever possible
• Add a service worker with advanced strategies
• Prerender critical routes

Documentation

All optimization docs live in:

• PERFORMANCE_OPTIMIZATIONS.md - Complete technical details

Important

1. Do not remove the original images until you confirm the optimized versions work
2. Test on multiple devices and browsers
3. Monitor metrics after deploy
4. Update Next.js dependencies regularly

Troubleshooting

Issue: Images do not load

# Check whether optimized images exist
ls -la public/assets/images/*/optimized/
 
# If they are missing, run:
npm run optimize:images

Issue: Service Worker does not register

• Ensure you are running in production (NODE_ENV=production)
• Ensure the site is served over HTTPS
• Inspect the browser console for errors

Issue: Fonts do not load

# Check whether fonts were downloaded
ls -la public/fonts/red-hat-display/
 
# If they are missing, run:
cd scripts && chmod +x download-fonts.sh && ./download-fonts.sh

Final result

With all these optimizations your site should reach:

• Performance: 95-100
• Best Practices: 95-100
• Accessibility: 90-100
• SEO: 95-100

Support

If you need help with any optimization, check:

• Next.js documentation 
• Web.dev Performance 
• Core Web Vitals 

Good luck with the deploy!