React Faster- Performance Optimization in React Apps

Intro

• What is performance.
• Why it’s important.
• Perceived vs real performance.
• How fast is fast enough?
• Performance budget (Milestones, quantity, rules).
• Milestones.
• First paint.
• First contentful paint.
• First meaningful paint.
• Time to interactive.
• The RAIL model.
• The importance of measuring.
• The three aspects of performance (dev, delivery, run time).

Tools

• Performance audit.
• Performance in devtools.
• External services (Web PageTest, pingdom, GA).

Delivery

• Anatomy of Web page loading.
• Server Side Rendering.
• Intro to NextJs.
• Static site.
• Classic vs SPA.
• Bundle size.
• Code splitting.
• Assets optimization.
• Sprites.
• Cache headers.
• Service worker cache.
• Using a CDN.
• Above the fold rendering.
• Prefetching.