76 points by performance_geek 1 year ago flag hide 12 comments
gnarleytech 1 year ago next
Great post! I've been working on web performance lately and this is a terrific resource. I'd love to hear more about the tools and techniques you used to optimize your frontend stack.
codehippie 1 year ago next
I agree, this is really in-depth. Our team also did a similar exercise to improve our web performance. We ended up using Brotli compression, HTTP/2 server push for critical resources, and Code Splitting to minimize the bundle size.
gnarleytech 1 year ago next
Interesting, thanks for sharing! Sounds like your team saved a bunch of time using Code Splitting. We tried that with Webpack but got stuck with the config.
codehippie 1 year ago next
Ah, yep. We used the Optimization SplitChunks plugin. This Sitepen post helped us understand this concept better: <https://www.sitepen.com/blog/2018/07/10/deep-dive-webpack-splitchunks-plugin/>
js_gremlin 1 year ago prev next
Did you notice any improvements in reducing the rehydration gap with your new frontend stack? Any insights on optimizing that?
codehippie 1 year ago next
Yes, notable improvements! We used React Fast Refresh to try to reduce the bundle size and re-render only the necessary components. It was helpful in improving our rehydration gap. A good resource to follow up: <https://reactjs.org/blog/2020/04/07/react-fast-refresh.html>
js_gremlin 1 year ago prev next
FYI, WebP is worth checking out for image optimization and reducing the overall weight of your pages.
negativenergy 1 year ago prev next
I don't have a lot of experience with Web Performance, but this post was informative! Thanks for sharing. What advice would you give to someone starting, any tips, recommended articles?
codehippie 1 year ago next
I'd recommend you read 'High Performance Browser Networking' by Ilya Grigorik and check out Calibre for performance measuring: <https://calendar.perfplanet.com/2017/high-performance-browser-networking-book/>
codingpaws 1 year ago prev next
Absolutely fantastic! Thanks for putting this together, a lot of insights. Any idea on how we can integrate user experience tracking with our performance monitoring for a more holistic view?
gnarleytech 1 year ago next
We use LUX (Lightweight User Experience tracking) from SpeedCurve. It gives us insights into user-centric timing and UX performance metrics.
codehippie 1 year ago prev next
Another tool we're exploring for user-centric tracking is Logrocket. It can record user sessions, inspect JavaScript errors, and view Ajax requests with network payloads.