Optimizing site speed and user experience for a popular online retailer

TOPTOP.RU is an online women's clothing store that combines different styles and trends, and focuses on providing quality service to its customers.

They value marketing and product expertise, as well as understanding their audience’s interests and expectations. Therefore, many tasks that are usually outsourced are completed in-house, including product photography, design, work with analytics and promotion, and individual digital services for each client.

The task

In 2019, the TOPTOP.RU team prepared new layouts for their website, which was a slow, monolithic RoR application. The revamp was designed to help customers find products faster and let them work more conveniently with the catalog.

The development team needed to preserve the existing functions and some of the old pages, while making a frontend based on the new layouts. This meant that it was necessary to work simultaneously in two directions:

• Develop a new Single Page Application with a new design.
• Maintain the existing web application and make changes to the backend with the launch of new features.

The team also had to be actively involved in product solutions, since the client needed understandable technical information to make informed decisions.

We had experience both supporting and launching products in Ruby on Rails, and we were ready to get involved and treat the product as if it were our own. The client liked this, so we got to work.

The solution

In 9 months, we developed a new SPA in React + TypeScript. However, we also had to improve the backend in Ruby on Rails, to optimize the backend for the frontend SPA that we created, ensuring that the new frontend would work well and the work of the internal departments would not suffer in any way. After the launch, we continued to work on new features.

Development is carried out according to flexible methodologies. We conduct a demo, research, evaluate tasks by intensity of work required and explain the potential consequences of different solutions. While the client's team prioritizes tasks and evaluates the results. Through open communication, a controversial solution or an alternative approach can always be discussed.

Dividing the project into tasks

We had to work with legacy code, as the previous version of the site was created and maintained by different teams at different times  and the site code was poorly documented.  We plunged into the business logic of the application, reverse-engineered the most problematic areas, and de facto re-created a Rails project with a React.

We needed to keep all the current functions for users and marketing opportunities for the TOPTOP.RU team. The old version of the site was marked with events that were sent to various analytical services and returned from there as snippets with product recommendations.

This meant that the functionality needed to, not only be moved from the old version to the new one, but also be completely reworked, leaving only the logic.

Redeveloping a complex catalog

We began by working on the client’s highest priority task - the catalog of products. To do this, we delved into its complex taxonomy. The tree of categories and products for the user was different from what was on the server, and some branches were repetitive. For example, the section "sale" only included price-reduced goods. However, each product that was on sale was listed simultaneously in both its normal category and in the "sale" section.

When we changed the catalog, we also changed the filtering. Originally, every change in the filter caused the entire page to be reloaded, making it incredibly slow. It is now much faster, because we are reloading only a part of the SPA application.

The new catalog is also faster and can show more products at the same time. Due to the use of React, it was possible to implement new design ideas, while making transitions and user interactions look smooth and neat.

Speeding ​​up the loading of images

In the previous version of the site, the catalog page took a long time to load, which could lead to a high bounce rate. While the page itself was loading quickly, the images were loaded at the same time (5-10 images for each of the 24 products on the page), which slowed down the site. To the user, it looked like they were browsing the site over a slow internet connection.

So, we used react-infinite-scroller and react-lazyload to speed up image loading on the site. By adding an orchestrator to the web application, we can now manage and optimize the image upload queue. When a user visits the site, the orchestrator arranges all these images in a specific order:

• First, each product’s main picture is loaded.
• Second, the rest of the product images are loaded in order, from the first product to the last, but only on the part of the screen that the user is currently viewing.

If the product is outside the area of ​​the screen that the user can see, then only the top picture from the “deck” will be loaded for them, and the rest are loaded after scrolling to the products. By lazy loading images with React, online customers can enjoy faster page load speeds.

In addition to the download queue, we worked on optimization. First, we adjusted the balance between the size of the pictures and their quality. This is an important parameter for TOPTOP.RU, as they conduct a lot of cool photo shoots to make sure that the user sees good product photos. After that, we resized all images to create optimal quality versions for five different types of devices, further improving loading speeds.

Depending on the parameters of the user's device, we give them the most optimal quality images that will load the fastest. To avoid having to create different variants manually, we added a worker that does this automatically on the server. The content manager uploads a new product and a large photo for it, and all options for the specified templates appear on their own.

Image tasks were important, not only for user interaction, but also for SEO. Search engines estimate loading speeds from different devices, so our work will help TOPTOP.RU get higher positions in search results.

Integrations in the online store

TOPTOP.RU is a classic e-commerce project, which means it has a lot of integrations to expand its functionality. All of the ecommerce integration services worked on the old version of the site, and we were required to transfer them to the new one without loss.

CRM. Previously, the client worked with RetailCRM. All client information was collected in it, and order notifications left from it. Now, in connection with optimization, we transitioned to 1C. TOPTOP.RU already has a 1C warehouse system, so this allowed them to combine CRM with a warehouse to speed up work. We also implemented interaction with the API of the client's new CRM system to send data about orders and customers to it. There are additional opportunities to develop the interaction of the CRM with the site, for example, writing an API to allow the CRM itself to request any necessary data from the site.

Mindbox. We send custom events to their unique widget, Mindbox, and we get an exclusive product recommendation feed for each user. We embedded the widget on the site as a native element. Unfortunately, this product gallery is problematic to integrate into React applications, since drag and swipe do not work well in it. However, we managed to embed the widget without breaking the site design.

Salesbeat. This integration allowed us to improve the checkout form. It helps to calculate and organize delivery to any city with the selection of a transport company. We send the data specified by the user via the API and receive different options and costs. In addition, we connected all of the analytics integrations that worked before: Google Analytics, Yandex.Metrika, Facebook Pixel, etc. We paid special attention to the Open Graph markup for sharing goods on social networks.

Launching the updated website

In addition to the catalog, we also updated the home page, shopping cart, and other related pages. In January 2020, the new website was released.

The launch had to be scheduled for night-time, as the site had high traffic during the day, and we did not want to lose customer orders if something went wrong. There was a risk of complications, because the deployment was not seamless. A new server was prepared for the new frontend, while the main application remained on the old server.

On the first attempt, the website failed to start, as there were difficulties with the performance of the system. This was due to the fact that the frontend turned out to be more demanding than we originally expected. Previously, users would click and wait for pages to load. On the new site, the pages loaded quickly, so users could make a series of clicks, and the server had to handle everything.

We quickly rolled back all the changes, added caching where it was missing and adding CPU and RAM to the new server, and successfully launched the new site.

Immediately after the release, the checkout updates were also finalized. The new version provided autodetection of the city and a quick calculation of the delivery costs.

Fighting a DDoS attack

After 4 months, in the midst of working on new functions, we received a message from the TOPTOP.RU team: "It seems we were hacked."

Fraudsters staged a DDoS attack so that the site fell and sales stopped, and they demanded several thousand dollars to restore it.

In order to repel the attack and not pay scammers anything, we did several things:

• Changed the IP address of the machine that hosted the site and hid the DNS records
• Moved data management to Cloudflare
• Proxied traffic
• Enabled the "maximum" defense mode from Cloudflare for the next 24 hours after the attack (repelled 62 threats)
• Enabled JS-challenge for suspicious IPs

In addition to technical methods of protection, the approach of TOPTOP.RU management played an important role in repelling the attack. They managed to maintain a rational approach and withstand psychological pressure.

Authorization by phone number

Our new task is to switch login authorization from email to phone number. We are making this change for several reasons. First, it will make the service more individual and allow clients to communicate more easily by asking questions through messengers and social networks. With a customer’s phone number, we can immediately send information about their order or personal offers via SMS or instant messengers.

Second, a person may change their email address, or simply ignore promotional emails. The average user, according to TOPTOP.RU, is a young person browsing the site from their smartphone. They may not even notice the email from TOPTOP.RU among all of the other unread notifications.

Third, it is safer. If a scammer gains a customer’s email address and password, which are far too easy to steal, they can also access the victim's payment information. However, when you use a phone number to login, instead of using a password, you use a one-time code sent to you via SMS. Without physical access to the corresponding phone, stealing this code is much more expensive and time-consuming.

The result

Despite the difficulties launching a new design and repelling an attack, the site is now working successfully, and users are receiving their orders. Traffic can reach hundreds of orders per hour, and even thousands on sale days, and the server will not crash.

Future plans include reworking the buyer's personal account and moving the last pages from a monolithic application to a React frontend.

For us, this project became an opportunity to look at our development management. Often, there is no technical specialist on the client's side, and we are hired as consultants. TOPTOP.RU has a technical director responsible for internal services, but our expertise helped them make more informed decisions for the development of the site. For example, we went over Ruby refactoring techniques and discussed the benefits of refactoring vs. working with legacy code. Which convinced them to refactor the old code to avoid any technical problems in the future.

If you are looking for a team that is ready to work on your e-commerce product, fill out the form below and we will contact you as soon as possible.