Embarking on the Adventure of Performance Optimization!

Welcome to the digital era, where website performance takes center stage, shaping the user experience and determining the fate of online platforms.

A website’s speed, responsiveness, and seamless browsing experience can captivate visitors or send them running for the hills. A slow, unresponsive site is the ultimate recipe for frustrated users, sky-high bounce rates, and lost revenue. For website owners and developers, the constant quest to optimize and enhance performance is an essential endeavor, unlocking the full potential of their online presence.

Thankfully, a plethora of techniques and tools are available to help breathe life into lackluster performance, such as code optimization, reducing page load times, minimizing HTTP requests, and leveraging caching and compression techniques. This ongoing process of fine-tuning and implementing these methods is what we call ‘website performance improvement,’ a journey that aims to elevate website speed, responsiveness, and overall user experience.

The Bumpy Ride Begins!

Now, let me introduce you to a world where website performance optimization unfolds on a grand scale — Sonepar's Digital Factory Spark program!

Behold the Spark webshop, a magnificent, multi-layered, multi-instance distributed cloud-based system. It gracefully orchestrates hundreds of services, working in perfect harmony to deliver a range of B2B services across various countries and languages.

Yet, a harsh reality sets in even in the wake of its glorious launch. We discovered that the performance of our beloved Spark was far from meeting our lofty objectives. The euphoria of the initial delivery evaporated like the morning mist, leaving us with a harsh truth—we could not tolerate a frustrating business experience on a sluggish platform.

Our First Attempts: An Epic Struggle!

Enter the Digital Factory Performance Squad, armed with best practices and guidelines, driven by a passionate desire to conquer the performance challenge. For months on end, they toiled relentlessly, pouring their hearts and souls into the cause. Yes, we did witness some improvements, but alas, our progress fell short of our goals.

We had an impressive caching mechanism, monitoring tools, a robust log management system, and an army of dedicated professionals focused on performance enhancement. Yet, despite our best efforts, the results were not up to par. Until one fine day, we decided to change our perspective and alter our methodology.

A Glorious Transformation Unfolds!

We embarked on a new path leaving behind our old ways and oh, what a difference it made! By changing our approach, here are the just a few of the wonders that came to pass:

• The user experience score and lighthouse score soared to new heights;
• Spark raced at lightning speed, running a mind-boggling 300% faster on desktop and iOS devices;
• Android users rejoiced as Spark accelerated by a staggering 200% on their devices;
• Our website's capacity to handle user traffic witnessed a jaw-dropping 200% improvement.

The valuable lessons we learned from our initial struggles guided us toward our current objectives and are well worth sharing. So, let's delve into some of the most crucial points we discovered along this riveting journey.

1. Embrace the Users Perspective: Metrics That Truly Matter!

It's all about putting yourself in the end user’s shoes and understanding their needs and desires. After all, we exist to deliver business value through our customers. It would be a colossal blunder to overlook the metrics that genuinely impact them. We have to envision the devices they use, their specifications, network conditions, and internet speeds. Particularly, low and mid-end mobile devices deserve special attention, as they can unveil architectural weaknesses and expose technology choices that fall short.

In our case, we had focused on certain metrics while neglecting the overall user experience. Take the Time to First Byte (TTFB), for instance—a critical metric, but it fails to convey the entire story of user experience. We had championed innovative, front-end development trends that thrived on state-of-the-art computers but stumbled on a five -year-old device. When tackling performance challenges, we must identify the metrics that impact our clients the most, prioritizing actions that bring the highest value to their experience. Here are some standard website performance metrics to consider:

1. Page Load Time: The duration it takes for a webpage to load completely.
2. Time to First Byte (TTFB): The time it takes for the user's browser to receive the first byte of data.
3. Time to Interactive (TTI): The point at which a webpage becomes fully interactive and responsive to user inputs.
4. Page Size: The total size of a webpage, encompassing all resources like images, scripts, and stylesheets.
5. Number of Requests: The total count of server requests made to load a webpage.
6. Conversion Rate: The percentage of visitors who successfully complete desired actions, like making a purchase or filling out a form.
7. Bounce Rate: The percentage of visitors who leave a website after viewing only one page.
8. Error Rate: The percentage of requests that result in errors, such as 404 page not found errors. Time on Page: The length of time a user spends on a webpage before exiting.
9. Mobile Responsiveness: The ability of a website to adapt and perform well on mobile devices.

2. Complexity Unraveled: The Art of Simplicity!

Within our intricate, multi-layered architecture, we realized the need to uncover where we went astray. Our experts had tinkered with various nuts and bolts, drawing from their past experiences, inadvertently adding complexity and more moving parts to the equation. As a result, linking improvements or deteriorations to specific changes became exceedingly challenging.

In our pursuit of performance optimization, we adopted a new methodology that allowed us to minimize the side effects of multiple modifications. Change one element, run the tests, analyze the results, and then proceed to the next. Furthermore, we recognized the importance of establishing a scientific method, a well-defined workflow that made the process understandable to all.

As complexity mounts, the power of simplification becomes evident. We mustn't lose sight of the primary method as we dive into the depths of analysis. Amidst frustration, people tend to suggest alternative ideas and veer off on tangents. To sustain improvement, we must remain steadfast in our analytical approach, utilizing our tools efficiently. Efficient tool usage goes beyond possessing cutting-edge technology; it entails mastery and the ability to aggregate data from various sources. Furthermore, it requires attentiveness to minute anomalies, posing questions and seeking explanations for such events.

3. Load and Performance: A Symbiotic Connection!

A common pitfall in performance enhancement is failing to recognize the close interplay between load and performance. Testing a website with a single session versus testing it with 1000 simultaneous users can yield dramatically different results. As the number of connections escalates, we encounter infrastructure limits, CPU and RAM constraints, input/output saturation, scaling challenges, and issues of liveliness. These factors invariably impact response times, ultimately influencing the user experience. It is crucial to prepare comprehensive load-testing scenarios and equip our teams with powerful tools that they can learn and master.

4. The Great Influence of Size!

The association between load and user experience, explored earlier, is only part of the story. In modern systems, applications operate within containers and pods, sharing resources while having specific allocations of memory and CPU. The technical architect must be mindful of the development process and the production configuration. Platform teams can provide pipelines, environments, and monitoring tools, but careful consideration must be given to resource allocation during application startup and runtime. Striking the perfect balance requires methodical experimentation and observation. The impact of pod tuning on Spark during high-load testing is exemplified below:

The curve flattens, and spikes are reduced. Response time significantly improves.

5. Peeling the Layers: Unveiling the Underlying Issues!

In pursuing performance enhancement within a multi-layered ecosystem, it is vital to establish a workflow and adhere to it rigorously and precisely— much like peeling an onion layer by layer. Fixing a performance issue in one layer may not mark the end of the story. It could merely conceal deeper issues within the underlying layers.

For instance, after rectifying frontend JavaScript (JSS) problems and CPU usage, we uncovered cache response delays caused by resource depletion in the pods responsible for reading the cache. Consequently, not only were the frontend pods failing to leverage the cache mechanism, but they were also burdened with a higher-than-expected request load, further impeding their performance.

6. Guiding the Way: Establishing Performance Gates for Sustainable Improvement

Performance enhancement is an ongoing endeavor that should be regarded as "non-functional quality assurance." We must ensure that new releases do not inadvertently introduce new degradations. Once objectives have been achieved, it is imperative to provide feature teams with guidelines, emphasizing the importance of peer reviews by team leads.

Additionally, setting up a quality gate as part of the release validation process is crucial.

Example of Spark performance gate:

The Sonepar Spark experience offers invaluable lessons: embrace critical thinking and scientific methods grounded in reliable metrics, pay attention to intricate details, and maintain consistency under pressure and high stress. By applying these principles, the arduous road of performance optimization can be transformed into a gratifying journey, yielding desirable outcomes.