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 “Profiles” panel helps to record and to profile the CPU and memory usage of JavaScript and CSS. Some profiling types are “JavaScript CPU Profile” which shows the consumed time of the webpage’s JavaScript functions, “Heap Snapshot” which profiles the consumed memory of the webpage’s JavaScript objects and DOMs, and “Allocation Profile” which displays JavaScript functions’ memory allocation.


The “Audits” panel analyze the web page load and suggest methods to optimize it and reduce the load time.


Some of the optimization processes that could be done on the network level are reducing the JavaScript, CSS, and image files size by using Gzip compression and “minifiers.”

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.