We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
Power Fixing React Performance Woes – Josh Goldberg, React Advanced 2023
Learn how to tackle React performance woes by identifying issues, implementing fixes, and leveraging tools like linting, caching, and automation to improve page loading, rendering, and user experience.
- Normally, when tackling a performance issue, four phases are undertaken: identification, seeing what’s wrong, ideally with something measurable, and fixing the issue.
- The importance of performance is highlighted, as it is crucial for user retention and conversions, as well as for accessibility.
- Great tools can be used to identify performance issues, such as linting and bundle analyzers.
- Techniques such as lazy loading and caching can be used to improve performance.
- Regularly auditing Webpack analyzers and bundle analyzers is recommended to identify large, unused chunks of code.
- Automated fixes can be employed to prove a concept or to automatically enforce good practices.
- Performance investigations can be used to identify issues and implement fixes, such as fixing unused code with knip.
- Implementing fixes can be done by proofing a concept and then implementing a fix, such as using lazy loading to load cards.
- Metrics can take multiple fixes to show an improvement, and some metrics may not be improved by fix.
- Performance scores can improve with fixes, such as going from 36 to 51.
- Tree-shaking is an important technique for removing unused code from dependencies.
- Scripts can be parsed to identify and fix performance issues, such as identifying unused code with knip.
- Unused code can cause issues with page loading and rendering, and can be fixed by deleting unused files.
- Importance of automation and user benefit is highlighted in improving performance.
- Web frameworks like Next.js, SvelteKit, and Nuxt can make good choices for you, but it is still important to ensure tooling supports them well.
- Investigation and implementation can be done to fix performance issues, such as finding where iframes are rendered.
- Automation is recommended for enforcing good practices and avoiding future work.
- Regular auditing and visualizations can be used to identify performance issues and implement fixes.