Next.js Performance & Optimization Training
Optimize your Next.js applications for maximum performance with this focused 2-day training. Learn the techniques that top engineering teams use to achieve perfect Lighthouse scores, fast Time to First Byte, and excellent Core Web Vitals across all devices and network conditions.
Training Details
Section titled “Training Details”| Duration | 2 days (16 hours) |
| Level | Advanced |
| Delivery | In-person, Live online, Hybrid |
| Certification | N/A |
Who Is This For?
Section titled “Who Is This For?”- Senior frontend developers responsible for application performance
- Next.js developers optimizing production applications
- Performance engineers working with React and Next.js
- Teams preparing for high-traffic launches or scaling existing apps
- Engineering leads establishing performance budgets and standards
Learning Outcomes
Section titled “Learning Outcomes”After completing this training, participants will be able to:
- Measure and improve Core Web Vitals (LCP, FID, CLS, INP)
- Optimize images, fonts, and third-party scripts
- Implement advanced caching strategies across the rendering pipeline
- Configure code splitting and lazy loading for optimal bundle sizes
- Profile and diagnose performance bottlenecks in Next.js applications
- Establish performance budgets and monitoring in CI/CD pipelines
Detailed Agenda
Section titled “Detailed Agenda”Day 1: Asset Optimization and Rendering
Section titled “Day 1: Asset Optimization and Rendering”Module 1: Core Web Vitals and Measurement
- Understanding LCP, FID, CLS, and INP
- Lighthouse, WebPageTest, and Chrome DevTools profiling
- Real User Monitoring vs synthetic testing
- Hands-on: Audit an application and create a performance baseline
Module 2: Image and Font Optimization
- next/image component and automatic optimization
- Responsive images, formats (WebP, AVIF), and sizing strategies
- next/font for zero-layout-shift font loading
- Third-party font optimization and subsetting
- Hands-on: Optimize a media-heavy page from 40 to 95+ Lighthouse score
Module 3: Rendering Strategies
- Static rendering vs dynamic rendering
- Partial prerendering and streaming
- Edge rendering and regional deployment
- Choosing the right rendering mode per route
- Hands-on: Configure hybrid rendering for different page types
Day 2: Bundle Optimization and Caching
Section titled “Day 2: Bundle Optimization and Caching”Module 4: Code Splitting and Bundle Analysis
- Automatic code splitting in Next.js
- Dynamic imports with next/dynamic
- Lazy loading components and libraries
- Bundle analysis with @next/bundle-analyzer
- Hands-on: Reduce initial bundle size by 40% with strategic splitting
Module 5: Caching Architecture
- Request memoization and data cache
- Full route cache and router cache
- Cache invalidation strategies
- CDN caching and edge configuration
- Hands-on: Implement multi-layer caching with tag-based invalidation
Module 6: Production Performance Monitoring
- Next.js built-in analytics and speed insights
- Performance budgets in next.config.js
- CI/CD performance gates with Lighthouse CI
- Real-time monitoring and alerting
- Hands-on: Set up automated performance regression detection
Prerequisites
Section titled “Prerequisites”- Strong Next.js experience (App Router, Server Components)
- Understanding of React rendering lifecycle
- Familiarity with browser DevTools and network analysis
- Production deployment experience helpful
Delivery Formats
Section titled “Delivery Formats”| Format | Description |
|---|---|
| In-Person | On-site at your company’s location, hands-on with direct interaction |
| Live Online | Interactive virtual sessions with screen sharing and real-time labs |
| Hybrid | Combination of on-site and remote sessions, flexible scheduling |
All formats include hands-on labs, course materials, performance audit checklists, and post-training support.