Optimizing a web application performance should happen when needed, and as early as possible. It contains three steps: evaluating the performance, analyzing and detecting the issues/bottlenecks, and fixing those issues.
Evaluating and measuring the performance happens by mentoring it (on production). Some of the tools that are used to diagnose the performance are Google Chrome DevTools and YSlow.
Google Chrome DevTools is a handy set of tools that comes with Google Chrome browser. It consists of multiple tabs where each one group functionality. For instance, the “Network” panel shows the requested resources and how they are getting downloaded in real time which makes it easy to detect and identify the ones that are taking time more than expected. This is considered a fundamental process to optimize the page performance. The following figure shows the “Network” panel recording for the Chrome DevTools website over a slow network.
The “Audits” panel analyze the web page load and suggest methods to optimize it and reduce the load time.
Also, content delivery network providers could be utilized to fetch some external libraries and frameworks for production instead of fetching them from the server which saved the bandwidth and increased the performance by distributing the load.