Recommended
More Related Content
Similar to Maximizing React Speed: Hands-On Guide to Debugging and Optimizing React Applications
Similar to Maximizing React Speed: Hands-On Guide to Debugging and Optimizing React Applications (10)
More from Dmitry Vinnik
More from Dmitry Vinnik (12)
Recently uploaded
Recently uploaded (20)
Maximizing React Speed: Hands-On Guide to Debugging and Optimizing React Applications
- 1. Maximizing React Speed: Hands-On Guide to Debugging and Optimizing React Applications @DmitryVinnik 1
- 2. Let’s start from the beginning @DmitryVinnik 2
- 4. Great, we have our library @DmitryVinnik 4
- 6. Let’s see it in practice! @DmitryVinnik 6
- 8. Code is a “living thing” @DmitryVinnik 8
- 10. Where do we spend most of our time? @DmitryVinnik 10
- 16. “Things” That Happen @DmitryVinnik 16 Bugs
- 17. “Things” That Happen @DmitryVinnik 17 Bugs Regressions
- 18. “Things” That Happen @DmitryVinnik 18 Bugs Regressions Performance Issues
- 19. “Things” That Happen @DmitryVinnik 19 Bugs Regressions And many other problems… Performance Issues
- 20. “Things” That Happen @DmitryVinnik 20 Bugs Regressions And many other problems… Performance Issues
- 22. Performance Issues @DmitryVinnik 22 Slow Page Load Time
- 23. Performance Issues @DmitryVinnik 23 Slow Page Load Time Poor User Experience
- 24. Performance Issues @DmitryVinnik 24 Slow Page Load Time Poor User Experience Security Problems
- 25. Performance Issues @DmitryVinnik 25 Slow Page Load Time Poor User Experience Server Overload Security Problems
- 26. How will we cover these performance concerns? @DmitryVinnik 26
- 28. Let’s look at something more complex @DmitryVinnik 28
- 30. Metrics #1: Time Between Events @DmitryVinnik 30
- 31. Metrics #2: API Monitoring @DmitryVinnik 31
- 32. Metrics #3: Google Lighthouse Metrics @DmitryVinnik 32
- 33. Call to Action @DmitryVinnik 33
- 34. Call to Action Collect Data @DmitryVinnik 34
- 35. Call to Action Collect Data Experiment @DmitryVinnik 35
- 36. Call to Action Collect Data Experiment Contribute Back @DmitryVinnik 36
- 37. About Me Twitter: @DmitryVinnik Blog: dvinnik.dev LinkedIn: in/dmitry-vinnik/ Email: dmitry@dvinnik.dev 37
Editor's Notes
- Go to https://react.dev/
- https://react.dev/learn/start-a-new-react-project
- Will be sharing slides, github and useful links
- Will be sharing slides, github and useful links
- here are many factors that can impact the performance of web applications, but here are four common performance issues: Slow Page Load Times: If a web page takes too long to load, users may become frustrated and abandon the site. This can happen if the page is too large, there are too many requests, or the server response time is slow. Poor User Experience: Web applications that are difficult to navigate or use can also impact performance. This can include confusing menus, too much scrolling, or too many pop-ups. Security Issues: Web applications that are not properly secured can also impact performance. This can include malware infections, hacking attempts, or data breaches. Server Overload: If a web application experiences a sudden surge in traffic, the server may not be able to handle the load. This can lead to slow page load times, server crashes, or other performance issues.
- here are many factors that can impact the performance of web applications, but here are four common performance issues: Slow Page Load Times: If a web page takes too long to load, users may become frustrated and abandon the site. This can happen if the page is too large, there are too many requests, or the server response time is slow. Poor User Experience: Web applications that are difficult to navigate or use can also impact performance. This can include confusing menus, too much scrolling, or too many pop-ups. Security Issues: Web applications that are not properly secured can also impact performance. This can include malware infections, hacking attempts, or data breaches. Server Overload: If a web application experiences a sudden surge in traffic, the server may not be able to handle the load. This can lead to slow page load times, server crashes, or other performance issues.
- here are many factors that can impact the performance of web applications, but here are four common performance issues: Slow Page Load Times: If a web page takes too long to load, users may become frustrated and abandon the site. This can happen if the page is too large, there are too many requests, or the server response time is slow. Poor User Experience: Web applications that are difficult to navigate or use can also impact performance. This can include confusing menus, too much scrolling, or too many pop-ups. Security Issues: Web applications that are not properly secured can also impact performance. This can include malware infections, hacking attempts, or data breaches. Server Overload: If a web application experiences a sudden surge in traffic, the server may not be able to handle the load. This can lead to slow page load times, server crashes, or other performance issues.
- here are many factors that can impact the performance of web applications, but here are four common performance issues: Slow Page Load Times: If a web page takes too long to load, users may become frustrated and abandon the site. This can happen if the page is too large, there are too many requests, or the server response time is slow. Poor User Experience: Web applications that are difficult to navigate or use can also impact performance. This can include confusing menus, too much scrolling, or too many pop-ups. Security Issues: Web applications that are not properly secured can also impact performance. This can include malware infections, hacking attempts, or data breaches. Server Overload: If a web application experiences a sudden surge in traffic, the server may not be able to handle the load. This can lead to slow page load times, server crashes, or other performance issues.
- here are many factors that can impact the performance of web applications, but here are four common performance issues: Slow Page Load Times: If a web page takes too long to load, users may become frustrated and abandon the site. This can happen if the page is too large, there are too many requests, or the server response time is slow. Poor User Experience: Web applications that are difficult to navigate or use can also impact performance. This can include confusing menus, too much scrolling, or too many pop-ups. Security Issues: Web applications that are not properly secured can also impact performance. This can include malware infections, hacking attempts, or data breaches. Server Overload: If a web application experiences a sudden surge in traffic, the server may not be able to handle the load. This can lead to slow page load times, server crashes, or other performance issues.
- here are many factors that can impact the performance of web applications, but here are four common performance issues: Slow Page Load Times: If a web page takes too long to load, users may become frustrated and abandon the site. This can happen if the page is too large, there are too many requests, or the server response time is slow. Poor User Experience: Web applications that are difficult to navigate or use can also impact performance. This can include confusing menus, too much scrolling, or too many pop-ups. Security Issues: Web applications that are not properly secured can also impact performance. This can include malware infections, hacking attempts, or data breaches. Server Overload: If a web application experiences a sudden surge in traffic, the server may not be able to handle the load. This can lead to slow page load times, server crashes, or other performance issues.
- here are many factors that can impact the performance of web applications, but here are four common performance issues: Slow Page Load Times: If a web page takes too long to load, users may become frustrated and abandon the site. This can happen if the page is too large, there are too many requests, or the server response time is slow. Poor User Experience: Web applications that are difficult to navigate or use can also impact performance. This can include confusing menus, too much scrolling, or too many pop-ups. Security Issues: Web applications that are not properly secured can also impact performance. This can include malware infections, hacking attempts, or data breaches. Server Overload: If a web application experiences a sudden surge in traffic, the server may not be able to handle the load. This can lead to slow page load times, server crashes, or other performance issues.
- here are many factors that can impact the performance of web applications, but here are four common performance issues: Slow Page Load Times: If a web page takes too long to load, users may become frustrated and abandon the site. This can happen if the page is too large, there are too many requests, or the server response time is slow. Poor User Experience: Web applications that are difficult to navigate or use can also impact performance. This can include confusing menus, too much scrolling, or too many pop-ups. Security Issues: Web applications that are not properly secured can also impact performance. This can include malware infections, hacking attempts, or data breaches. Server Overload: If a web application experiences a sudden surge in traffic, the server may not be able to handle the load. This can lead to slow page load times, server crashes, or other performance issues.
- here are many factors that can impact the performance of web applications, but here are four common performance issues: Slow Page Load Times: If a web page takes too long to load, users may become frustrated and abandon the site. This can happen if the page is too large, there are too many requests, or the server response time is slow. Poor User Experience: Web applications that are difficult to navigate or use can also impact performance. This can include confusing menus, too much scrolling, or too many pop-ups. Security Issues: Web applications that are not properly secured can also impact performance. This can include malware infections, hacking attempts, or data breaches. Server Overload: If a web application experiences a sudden surge in traffic, the server may not be able to handle the load. This can lead to slow page load times, server crashes, or other performance issues.
- here are many factors that can impact the performance of web applications, but here are four common performance issues: Slow Page Load Times: If a web page takes too long to load, users may become frustrated and abandon the site. This can happen if the page is too large, there are too many requests, or the server response time is slow. Poor User Experience: Web applications that are difficult to navigate or use can also impact performance. This can include confusing menus, too much scrolling, or too many pop-ups. Security Issues: Web applications that are not properly secured can also impact performance. This can include malware infections, hacking attempts, or data breaches. Server Overload: If a web application experiences a sudden surge in traffic, the server may not be able to handle the load. This can lead to slow page load times, server crashes, or other performance issues.
- here are many factors that can impact the performance of web applications, but here are four common performance issues: Slow Page Load Times: If a web page takes too long to load, users may become frustrated and abandon the site. This can happen if the page is too large, there are too many requests, or the server response time is slow. Poor User Experience: Web applications that are difficult to navigate or use can also impact performance. This can include confusing menus, too much scrolling, or too many pop-ups. Security Issues: Web applications that are not properly secured can also impact performance. This can include malware infections, hacking attempts, or data breaches. Server Overload: If a web application experiences a sudden surge in traffic, the server may not be able to handle the load. This can lead to slow page load times, server crashes, or other performance issues.
- https://react.dev/learn/react-developer-tools Go to site show dev show prod
- https://react.dev/learn/tutorial-tic-tac-toe Go to codesandbox
- Here, we have a metric that fires as soon as you click the session replay “play” button, then a metric that fires right when the first frame of the session replay becomes visible. This allows us to track exactly how long it takes between clicking the play button and the session starting to play, one of our key user interactions. This example uses Redux Actions, but you can track Time Between Events with the following filters: * Navigation (URL) * Clicked (element) * Custom events (guide on how to pass custom events to LR) * Redux Action Type * Network Request * Log Message * Element Visible As another example, you could track how long it takes for a dynamic element to become visible on the page after a network request returns status 200. It really depends on what key interactions you’d like to track.
- There are also alerting options for these metrics, so you can define a threshold for what you deem to be an acceptable response time.
- Will be sharing slides, github and useful links