Making sure your website won't crash again
Tags: webdev, devops, performance
Published: 2022-06-17 06:55:26

In my <a href="https://accesto.com/blog/why-new-users-can-kill-your-web-application/" title="Why new users can kill your web application?">previous blog post</a>, I wrote about situations when an increase in user traffic could cause your website a lot of trouble. Unexpected popularity, instead of bringing you new customers, could cause the web services to go down. Today I would like to share with you a story from my own experience, a lesson learned from the <b>spectacular crash of a popular startup</b>. How did it happen? How did it recover? And how this spectacular disaster hardened the website and made it ready for the future?

## A successful startup gaining traction

<a href="https://szukamlapka.pl/" target="_blank" title="SzukamLapka.pl">SzukamLapka</a> is a very popular polish website that <b>advises on purchasing laptops</b>. It helps both IT newbies, and more tech-savvy customers as well. Its AI-driven algorithms review specs, benchmarks and offers to "understand" the industry and generate <b>personalized rankings of the best gear</b>.


![NoteookRank homepage - advice on purchasing laptop for tech and non-tech peopl](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zyrf92ei8z0u1ey0uq39.jpg)

<center><i style="font-weight: 200;">Advice on purchasing laptop for non-tech and more tech-savvy customers</i></center><br>

As <a href="https://accesto.com/" title="Accesto.com">Accesto</a>, we have been their partners since early, MVP stages of SzukamLapka. This year they are <b>launching a global version</b> under the brand <a href="https://notebookrank.com/" target="_blank" title="NotebookRank.com">NotebookRank</a>, but a few years ago, they were just a local startup, <b>growing and gaining traction</b> on a polish market. But in the late Monday evening of August 2017, this growth got out of control...

## Surviving the hug of death

Almost every country has its equivalent to Reddit or Digg websites - places where users share, rate, and discuss <b>useful links</b>. In Poland, it is <a href="https://wykop.pl/" title="Wykop.pl" target="_blank" rel="nofollow">Wykop.pl</a>, and on that day, someone who considered SzukamLapka to be very useful shared this knowledge with Wykop users. And it wasn’t the only person who found the named service worth using...

In the first hour after being mentioned the <b>number of visitors doubled</b>, but that was just a beginning. The exponential growth continued for the next 5 hours, reaching almost 10,000% late evening. That is a <b>hundred times more users than usual!</b>


![Google Analytics: 1,000% increase in day-to-day traffic, and 10,000% in the peak!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjiv6xpi2790dkwitnny.jpg)

<center><i style="font-weight: 200;">Google Analytics: 1,000% increase in day-to-dday traffic, and 10,000% in the peak!</i></center><br>

Usually, it is called a <i>Reddit Hug of Death</i>, or a <i>Slashdot Effect</i>, and in Poland... a <i>Wykop Effect</i>. It derives from the names of popular websites that caused many other sites to <b>crash due to the abrupt increase in short term traffic</b>.

## So what happened?

Probably you won't be surprised if I tell you that the website crashed. But, to be honest, we were a little bit surprised back then. The website was <b>already prepared to handle quite high volumes of traffic</b>. It was optimized and performed well. Even when we did load testing with 20× more users than on an average day, all the rankings were generated in under 1 second. But sometimes you <b>can't spot the bottlenecks until you see them stuck</b>.

So what may be the bottleneck of a website that displays laptop rankings? The thing is that it isn’t just a simple website. Like most of the modern digital products, it is a complex web application, a multi-layer platform that consists of many services. And the bottleneck emerged between two of such services. The one that does all the complex calculations, and the other that uses these bare technical data and makes them more human-friendly. The question arose, why even though these two were connected via a robust and lightspeed API, the problem occurred?


![504 error seen when site went down](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5ciwb9w1d7psnqc4f1e.jpg)

Both services were performing very well, but sometimes the <b>connection between them was lost for a few short milliseconds</b>. And that was the part that we did not take into account. Although this was a very short break in communication, one of the services, instead of retrying to connect, <b>kept hanging for around 3 minutes</b>. We didn’t notice it in advance as it happened only once every few thousand page views. And of course, we had a few services like this working in parallel. So if one user waited too long, he could easily refresh the page and get the results immediately from another non-hanging service.

But on that day, the volume of users was so high that this quite rare situation of stuck service happened on all the services, and users started to get 504 errors - indicating that the server did not respond in time. <b>The site went completely down</b>.

## Solving the problem

The temporary solution was quite simple. When we diagnosed the problem, we quickly <b>increased the number of available services and restarted all the stuck ones</b>. We had to repeat this few times, as new services kept hanging. But in general, that temporarily solved the problem and allowed us to survive till the morning.

The next day, we started by making sure that last night's nightmare won't happen again. We did it in 4 steps.

### Step 1: adopt the fail-safe approach in your web application

We already knew that there could be temporary connection issues with the API, and to handle this, we <b>added proper timeouts and retries</b>. So if the connection is lost, service does not wait long, and after a second or so, tries to connect again. And there are few attempts, each with slightly longer timeouts (to get the response even if the network connection is slow for some reason).

According to Murphy's law, if something can fail, it will fail, and it is true also for <b>web applications</b>. It is good practice to take potential failures into account and make web apps ready for them by design. This is known as a <b>fail-safe approach</b> and is especially important if you integrate with some external, third party API’s - which may not always be available, or behave in the way we expect.

### Step 2: make sure you calculate same things only once

Although the connection with the API should no longer cause the trouble, we knew that this was the most compute-heavy part of the platform. So the fewer requests are sent to that API, <b>the better the website performance</b> would be. We used <a href="https://blackfire.io" target="_blank" title="blackfire.io" rel="nofollow">Blackfire.io</a> to check how often the web app uses the API and we got interesting results. We noticed that the homepage, the most frequently visited page, used the API twice per each view. Why would a rather static page even require any API calls?


![Ranking in a header of SzukamLapka website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8fv0tw43weebmjz15lr.jpg)

<center><i style="font-weight: 200;">Ranking sneak peak in header was calculated on every page view</i></center><br>

The reason was that on the homepage, there was a small sneak peek of the ranking, to engage users. There were also a couple of statistics shown, as the total number of laptops or offers analyzed. But how often did these numbers and results change? Every few hours. And how often did we calculate them? Every single page view. Huh. Adding an <b>HTML cache for the whole homepage</b> worked like a charm, making it just a static HTML resource, that can be served by servers in a quite effortless way.

Blackfire is a very good tool that <b>helps to find bottlenecks</b>. To learn more, make sure to read our recent blog post <a href="https://accesto.com/blog/my-homepage-is-slowing-down/" title="My homepage is slowing down">“My homepage is slowing down”</a> in which our developer describes how he reduced page loading time by 93% in just 4 hours of work.

### Step 3: learn your user's behavior and use it to plan the performance

Another optimization became easy when we analyzed data from Google Analytics. SzukamLapka generates personalized rankings based on the individual needs and preferences of the users. But according to Google Analytics, most of the users go for the predefined presets, like gaming, office, or mobile laptops. So why generate them for every user separately? <b>Adding a Redis cache</b> for most frequently selected rankings reduced the computations by almost 70%.

### Step 4: use CDN to cache your static resources

Last but not least - we added <a href="https://www.cloudflare.com/" rel="nofollow">Cloudflare</a>. It is a service that provides an additional cache layer in front of the whole website and distributes all its static resources in CDNs. It makes the assets, like images or scripts, <b>highly available for users, and light for the server</b>.


![Cloudflare reduced bandwidth by 60% and page load time by 80%](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ist62k5h52jrfsn8ajfo.jpg)

<center><i style="font-weight: 200;">Cloudflare reduced bandwidth by 60% and page load time by 80%</i></center><br>
 
Adding Cloudflare saved around 60% bandwidth traffic, making the website significantly lighter for the server. At the same time, the <b>user experience improved thanks to the reduction of the total load time to less than 1 second!</b> To learn more about caching with Cloudflare, check the blog post of our CTO on <a href="https://accesto.com/blog/top-5-hacks-to-fix-slow-web-applications/" title="Top 5 hacks to fix slow web applications">"Top 5 hacks to fix slow web applications"</a>.

## Fast forward

Thanks to this lesson learned, the website was adjusted, and right now can handle a <b>significantly large number of users</b>. After a few years SzukamLapka is playing an important role in consumer decision making in Poland, generating millions in revenue for its partners. This year, SzukamLapka is launching its <b>global version</b> in multiple countries around the world. Thanks to the lessons learned, it is prepared to become popular in the new markets.

![PageSpeed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/istzk2zzi8hstzhb2nlv.jpg)

<center><i style="font-weight: 200;">Current version requires less than 1 second to be full interactive!</i></center><br>

## How about your web application?

The story of the SzukamLapka startup <b>can happen to almost every online business</b>. If you want to check how your web application can be hardened just drop me a message. At Accesto we look after, monitor, and improve web applications to make sure they are <b>secure, scalable, and ready for growth</b>.

<a href="https://accesto.com/contact/" target="_blank" style="
  display:block;
  max-width: 280px;
  text-align: center;
  padding: 15px 60px;
  font-size: 15px;
  color: #FFF;
  background-color: #1F3040;
  text-transform: uppercase;
  border: 0;
  text-decoration: none;
  margin: 25px auto 0;" id="let_us_help_you">Let us help you</a><br><br>