Biggest challenges:

1. We had to migrate from Customer’s local hosting to Digital Ocean. - The previous hosting worked very slowly, had a lot of downtimes, difficult scaling, and the support wasn’t sufficient. Digital Ocean is a much more popular and reliable solution. It works very quickly and is intuitive to use and manage. It is also well supported, what’s important for the Client’s future.

2. Lack of a test environment at the beginning of the project. - when we started our cooperation, there was only one environment - production. It means we didn’t have space to test solutions.

3. Finally, we had to work in three different test environments, because the customer wanted so. The first one - production, the second and third one - development - one for developers, and one for administrators of the shop. That resulted in large differences between these three versions, so we asked the Client to unify test environments and turn them into only one. After all, we worked on one development environment and saw the results in the production environment.

4. We were working with an older version of PrestaShop - 1.6. Nowadays, the latest version of this platform is 1.7. The problem is that Presta 1.6 is no longer supported, and developed. What does it mean? The catch is that when you use a specific version, it takes a lot of time and money to change and upgrade it. This is why we continued working with Presta 1.6.

5. We had to adjust PrestaShop to the .webp extension, which is not supported there. - As a first solution, we tried to upload the special module, but it delayed the performance of the website. Finally, the whole server crashed, so we had to implement another solution. This option consisted in uploading the photos and converting them to webp. on the server. As a result, we receive a folder with webp-extension files.

Technology stack:

• PHP 7.2
• PrestaShop
• HTML
• CSS
• Java Script

The project was divided into several stages.

1. Creating development environment

The shop had only a production environment. To develop the project, we needed to create a new one - a test environment, which was used to check applied solutions.

2. Research and implementation of available ready-made modules

There were different modules that needed to work unfailingly, essential for the proper functioning of the platform, for example:

• The module responsible for stock levels of products in different warehouses throughout the country. None of the available ready-made modules was good enough and didn’t meet our expectations, so we had to create our own. The goal was to have the ability to check current stock levels in different warehouses, through the website. It couldn’t be only the information if a product is available or not. A potential customer should be able to see an approximate amount of goods in a particular place. Then he can decide from which warehouse he wants to order stuff. He can choose two options - delivery to the address, or personal pick-up.

• The module responsible for showing the delivery time of particular products in the catalog. - A potential customer can choose from which warehouse he wants to order materials. To make a good decision, he can compare delivery times from different warehouses, and choose the option that suits him the most.

• The module responsible for online chat. - Of course, ready-made modules are sold and available, but the real trick is to choose the best one before buying. :) To do that, we did some research and chose the one that was tailored to the Customer’s needs. It turned out to be the bull’s eye! Spent money has been well invested!

3. Graphic and functional module changes

The shop had a ready-made theme and design that needed a lot of corrections. We changed a lot of visual aspects starting with fonts and ending with ways of displaying categories in the main menu.

4. Performance optimization and improving results in Page Speed Insights

Then, we had to optimize the website, so it loads quickly. Did you know that if your website loads for more than 3 seconds, 50% of users leave? After our amendments, the user doesn’t have to wait for content and graphics to appear, so the whole page works faster. Actions we introduced:

• Lazy Load implementation - Why is it essential? Because when you open the website, you need to see only the upper part of it. When you scroll down the page, then other parts load and appear. This solution eliminates stuttering.

• Changing photos and graphics from .jpg to .webp. - Webp extension simplifies the loading of graphics.

• Minification of .js and .css scripts and removing unnecessary ones - We removed unnecessary scripts, so the code files weigh less, and the whole page loads faster.

Now, the Centrobud page loads 75% faster than ever before. It’s worth adding that it’s difficult to increase an online shop's loading speed that much because there are a lot of products in it. As you can see, we managed! :)

At the end of the project, we conducted a short training. We showed the Customer changes that we implemented, and explained to him, how they work, how to use them, and how to effectively take advantage of them.