Like any other system, a website needs constant updates to work fine in the fast-changing world of technologies. The lack of support is the reason why many of them become outdated and die.
Average users see only visual updates on websites. New logos, different fonts, and buttons aren’t the only changes that happened to YouTube, BBC, and others, though. There was much more work with the code to improve their performance. Usually, it takes three to five seconds to load a page providing you have a strong Internet connection and the code is fine. If it’s not, it’d take far more time to load a page.
A few months ago, we took a project with the objective to upgrade an eCommerce website to fit modern tech requirements and suit users’ demands.
The website had two main issues:
- Legacy code. It’s the kind of source code which is outdated and no longer supported.
- Large amount of queries. It affected the overall page load time and could cause server crashes.
As a result of the previous issues, the pages would take up to 30 seconds to open. It’s unacceptable for websites in 2018 to load that long.
Our first suggestion was to rewrite the website using modern approaches and tools. It could ensure there would be no holes we could’ve possibly missed. However, the client said no as they had to generate sales within a short period. The only option that would satisfy both sides and bring decent results was refactoring. It’s the process of changing some parts of the code structure without losing its functionality.
Before we started the refactoring, we had to analyze the website’s performance. The client set a tight deadline, so we decided to use a tool that could quickly detect weak parts of the code – those that query the database most. It would solve the crucial issues of the business. Since the website is an eCommerce platform, the crucial ones were the check-out, listing, and filtering.
New Relic – its use, pros, and cons
New Relic is an analytical and management tool that helps you collect and analyze the insights of your website. It runs on your servers and monitors your website’s performance. Using New Relic, you can learn the number of database queries and see how much time it takes to execute different queries.
We chose New Relic because it had all the features we needed to reach the objective.
I strongly suggest you take a tutorial course before starting with New Relic. It will take about three hours to complete. You will learn how to:
- monitor statistics
- set up notifications and alerts
- analyze a website after refactoring
I’m going to tell you which metrics we set to monitor the website performance.
First, we needed to install agents on the servers. An agent is software that works according to a given algorithm without your constant supervision. In our case, agents would react to particular events and send us statistics on those events.
We set alert and notification systems to monitor and record the biggest queries on the database. Since it was an e-shop, the notification system would tell us about:
- invalid content for a product
- critical errors during the check-out
- errors when using a discount coupon
- attempts to buy a product that was out of stock
Then we used Apdex Score to set a 4-second threshold for all pages. It’s an optimal page load time before a customer abandons a website. In this way, we got notified every time a page would load longer.
APM & Browser monitoring
When we got the data, we used New Relic APM (Applications Monitoring Tool) to analyze the transactions that would take around 30 seconds to process the query. After that, we rewrote the corresponding parts of the back-end, optimized database queries, and fixed critical errors. As a result, we got a 10-second load speed, but it wasn’t enough. You must remember that we set a 4-second threshold.
What did we do?
Using the CDN, we managed to deliver the media content to the users faster and with the three times smaller server load. Therefore, we achieved the desired results – the pages would load in 4 seconds.
Infrastructure, Key Transactions, and Synthetics.
Our next step was to reach the following targets:
- monitor the server’s resources and key transactions
- simulate a real user flow to supervise all internal processes that will eventually lead to a successful check-out
To monitor the server’s resources, we used New Relic’s Infrastructure. It’s an agent that informs you about the CPU time, used RAM, and free storage on the server. It revealed that adding new features to the website required updates on the server and code optimization. For the key transactions, we used the New Relic’s Key Transactions feature. It views all transactions of the website on one page. The list has all the important data elements:
- transaction name
- app response time
- call count
- error rates
With its help, we learned which transactions had the highest error rate and required fixing.
To simulate a real user flow, we used New Relic’s Synthetics. We used it to create a sequence of user’s action on the website, from the registration to the check-out. It showed that all steps in the flow now work as expected, as it synced with our alert and notification system.
That’s how we managed to save a stagnated website and lay the foundation for further updates, features, and load testing. New Relic is a simple tool that can help you find what makes your website work inaccurately.
Website performance monitoring must be an essential part of any business. When you know about errors on the early stages of development, you can quickly fix them and your users won’t even notice. It relates to both the front-end and back-end.