Prestashop Optimization: How to optimize Prestashop loading speed?

Need Prestashop optimization?
The primary objective of a Prestashop e-commerce site is to convert as many visits as possible into sales.
Statistics show that the longer a site takes to load, the lower the chances of a visitor completing an order.
According to Google, an excessive loading time can easily lead to a 20% drop in traffic to your site.
If you don’t want to see your conversion rate drop, you urgently need to optimize the loading speed of your Prestashop site.

Why optimize the loading speed of your Prestashop site?

The purpose of an online store is to sell.
If your site takes too long to load, visitors will look elsewhere.
Three seconds seems to be the accepted limit beyond which you’re already losing half your potential customers.
After these few seconds, users simply leave the store.
Optimizing the loading speed of your Prestashop site is therefore essential.
Speed isn’t everything, but with a slow site, or at least one that’s slower than your competitors’, you’re guaranteed to lose customers. prestashop site optimization

What factors affect Prestashop’s loading speed?

To understand which factors have the greatest influence on the loading time of your Prestashop site, you need to understand how a web page is displayed.

1st phase: calling the server

When an Internet user clicks on a link, product photo or button on the site, a request is sent to the server to load the requested page.
The time elapsing between the user’s click and the server’s receipt of the request depends on a number of criteria, including network quality, geographical distance and the presence of a cache.

2nd phase: execution on the server

During this phase, the server analyzes the request received, processes it and sends back the response.
If it’s a simple HTML page, the processing time will be extremely short.
No calculation is required, just send back the HTML file.
On the other hand, if it’s a more complex page, such as product details or shopping cart contents, it will take longer.
The server will have to call up the database, perform the necessary calculations, generate the page and send it back.

3rd phase: server response

The response to the request sent by the Internet user must now travel in the opposite direction, without necessarily taking the same route.
Once again, the speed at which this response travels will depend on the speed of the networks used.

4th phase: DOM loading

Once the browser has received the response, it needs to load not only the HTML file, but also all related files, such as images, JavaScript or CSS files.
Once all the files have been collected, the browser still has to interpret and execute the JavaScript and generate the final rendering of the page for display.

Bottlenecks

While the call to the server and the retrieval of the response may take a few seconds, it’s going to be difficult to save time on these phases.
We have no control over the network infrastructure, and depending on the path taken, data transfer times can vary.
Network quality, throughput and traffic at a given time “t” are difficult to control.
On the other hand, a well-configured cache should ensure that only the bare essentials are loaded, preserving files already used by the browser.
On the first visit, the browser may cache a certain number of CSS and JavaScript files, for example.
When the next page is displayed, local copies of the files are used, thus avoiding unnecessary exchanges between the browser and the server.
On the server side, some pages may also come from a cache.
For example, a product page that changes very little, or general sales conditions, may not be recalculated on each request.
Using a file in the cache rather than performing a complete build can greatly reduce execution time on the server.
Finally, the DOM loading phase is often the longest, depending on the complexity of the page, the quantity of elements to be displayed and the JavaScript code to be interpreted and executed.

Prestashop Optimization: How to optimize the speed of your Prestashop site in 3 steps?

As you can see, the performance of your Prestashop site depends on a number of parameters.
You have little leeway over the network infrastructure used by the data.
However, it is possible to optimize both the server and the Prestashop site itself.

1- Measure site performance

Before hoping to optimize anything, it’s important to carry out a site performance audit.
There are several free tools available for this purpose. GTmetrix, Pingdom and PageSpeed Insights are undoubtedly the three most widely used free tools.
The principle is simple.
From the home page of your chosen tool, you enter the address of your Prestashop site and launch an analysis.
You’ll get a report indicating your overall performance level.
Each element that can be optimized is then indicated, along with recommendations.
Generally speaking, these elements are ranked according to the priority to be given to improvements.
An action that is simple to implement and delivers significant benefits will necessarily be given priority.
While each of these tools is powerful, don’t hesitate to use several of them.
They don’t all take quite the same approach to site analysis, and the results, if they overlap, are complementary.

2- Server optimization

Server selection

The choice of server is the basis of your Prestashop hosting.
If you’re planning a high-traffic site, which is quite desirable for an e-commerce site, there’s no need to consider a shared server in an entry-level package.
The server would quickly be saturated and response times discouraging.
It all depends on your technical knowledge.
If you’re tech-savvy and able to manage your server yourself, a dedicated server (VPS for Virtual Private Server) is ideal.
You’ll be alone on the machine, and all its power will be at your disposal.
However, you’ll need sufficient skills to configure and manage it properly.
If you have the necessary budget and don’t want to manage it yourself, you can hire a service provider to do it for you.
If you don’t have the necessary expertise and don’t want to call in a service provider, you can opt for a shared server, but it’s better to choose a high-end solution.
The server is shared with other customers, but will still have the power needed to keep Prestashop running smoothly.
This is often a good compromise between technical needs and the budget allocated to the online store.
See also: How do I migrate Prestashop to another server?

prestashop speed optimization

PHP version

Using the latest stable version of PHP is always a good idea.
You benefit from the latest patches in terms of both functionality and security.
But above all, you benefit from better performance.
For example, if you have a site running on PHP version 5.6 (which is no longer maintained, but is still fairly widespread for reasons of compatibility with older applications), upgrading to PHP version 7.x can boost performance by up to 25%.
It makes sense to use the latest version of PHP.
Beware, however, of the version of Prestashop you’re using.
On older versions, certain incompatibilities may arise due to changes in the PHP language.
So test your site beforehand to make sure everything’s working properly, and if possible, use the latest version of Prestashop too.

Using Memcached and OPCache

Memcached will cache the results of queries made by PHP to the database.
This means that if a query has already been executed at least once and cached (the list of products on the home page, for example), it will not be executed again.
The result will be retrieved from the cache and there will be no further call to the database, saving precious seconds.
Requests and processing by PHP can sometimes take a long time.
OPCache is a dedicated PHP cache that stores part of the processing results.
If part of the PHP code is often executed to build up the same result, this result is cached.
When this PHP code needs to be executed again, the server will retrieve the result directly from the cache, which is much faster.
Memcached and OPCache must be installed and activated on the web server.
These tools can save a considerable amount of time when executing PHP code.

Data compression

As you can see, the more data you transfer between the server and the surfer’s browser, the greater the impact of the quality of the network over which the information is transmitted.
The easiest way to reduce the volume of data exchanged is to compress it.
The data will occupy a smaller volume and be exchanged more rapidly.
Simply activate the “gzip compression” option on the server.
In this way, all data sent by the server will be compressed, then decompressed by the browser on reception.

Cache server, CDN and media servers

A caching server is only worthwhile if your site has an international presence and you have a substantial budget.
The principle is to duplicate the pages of your Prestashop site on different servers around the world.
This way, wherever the user is located geographically, the server closest to him or her will deliver your site’s pages.
This saves data transfer time.
The use of a CDN, or Content Delivery Network, overcomes a limitation common to most browsers.
Generally speaking, a browser can handle up to 8 simultaneous connections to a server.
In other words, if displaying the requested page requires loading more than 8 files, for example, there will be a wait for subsequent files until a connection becomes available.
Between JavaScript files, CSS files and media, it’s common to have more than 8 elements to load.
If you have a server with a domain name different from that of the Prestashop site, or more simply, sub-domains pointing to the main domain via aliases, you can set up a CDN.
Prestashop lets you configure up to three media servers on which it will fetch the files it needs.
This triples the number of simultaneous requests.
You can load up to 24 files simultaneously instead of 8.
The loading speed of your Prestashop site is considerably improved.

The database

The database can be a real bottleneck in terms of performance.
All the site’s crucial information is stored there, and has to be extracted to build the pages.
It is therefore important to ensure that the database is always optimized.
Typically, for a medium-sized Prestashop site, the tables containing the most data should not exceed 100 MB.
A large e-commerce site may see its tables go up to 200 MB, but rarely beyond that.
If you notice that your database is growing abnormally large, it’s time to launch an optimization with Prestashop’s integrated module.
Most of the time, this is sufficient.
If not, don’t hesitate to call in a specialist.
To reduce the size of your database, it may be a good idea to deactivate the Prestashop statistics modules.
They store a great deal of information in the database.
Instead, use an external tool such as Google Analytics. Read also : Clean up your Prestashop database

3- Prestashop optimization

Module management

Prestashop’s entire operation is based on modules.
These are portions of code that extend the store’s basic functionality.
Each module loads its own files and generates database requests.
It is therefore quite possible for a module to cause slowdowns when loading your site.
The first thing to do is to sort out your installed modules.
Any modules that are not being used should be deactivated and, if possible, uninstalled.
Next, check whether any of the modules in use are slowing down your site.
Reports generated by analysis tools and your own experience can help you determine which modules are the most demanding.
Several solutions are available.
If the functionality is not vital, it may be possible to deactivate the module.
If not, you’ll either have to change it, or adapt it to improve its performance (please contact me).
Or perhaps there’s a more powerful module that offers the functionality you need?

Use of cache and CCC

Prestashop includes a “CCC” option that can be activated to improve site performance.
“CCC” stands for “Combine, Compress and Cache”.
In simple terms, when this option is activated, CSS stylesheets, JavaScript files and HTML code are combined, compressed, minified and cached.
Files containing styles are merged, as are JavaScript files.
This means fewer files to transfer and fewer requests to the server.

Optimizing images

Although the size and resolution of the images used are independent of Prestashop, it is important to take them into account.
Product images in the catalog are managed by Prestashop and should pose no problem.
However, this is not the case for all images used in themes.
In the Prestashop back office, you can find the “Preferences” option > Images.
This allows you to activate image compression.
However, the functionalities offered are very limited.
It may be worthwhile to use a module dedicated specifically to image optimization. prestashop images optimization

CSS sprites and lazy loading

To reduce the number of images loaded by the site, you can use the “sprite” technique.
This involves grouping several small images into a single, larger one.
This is heavier, of course, but requires only one file to be loaded, and therefore only one server call, instead of several.
It is then possible to display only the part of the image that interests us, a “sprite”, thanks to CSS.
Lazy loading means loading only what’s necessary.
Typically, this means loading only the images displayed on the screen.
When you display a list of articles, for example, you often need to scroll down the page to see what’s coming next.
With lazy loading, only the images of visible items are loaded.
There’s no point in loading more when you don’t know whether the user will scroll down the page.
Only when the page actually scrolls down will subsequent images be loaded.
Lazy loading is very simple to implement and will significantly improve site performance, especially on highly graphic pages.

Languages and redirects

If your Prestashop site is available in only one language, be sure to disable the others.
This will avoid possible redirects if a requested language doesn’t exist.
When Prestashop redirects the user to another url, this increases loading time.

Smarty

Smarty is the template engine used by Prestashop.
The principle is simple.
Smarty uses a pseudo-language to define the templates used to display pages.
When a page is loaded, the Smarty code is compiled to provide the final rendering.
This compilation phase is very time-consuming and is not at all necessary outside the site’s development phases.
In the Prestashop back office, in the “Preferences” menu > Performance > Smarty, set the “Force compilation” option to “No” and the “Cache” option to “Yes”.
In this way, Smarty templates will not be recompiled each time a page is loaded, and the result will come directly from the cache.
The performance gain can be significant.

Loading JavaScript files

JavaScript adds an enormous amount to a web page.
However, the problem is that until a JavaScript file is fully loaded, all other loading is blocked.
To overcome this problem, it’s advisable to place calls to JavaScript files at the very end of the page, just before the closing tag ” </body> “.
In this way, all other files, and in particular CSS files, will be loaded beforehand and rendering of the page can begin.
The user will have the impression of waiting less time.
Even if not all the JavaScript files have been loaded, the page can still be displayed.
JavaScript files will continue to be loaded and executed transparently.

To conclude on Prestashop optimization

There are many ways to optimize your Prestashop site.
Keep in mind that there’s no point in trying to do everything at once.
Analyze your site’s performance, identify areas for improvement and prioritize them.
The most complex modifications are not necessarily the most effective.
Spending days modifying a slow module to achieve a 1% gain shouldn’t take precedence over reducing the weight of images, which may only take a few hours to achieve a 5 or 10% gain, for example.
Select an improvement to be made, implement it and measure performance again to estimate the gain.
When you’re satisfied, move on to the next step.
Only by being rigorous will you succeed in optimizing your Prestashop site.
Need help optimizing your Prestashop site?
Contact me to discuss.
I’ve been a Prestashop developer and integrator for nearly 10 years, and I’ll be happy to advise you on your e-commerce project.