Performance Optimization with Next.js 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

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.