Upon joining a project that was implementing a legacy system for a product in the health domain, I had the unintended opportunity to experience many of the issues developers face: slow speed, legacy code, and angry users. Studies have shown that load-time is a significant problem for retention; Google had previously shown us that, when load-time increased from a 1 to 3 second delay, bounce rates increased 32% (Google/SOASTA Research, 2017).

Getting to the Problem

I started with a call to action. For load-time, I used PageSpeed as a metric, looking at Time to First Byte (TTFB), DOM Load, and Total render. I identified heavy scripts, improperly optimized images, and poor database queries, as key contributors to latency.

Identifying the Approach

I applied a three-phase redesign process to the application:

• Front End Optimization – things like minifying code, code splitting, and lazy-loading where the minimum CSS required is prioritized on the load.
• Backend + Infrastructure – where I could manipulate queries, I optimized them for proper indexing, and made sure to enable caching + CDN delivery to help execution time.
• User Experience – a change to visual hierarchy that focused on the functionality of critical elements of the UI being interactive sooner, whilst other (less significant) assets were still loading.

Outcomes and Insights

The outcomes were measurable; page load-time was halved and customer satisfaction scores increased 25%. To me, this showed that performance is not measured just systemically, but also business outcomes. I was excited to see stakeholders realize that [the] performance of providing a “smoother” user experience, builds trust and creates user engagement.

Reference: Google/SOASTA, Milliseconds Make Millions: Why Site Speed Matters, 2017.