Refactor: Performance Tracker

Before:

  • Render phase exceeds 5 seconds.
  • Phase breakdown lacks clarity, making it difficult to pinpoint bottlenecks.
  • No user attrition tracking.


    After:

  • Identified network call as the bottleneck.
  • Clear, readable phase breakdown for better debugging.
  • Key metrics, including TTFP, remain stable with user attrition tracking in place.

The optimizations

The first step in optimizing these pages was to assess what was broken and identify the bottlenecks. After reviewing the code, I discovered:

  • A method that executed 75 times per load on the first page.
  • Tracking phases that were not stopping properly.
  • Significant bugs in the existing code that performed unnecessary tasks beyond just measuring time, inflating the total execution time.
  • Repeated nested method invocations, adding to the overhead.

    To ensure accuracy, I double-checked a fragment's changes using ChatGPT. However, I did not rely on AI to achieve these results—in fact, when I did attempt to use AI for improvements, I often found myself correcting its suggestions. See the summary below for the diff analysis I ran.

 

Mathematical center of a sunflower