This document discusses optimizing React and Webpack applications for production. It recommends:
1. Not optimizing prematurely and ensuring engineering and product goals are aligned before optimizing.
2. Understanding available optimization options at build time like minification, code splitting, and using production builds of dependencies, and at runtime like server-side rendering and component lifecycle methods.
3. Instrumenting the application to measure performance metrics like bundle size, load time, and render time to identify optimization opportunities.
4. Setting meaningful benchmarks based on the actual user experience expected, rather than arbitrary metrics, to determine what constitutes acceptable performance.
14. Laws of benevolent optimization
1. Don’t optimize prematurely
2. Know your options
3. Instrument your sh*t
4. Set benchmarks that make sense for
your actual users
16. Before you optimize…
• Know what you’re building, address the UX/
product risk first
• Are your engineers on the same page as
your designers/product? Do you share a
common goal?
• Finish a few rounds of internal testing
• Have a good idea of who your users are
17. You might be ready to optimize if…
• You’re about to ship a product to market,
particularly on devices or in conditions that are
different from your development environment
• You’ve already shipped an MVP and are seeing
latency/perf/errors bog you down
• You’ve already shipped a product and have no
idea if it’s performing well but you feel like you
should probably figure that out
59. Reasons this might be a problem
• You are manipulating or reading the DOM directly
• You are handling very large arrays of complex
elements
• Your business logic contains computationally
expensive functions
• You are rendering very complex DOM elements (such
as SVG visualizations)
68. Laws of benevolent optimization
1. Don’t optimize prematurely
2. Know your options
3. Instrument your sh*t
4. Set benchmarks that make sense for
your actual users
69. What should you benchmark?
• File size
• Time to first load
• Time to render
70. What is acceptable depends on who your
users are what they’re likely to expect
71. The difference between
over-engineering and good engineering
is making the right compromises