Recently, we needed to take an in-depth look at the performance of a complex web application. We wondered: What calls were being made when? How could we improve them? What impact would changing our API have on our application overall? And what would be the best way to get our heads around all of this?
For a complex web application that has been undergoing development for a while, chances are that information isn’t top-of-mind. To help visualize what’s going on, try drawing out your page.
- Capture your page as-is. Make sure your drawing includes all visible pieces of data, as well as any buttons or links that fire up modals or show more data. It doesn’t have to be beautiful, but it does have to be big. Rolls of paper, big pieces of cardboard, and whiteboards will all work for this.
- Get some Post-its and your laptop. Open the networks tab in your favorite web development browser. (I use Chrome; See some of my favorite Chrome development features.) With the networks tab open, load the page you want to analyze.
- Go down the list of calls. Starting at the top of the list of requests in your network tab, create a separate Post-it to record the following information for each call:
- What call it is (class/id/student/id).
- What number it is in the order of calls (1, 2, etc.).
- How long the request took.
- If it’s a list of data or a single item.
- Stick the Post-it on your drawing in the spot that displays the information from that call.
Once you’ve gone down the entire list of calls, take a look. You should be able to spot any duplicate requests and see which calls are taking the longest. As a bonus, you can do this a couple of times for the API calls that return lists but vary the size of the list that is fetched. This will help you figure out how much time each additional item in the list adds to your overall loading time.
From there, it’s easy to see what code adjustments you can make. Do you need to paginate your lists? Cache your data so it’s only fetched once? Make sure to keep an eye on the amount of time each request is taking since not all requests are equal.
What techniques do you use to optimize your web applications?