The Ultimate React and Next.js Performance Guide
The place for the frontend devs "in search of answers" about anything web performance related in React and Next.js land.
✍️ Quick notes:
As the guide is currently work-in-progress the table of contents will be likely changed multiple times to reflect structural or topical changes as I refine the work.
Please read the Announcement Post to learn about how I plan to deliver the guide. TLDR; It’s free here on Substack, but later I plan to compile it into a standalone book.
The ordering of the chapters is not final.
The Ultimate Guide to High Web Performance React and Next.js Applications
Introduction: The Ultimate Guide to High Web Performance React and Next.js Applications
What it Takes to Become a Badass Frontend Ninja Master
Performance is a State of Mind
The Call to Adventure
The Importance of Web Performance in Modern Web Development
About The Impact of Web Performance on Multiple Dimensions
The Unique Challenges of Modern Web Applications
Special Considerations for React.js and Next.js Performance
Learnings From The Fastest Next.js App of The Galaxy
Inspecting The Champion of All Times
The One True Goal of Performance Optimization
Key Takeaways
React Performance Optimization Tools and Techniques
Generic Optimizations: VDOM, State Updates, Component Lifecycle
Reduce Forced Synchronous Layouts
Throttle or Debounce Event Handlers - Infinite Scroll and Search Use Cases
Lazy Loading Components
Optimizing State Management
React.Profiler API
How to Use The React Developer Tools for Performance Optimization
Inspecting Components
Profiling Component Performance, Break on Update
Component Filtering
Highlighting Updates
Comparing Profiling Sessions (Render durations, Commit frequency, Component flame graph)
Introduction to Core Web Vitals With React and Next.js
First Contentful Paint (FCP)
Largest Contentful Paint (LCP)
Cumulative Layout Shift (CLS)
Time to Interactive (TTI)
You Can’t Optimize What You Can’t Measure: Performance Scoring
Implementing Critical Render Path Optimization With React and Next.js
What’s a Critical Rendering Path?
Finding the Critical Rendering Path of Your Page(s)
RRR: Remove, Reorder, Reduce
Responsive Design and the Critical Rendering Path - A Next.js API Approach
Top 6 Next.js Performance Optimization Techniques
How to Choose a Rendering Strategy (SSR, SSG, ISR, CSR, RSC)
Implementing Custom Cache Controls
Effective Use of Built-in Optimization Tools, next/image, next/script, next/link
Code Splitting And Dynamic Imports
Optimizing API Routes
Bundle Analysis And Eliminating Duplicates
All That’s There to Know About Lazy Loading in React and Next.js Apps
Lazy Loading: What is it And How it Works
The DPS of Lazy Loading
Implementing Lazy Loading in React
Lazy Loading Is The Second Step in a Combo Move: It Starts With Code Splitting
What to Lazy Load and When?
Identifying The Target
Lazy Loading With Next.js
More Tools in Next’s Arsenal With Lazy Loading Powers
Final Warning: When Not to Lazy Load
Challenge: Share The Diff
Utilizing Service Workers to The Max
Intro to Service Workers
The Service Worker’s Lifecycle: Writing and Registering Your First Worker
The Cache API: How to Cache And Server Static Assets And More
Offline Behavior & Background Sync
The Push API
Case Studies About The Business Benefits of Implementing PWAs
Updating and Debugging Service Workers
Customizing Service Workers in CRA and Next.js
Workbox
The Snappiest Static Assets On The Planet
Font Optimization Techniques
Ideal Image Delivery
HTML, CSS, JS And Their React + Next.js Specific Concerns
Resource Compression
The Ultimate Guide to The Client-Side Browser Cache
Exploring The 11 Parameters of The Cache-Control Header
How to Use Last-Modified
How to Use ETag
Cache Invalidation Strategies for Single Page Applications
How to Use Storybook for Web Performance Optimization
Storybook as a Performance Benchmarking Tool
Performance-Aware Component Design
Guide to Measuring Performance and Enforcing Performance Budgets.
Performance Monitoring: Integrating Storybook Into The CI Pipeline
The RAIL Model, the React and the Next.js
Learn The Basics of The RAIL Model And Its User-Centric Approach to Web Performance Optimization
Response - What to NOT do in The Render Method
Animation - How to Implement Them Efficiently With React & Family
Idle - How to Free Up The Main Thread From The Burdens of React and Next.js
Load - Next.js Rendering Strategies, Lazy Loading, Caching And More
Uncommon Usages of Native Web APIs for Performance Optimizations + React Examples
Intersection Observer
Resize Observer
Navigation and Resource Timing API
requestAnimationFrame
Overview of Web Workers and Their Use for Faster Page Rendering
How to Work With Web Workers
Web Workers and React
Usage With Redux, Hooks and Images
Interesting Use Cases: Offloading Data Manipulation, Image Processing, Background Data Syncing, Background Indexing for Fast Search
What is a Performance Culture and How to Build One?
The Importance of Systemic Performance Awareness For The Business
How to Communicate Performance Concerns to Business Stakeholders
Translate Business Objectives into Performance Metrics
How to Monitor and Evaluate Progress
Reporting the Financial Consequences of Web Performance Optimizations
How to Use Google Lighthouse For Advanced Performance Measurements
Installing Google Lighthouse
Running a Lighthouse Audit
Analyzing Lighthouse Reports: Performance Metrics, Opportunities, Diagnostics
Continuous Performance Monitoring
Sharing and Comparing Lighthouse Reports
How to Use WebPageTest For Advanced Performance Measurements
A Recap of WebPageTest's Key Metrics Including SpeedIndex
Analyzing WebPageTest Results: Waterfall Charts, Filmstrip View, Custom Metrics
Continuous Performance Monitoring with WebPageTest
The Waterfall Charts' Compare Feature
Best Practices and Tips for Effective Profile Comparison