How can the performance of the React website be improved

Network Optimization

code splitting

• Let's say your front end is taking 200 milliseconds, but your back end is taking 500 milliseconds. Then there is a point, optimising the front-end. A front-end engineer has no place to optimise it.
• You need to bring a back-end engineer to optimise it, or maybe the database is taking 700 milliseconds, but your back-end server is not taking that much time. Then you need to optimise the SQL queries.
• Let's say there is nothing wrong with the front-end and back-end, and database, then you have to implement a caching layer so you make sure you don't call your database multiple times, or you may introduce a clustering system where you have more than one database and call them in parallel.
• First, measure where it's going wrong. If you don't know what part of your application is taking more time and what calls are, some API calls are unnecessary, and they reduce performance, so you can avoid them.
• If the component is rendered only once, but it is rendered more than 50 times, then it is a problem so you have to first identify such components using a profiler and optimise them.
• First, you need to know why it is slow, and then only you will be able to realise how to make it fast.
• If you don't know the reason, there will be a lot of time that you will spend for just debugging your application.
• Every performance optimisation technique comes with some cost. So don't over-optimise, optimise wisely.

React profiler is a dev tool using which you can do a lot of analysis around what components are there and which are getting rerendered, and not just it also tells you why it got re-rendered, and how much time approximately since profiling started it took to render.

• It helps to see :
  • Which component was re-rendered?
  • Why was a component re-rendered?
  • How much time it take to re-rendered?
• Using these metrics, you can make a decision.
• around what all the things you need to optimise.