In response to someone asking why React apps are usually so slow
wow, a question i actually have a smidgen of expertise on!
At work, we have a very big React app. Here are some things which were causing slowness, which we know for certain because fixing them improved performance:
Other Reasons Your Very Big Website Might Be Very Slow:
- Animations. The designer loves to go ham and make absolutely everything animated, but eventually yeah those start to add up too, especially when animating massive DOM trees and causing big layout shifts. Combined with (3) above, it sometimes takes a solid 2 seconds to open a certain problematic side panel, on a good machine. Good luck on a little dinky machine. This problem is also exacerbated by using libraries like framer-motion, which have lots of cool animation curves, not all of them implemented efficiently! Using CSS animations where possible also lets you quickly turn them off with
animation: none !important; transition: none !important; - Opacity. The designer also loves using
rgba(255, 255, 255, 0.05)for component backgrounds, because it layers nicely over almost any other background. Unfortunately, they require more work by the browser to render properly, which can amount to a surprising drop in performance on weaker clients. Especially when combined with animated transparencies🙀 Making an option to change to all flat colors was a noticeable gain. And this is all to say nothing of blur, which tanks performance even harder (we've almost got rid of it entirely now) - Excessive Repaints From Weird Layouts. Still haven't quite gotten to the bottom of this so can't say for sure, but it seems that certain layout things (CSS grid? Weird stacking contexts?) cause browsers to think they need to repaint more than what's actually changed, leading to a drop in performance. Saying "hey change the size of this one thing slightly" makes it go "oh i should repaint the whole screen, got it", even when there's no actual layout shift. This is once again exacerbated by animations, which cause this many times a second.
Once again, these are just problems we've identified, and there may be more, I am by no means a Web Performance Expert. yet.