Accelerate the 5WATT online store

There were top priorities, among of which:

• speed audit;
• page loading speed up;
• load testing and performance improvement;
• site optimization to increase PageSpeed ​​indicators.

The work was carried out from October 2019 to March 2020.

The customer asked for optimization works according to the specification from SEO-specialists. But they were postponed, because we needed to focus on solving the download speed problem.

We conducted a speed audit and load testing to do this. Load testing became one of the most interesting tasks.

A set of improvements, that increased the performance and speed of the website, was implemented as a result.

Diana Khomenko,

RED CHAMELEON Project Manager

Our web programmer found a number of problems in the project as a result of the speed audit. Quick tests showed the main directions for optimizing the loading and speeding up the website.

Upgrading to a newer version of PHP

We compared PHP versions without changing other parameters. A significant increase in productivity is noticeable only due to this.

PHP 7.0 (left) and current 5.6 (right).

Install a caching module

Our developer took a random caching module for testing and got a 200% increase during testing.

Indicators with and without caching.

We recommended that the client implement these changes firstly and only then move on to Google PageSpeed ​​optimization.

Caching module

The problem with PrestaShop modules is that they are paid (and often quite palpable) and there are no demos. So, an outdated version was used for a quick test during the speed audit.

Therefore, the choice has to be based on the number of downloads, the regularity of updates, user ratings and articles, but there was no opportunity to test them on the site in order to compare in real conditions.

We offered the client the Page Cache Ultimate Module.

After installing the module and warming up the cache on the test server, we got a rather impressive speed boost.

There is a comparison of work without caching and with caching in the module:

Similar results were observed on all pages of the online store. At the same time, the loading speed readings with the cache are more stable: without caching, the loading time of the same page can vary from 1 to 2 seconds, and the difference decreases to 100–200 ms with the cache enabled.

Lazy loading Youtube scripts for embedded videos is a great way to reduce page rendering time. The essence of the method is that when you load a content, only a picture with a screenshot from the video is loaded instead of an embedded video and a lot of related scripts, but after clicking on the picture, the YouTube player will be loaded. Thus, the video is loaded only if the user wants to watch it. Read more about this method here: https://www.labnol.org/internet/light-youtube-embeds/27941/ .

We managed to reduce the page size by 1.7 MB using lazy loading.

We added dns-prefetch to the head section of the page to increase the loading speed of external resources.

This structure helps to determine in advance the IP addresses of third-party resources from which content is loaded, until the moment when data is actually requested from them. This saves time on external connections.

We conducted a stress testing of the online store to determine the performance of the server and CMS PrestaShop, taking into account the connected Cloudflare CDN.

The work was carried out in two stages:

1. Initial testing with several tools.
2. Control tests after additional server settings.

To get the most objective results, our programmer conducted a series of tests using several services:

• https://loader.io/
• https://frugaltesting.com/
• https://www.joedog.org/siege-home/
• https://gatling.io/open-source/.

As a result of the tests, we establish that:

• the server is capable of holding a load of 10 users per second for one minute. If there are more users, the failures begin;
• the site withstood the load of 5 users per second for 5 minutes (so, it will stay longer).

The current configuration of PrestaShop is also able to withstand the load (taking into account the connected Cloudflare). There is no need to abandon CMS because of performance needs.

After making changes to the server settings, we retested to evaluate the results of the adjustments. We use only Gatling and 2 scripts for this:

• 5 users per second for 5 minutes (total 1500 users);
• 10 users per second for 5 minutes (total 3000 users).

All tests showed noticeable performance improvements. The server response time has been greatly improved

Before:

After:

Thus, our programmer identified the problems that had negatively affected the performance of the resource thanks to the load testing. And these problems were eliminated in conjunction with the system administrator of the server. The result is a speed and performance increase of the online store.

A number of optimizations were carried out to improve the indicators of the Google PageSpeed ​​service:

• the font-display property for fonts was added;
• the "lazy loading" for images and videos was implemented;
• the element for loading fonts was implemented;
• the module for displaying images in WebP format was installed and finalized;
• the script loading was optimized.

The results for different page types for mobile and desktop versions:

• Home - 53/96
• Catalog page - 77/99
• Product card - 71/98
• Blog - 72/95

Our team managed to achieve decent performance indicators, loading speed and PageSpeed ​​index.

For this purpose we:

• optimized HTML code;
• provided delayed loading of “heavy” content and preloading of third-party resources;
• implemented the WebP image format and improved the output of such images for supporting browsers;
• set up the server in cooperation with the system administrator;
• organized caching.

The client was satisfied with the achieved result. And this is the best indicator of the quality of the work of our team.