Performance Optimization with Next.js Training
This 3-day course teaches participants how to optimize Next.js applications for maximum performance. Covering image and font optimization, code splitting, caching strategies, ISR/revalidation, edge runtime, bundle analysis, Core Web Vitals, and production monitoring. Participants will take a slow application and systematically optimize it to achieve 95+ Lighthouse scores.
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
| Duration | 2 days (16 hours) |
| Level | Advanced |
| Delivery | In-person, Live online, Hybrid |
| Certification | N/A |
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
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
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
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
- 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
| 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.
Ready to get started?
Request a training quote for your team — in-person, live-online, or hybrid.