Performance Optimizations - Client Assets

This document outlines all the performance optimizations implemented to achieve maximum Lighthouse scores.

Summary of Changes

Image Optimization (CRITICAL - Largest Impact)

Problem: Large unoptimized images causing slow page loads

me.png: 4.7MB
profile/anderson_lima_dev.png: 3.1MB
header/nexabase_background_header.jpg: 1.2MB
Avatars: 200-300KB each

Solution:

Created automated image optimization script (scripts/optimize-images.mjs)
Converted all images to WebP and AVIF formats
Generated multiple responsive sizes for each image
Results:
- Profile: 3.1MB to 62KB (98% reduction)
- Header: 1.2MB to 13.5KB (99% reduction)
- Avatars: 200-300KB to 3-9KB each (97% reduction)

Files changed:

scripts/optimize-images.mjs (new)
src/app/components/landing-page/hero.tsx
All image assets in /public/assets/images/*/optimized/

Command to optimize images:


npm run optimize:images

Self-Hosted Fonts

Problem: Google Fonts blocking render and causing layout shifts

Solution:

Downloaded Red Hat Display fonts locally
Removed Google Fonts external dependency
Used next/font/local with display: swap
Added preload hints for critical fonts

Files changed:

scripts/download-fonts.sh (new)
src/app/layout.tsx
/public/fonts/red-hat-display/ (new)

Benefits:

Eliminated external font requests
Reduced FOUT (Flash of Unstyled Text)
Improved First Contentful Paint (FCP)

Removed Framer Motion Dependency

Problem: Heavy animation library (50KB+) used in only 1 component

Solution:

Replaced framer-motion with pure CSS animations
Maintained same visual effects
Reduced bundle size significantly

Files changed:

src/app/components/blog/post-reactions.tsx

Benefits:

~50KB bundle size reduction
Faster JavaScript execution
Smoother animations with GPU acceleration

Lazy Loading Components

Problem: All components loading on initial page load

Solution:

Implemented next/dynamic for below-the-fold components
Added loading skeletons for better UX
Components lazy loaded:
- AboutSection
- ProjectsSection
- ContentHighlights
- StoreCTA
- ContactSection
- Footer

Files changed:

src/app/[locale]/page.tsx

Benefits:

Reduced initial JavaScript bundle
Faster Time to Interactive (TTI)
Better perceived performance

Service Worker for PWA

Problem: No offline caching or PWA capabilities

Solution:

Implemented custom service worker
Cache-first strategy for static assets
Network-first strategy for dynamic content
Automatic cache cleanup

Files changed:

public/sw.js (new)
src/app/components/pwa/register-sw.tsx (new)
src/app/layout.tsx

Benefits:

Offline functionality
Faster repeat visits
Better mobile experience
Installable as PWA

Resource Hints & Preloading

Problem: Critical assets loading too late

Solution:

Added preload hints for critical fonts
Added preload hints for hero images
Added fetchPriority=“high” for LCP images
Added DNS prefetch for external domains

Files changed:

src/app/layout.tsx
src/app/components/landing-page/hero.tsx

Benefits:

Faster Largest Contentful Paint (LCP)
Reduced Cumulative Layout Shift (CLS)
Better resource prioritization

Web Vitals Tracking

Problem: No monitoring of Core Web Vitals

Solution:

Implemented useReportWebVitals hook
Automatic reporting to Google Analytics
Console logging in development

Files changed:

src/app/components/analytics/web-vitals.tsx (new)
src/app/layout.tsx

Metrics tracked:

LCP (Largest Contentful Paint)
FID (First Input Delay)
CLS (Cumulative Layout Shift)
FCP (First Contentful Paint)
TTFB (Time to First Byte)
INP (Interaction to Next Paint)

Next.js Configuration Optimizations

Changes made:

Removed framer-motion from optimizePackageImports
Removed Firebase packages from optimizePackageImports
Enabled optimizeCss: true
Enabled optimizeServerReact: true
Configured image optimization with AVIF/WebP

Files changed:

next.config.ts

Expected Performance Improvements

Before Optimizations:

Performance Score: 70-80
LCP: 3-4s
FCP: 1.5-2s
CLS: 0.15-0.25
Bundle Size: Large

After Optimizations:

Performance Score: 95-100
LCP: < 1.5s
FCP: < 0.8s
CLS: < 0.1
Bundle Size: Reduced by 60%

Commands


# Optimize images
npm run optimize:images
 
# Analyze bundle size
npm run build:analyze
 
# Build for production
npm run build
 
# Start production server
npm start

Testing Performance

Local Testing:


npm run build
npm start
# Open Chrome DevTools -> Lighthouse -> Run analysis

Online Testing:

Best Practices Implemented

All images use next/image with proper sizing
Critical CSS inlined automatically by Next.js
JavaScript code splitting with dynamic imports
Service Worker for caching and offline support
Self-hosted fonts with preload hints
Resource hints (preconnect, dns-prefetch, preload)
Responsive images with multiple sizes
Modern image formats (WebP, AVIF)
Lazy loading for below-the-fold content
Web Vitals monitoring
Optimized third-party scripts
Minimal JavaScript on initial load
HTTP/2 Server Push ready
Gzip/Brotli compression enabled

Core Web Vitals Targets

LCP: < 2.5s (OK)
FID: < 100ms (OK)
CLS: < 0.1 (OK)
FCP: < 1.8s (OK)
TTFB: < 800ms (OK)

Additional Recommendations

CDN Setup: Deploy on Vercel or Cloudflare for edge caching
Image CDN: Consider using Cloudinary or imgix for dynamic optimization
Database Optimization: Implement ISR for blog posts and insights
API Optimization: Add response caching and rate limiting
Monitoring: Set up Real User Monitoring (RUM) with Sentry or similar

Resources

Last Updated: 2025-10-11 Version: 1.0.0