Function Tracing Case Study - Competitive Index

Background: After getting positive feedback on the Industry Benchmark page on our Marketing website, Blue Triangle decided to offer a paid version that adds more functionality like the ability to trend metrics over time, the ability to choose any time period and re-rank metrics based on that time period, and the ability to create groups of sites within a vertical and trend them over time to name just a few.

Preventative Measures: Each view in the paid version of this product is using the same data set but manipulating it in a different way. Given this fact, the backend should serve the data only once and the frontend will change the mark up for each view of the product. The page should only have a mild slowness if this is the first time it is loading data.

Symptoms:  The product may seem to have an unusually long load time when loading the data from the backend. Additionally, when switching between views of the product that page continued to load slowly. This was also unexpected as the page no longer had to get data from the backend but simply manipulate the current DOM.

Typical Analysis:  By using dev tools to record performance, it was noticed that there is a lag between when the function that gets data is called and the function that builds the page is called. This indicated that the backend needed to be refined. Also noticed that there are many loops on the frontend that can be reduced or are traversing large amounts of child elements such as rows in a table:

Typical Remedy:  Began by refactoring the code to reduce number of loops. Looked for code smells like duplicate code or unused variables. Made sure we are using the most reduced data needed to build the views. Made sure we were using the functional programming approach and retested functions to make sure we were still getting the required output.  Also, cached the backend data when able to do that.

Atypical results: The page was still slow even when the backend data was cached. Load time between views was slow even when no back-end data needed to be loaded:

Research: After researching jQuery, all functions were terribly slow and needed to be replaced with more efficient code. This result would normally be the end of the story.

Blue Triangle analysis: By using Blue Triangle’s synthetic monitoring with function tracing, we can clearly see two bands on the scatter plot that coincide with backend caching of the table view of our new product. This information led to increasing the cache duration from 15min to 1 hour to create a better user experience:

Additionally, as we add new features to this product, we can continue to monitor performance and get alerted on any changes to any metric of our choosing. For instance, on this page I have set up the product to alert me when the time to interactive goes above 12 seconds. With function tracing added to the monitor, we can see how changing a single function or loop can affect our TTI and watch how our product improves over time