React Faster – React Webapp Performance
2 days
Overview
The web has evolved. Today’s web applications are more powerful than ever and do a lot more than just show some content. The users of the web have also evolved. They know there are alternatives and they expect an excellent experience from the services they are using.
A large part of the user experience comes from how fast a web app is. Research has shown that the performance of a web app has a direct effect over user engagement and thus over the business aspects. This is the reason most companies today take performance seriously and employ a range of techniques to keep it in shape.
In this course, we will learn what we mean when we say performance, why it’s important, and how we can keep it under control. We will learn many tools, techniques, and best practices, which are available for us as web developers to optimize performance in React apps, and in general.
Prerequisites
- Basic familiarity with JS.
- Basic familiarity with the WEB world including HTTP, CSS, HTML.
- Some React experience is recommended.
Audience
Front-end developers.
Course Content
Intro
- What we mean by performance
- Why it’s important
- Perceived vs real performance
- How fast is fast enough?
- The RAIL model
- Browser rendering pipeline
- Performance budget
- Milestones
- The importance of measuring
- The three aspects of web app performance
Delivery
- Anatomy of web page loading
- Server-Side Rendering
- SSR frameworks
- Static site
- Classic vs SPA
- Bundle size
- Code splitting
- Assets optimization
- Using sprites
- Understanding cache headers
- Service worker cache
- Using a CDN
- Above the fold rendering
- Prefetching
Runtime
- React components
- React profiling tools
- Virtual dom
- Reconciliation
- Wasteful renders
- Wasteful DOM updates
- Memorization
- Virtualization
- Using placeholders
- Dealing with hotspots
- Webworks
- Web Assembly
- Timing calculations
- Request an animation frame
- Request idle callback
Development
- Webpack plugins
- Webpack performance
- Hot module reload
- Using TypeScript
- Prettier
Tools
- Performance audit
- Performance in DevTools
- External services
