We utilized a variety of methods to optimize our front end performance. In addition to static code review, we discovered two powerful tools
In optimizing our static content delivery, we opted to use Amazon’s CloudFront CDN to help serve our static files more quickly. In measuring performance before and after implementing the CDN, we noticed that the loading of static files took nearly two-thirds of the time it took before using it (once the CDN had cached the files).
By following the “Profiling Components with Chrome Timeline” section of the “Optimizing Performance” page of the React documentation we were able to analyze our React build to improve performance. Chrome Developer Tools include a dynamic analysis tool that allows for tracking website performance. Including the query string
?react_perf allows Chrome to track the computational power required to run specific elements of a website. This process helped illuminate which elements of our site are the most computationally intensive. To conduct this test we began recording in the Timeline tab of Chrome’s Dev Tools. After that, we loaded the page and went through each interactive element of the application. Recording in the Timeline allowed us to parse through every moment of use, giving us a view of what the page looked like as well as key computing requirements such as loading, scripting, and rendering. The scripting involved when initially generating the page was by far the most demanding task, which bodes well for our app’s efficiency. The power required to load the main URL will be a good marker to compare other features against as our application increases in complexity. Another notable task was the animation used to display the gym status table. The table “rolls” in and out instead of simply appearing and disappearing for added visual flair. While a cool feature, we should scale back the animations if performance begins to suffer. It may be beneficial for mobile users to include this as a desktop-only feature. One last feature that stands out in terms of its computing requirements is the machine ID number input. While the user inputs this information, the program simultaneously displays the number in the blank field to the left. For our final product we plan on displaying the name of the piece of equipment whose ID was inputted. Coupling this input with multiple API calls could introduce performance lag. Recognizing this early on will help us avoid such an issue.
Our application running alongside the Chrome’s Timeline tool for developers.