Lightning fast frontend for e-grocery store – competitive advantage thanks to speed.

Home page loading time reduced from 8 seconds to 1.3 seconds for full content display and to 3 seconds for full interactivity – including loading hidden areas of the page.

Client

One of the largest entities on the Polish e-commerce market, noting a double-digit increase in sales with an annual turnover of over PLN 250 million.

Need

Building a competitive advantage on the Polish e-food market and increasing sales volume by 40 percent year on year. Improving the e-shop operation.

Challenge

Creation a new frontend architecture that will:

• significantly speed up the first page load (it took 8 seconds then) with very good quality photos,
• speed up the navigation in the store,
• improve SEO,
• enable fast and frequent development, generating fewer errors,
• reduce the dependence of the marketing department on IT by facilitating the creation of new pages in the CMS,
• shorten time-to-market

Solution

After the audit, we recommended basing the new frontend on modern, fast technologies – React.js, ClojureScript and DataScript. Created and developed by, among others Facebook developers, the React.js library is great for the debuts of websites that debut with dynamically changing data.

The structure of the new frontend resembles tiles. You can freely change the location of the slider, search engine or fields with recommended products. Widely used e-commerce “engines” do not offer this freedom.

Michał Stachurski, leader of the R&D department at Retailic.

The use of React.js in conjunction with the reconstruction of the e-store structure also improved the store’s visibility in search results. Previously, not all data was indexed by Google robots. To reduce the loading time of the home page, Retailic delayed the loading of scripts that collect data about users – this is done only after the visual elements are displayed. In this way, the goals of consumers and the client’s have been reconciled: users can start to familiarize themselves with the offer faster, and the client can still collect the necessary data.

The results

The implementation of the new frontend made it possible to achieve all the assumed goals. The loading time of the home page is reduced from 8 to 1.5 seconds (in 2020: 1.3 seconds) while maintaining high-quality photos (the page “weighs” about 8 megabytes – that’s a lot!). The marketing department has gained much greater independence and creates most of the content pages completely independently from the IT department from the CMS (content management system) level.

The benefits of reducing the communication overhead and shortening the time needed to create promotional campaigns go beyond simple savings.

– says the customer’s e-commerce coordinator.

We see a great value in the fact that our strategy is agile and the marketing department can focus on delivering key values.

Thanks to the new front-end architecture, the company can conduct test activities and manage the experiences of its customers in a more flexible way. The store’s development sped up. Instead of original and long-lasting changes, parts of the store are modified every day, which results in a regular improvement of the store’s indicators and results, while reducing the risk of ineffective design decisions.