Table of contents
PrestaShop 1.4.3 Performance Guide
There are many things you can do to improve the performance of your PrestaShop website. Yahoo and Google have both created general website performance guidelines here and here. There are also tools available that rate the performance of your website including Yahoo YSlow! and Google Page Speed. PrestaShop automatically handles most of these performance guidelines for you. This performance guide describes how to implement the guidelines on your PrestaShop website that require action on your part.
Enable GZIP Compression and Browser Caching
PrestaShop makes it easy to enable GZIP compression and browser caching on your website. Just upload a blank
.htaccess file to the root directory of your server and give it
chmod 666 permissions, then go to the Tools > Generators tab in the Back Office. In PrestaShop v1.4 and above, tick the “Optimization” checkbox, then click the “Generate .htaccess file” button to create an
.htaccess file that enables GZIP compression and browser caching. In PrestaShop v1.3 and below, this checkbox will not exist, so you will need to manually copy the code below to the bottom of your
The code in the first
FileETag line above enables ETags on your server. ETags are used instead of the last modified date to determine whether content has changed before it has expired. It the content has changed, then it is re-downloaded instead of waiting for it to expire. Note that Yahoo recommends disabling ETags to improve performance. To disable ETags, change the line to:
Note that PrestaShop’s Combine, Compress and Cache feature will only work with themes based on the default PrestaShop v1.4 theme or later. If you are using a theme designed for an earlier PrestaShop version, enabling the feature will cause problems. Also, third-party modules may not be coded to take advantage of this feature. For those modules, you will need to modify the
hookHeader() function so that it uses code like the following to include its CSS file instead of linking it in a TPL file:
and the following to include its JS file:
Enable Smarty Template and File Caching
An easy way to improve the speed of your PrestaShop website is to disable Smarty compiling and enable caching. By default, Smarty recompiles template files every time they are requested, which is great when you are debugging the templates, but it slows down your website. Once you have finished debugging your templates, you should disable this feature so that Smarty templates are unnecessarily recompiled. To do this, go to the Preferences > Performance tab and change “Force compile” to “No” and also make sure “Cache” is set to “Yes”. Smarty templates should then load instantly on your website since they have already been compiled and cached.
PrestaShop also has the option to cache files on another server. Choose “Memcache” as the “Caching system” if you have the Memcache PECL extension installed on your server. It is not installed by default in PHP, so you will most likely need to download it here and install it on your server or ask your host to install it for you. You will get the following warning message until you do. Click on the “Add server” link to add a new server and assign it a weight.
Alternatively, you can choose “File System” as the “Caching system”. That will store a cache on your website. You can also specify the directory depth of the cache.
Optimise Images and Use CSS Sprites
Another way to improve the performance of your PrestaShop website is to optimise your images. All images that use about 256 colours or less should be saved in PNG-8 format using an image editor like Paint.NET. PNG-8 is the successor to GIF and provides the same lossless compression in a smaller size. Images with many more than 256 colours should be saved in JPEG format. JPEG uses lossy compression rather than lossless compression like PNG, so keep a copy of the original image in PNG-24 format before compressing it. When compressing images as JPEGs, try to reduce the quality percentage as much as possible, but not so much that the compression is noticeable.
Try to keep the size of each image under 25 KB, since that is the maximum size mobile phone devices like iPhones will cache. Also, make sure your favicon is small, preferably less than 1 KB, so that it loads quickly. You can use an icon editor like IcoFX to create an icon. Upload the icon on the Preferences > Appearance tab.
Images referenced in CSS files can be combined into CSS sprites to reduce the file size of the images and the number of HTTP image requests. SpriteMe is a tool that will do this automatically and report how much download can be saved before applying it to your site.
Serve Static Content from a Cookieless Domain
When the combine, compress and cache option is enabled, PrestaShop allows you to distribute your static content including images, stylesheets and scripts among up to 3 domains. To do this, go to the Tools > Performance tab and enter the domain or subdomain names of the servers. You can put all your static content on a subdomain like http://static.domain.com or on a separate domain name altogether. Note that if you choose to have static content on a subdomain, your main website must be http://www.domain.com so that the cookie does not apply to the subdomain. If your main website is http://domain.com, then the cookie will be applied to http://static.domain.com too, causing it to not be a cookieless domain.
Reduce Cookie Size
Cookies are used for a variety of reasons such as authentication and personalisation. It's important to keep the size of cookies as low as possible to minimize the impact on the customer’s response time. Unfortunately, PrestaShop’s cookie can become quite big and there isn’t much you can do about it. The one thing you can do to improve the cookie speed is to use mcrypt instead of BlowFish. To do this, go to Preferences > Performance and change the “Ciphering Algorithm” to “Use Rijndael with mcrypt lib.”
Use a Content Delivery Network
A customer’s location can have an impact on response times. A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. When a customer’s browser requests a file, their browser will download it from the closest available server, which will be much faster than if it was downloaded only from the country where your website is hosted. It also saves bandwidth on your website, since the file is downloaded from the CDN instead of your website. Customers will also save bandwidth if the file is a common library like jQuery that has already been downloaded for another website, since the file will be read from the browser’s cache instead of re-downloaded.
Google has a CDN available with many common libraries. For example, the URL for jQuery v1.4.4 is https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js.
Divide Product Images into Subdirectories
In PrestaShop v1.4.2 and earlier, when you upload a product image, the image is saved in the img/p directory using the product ID and image ID. For example, in a default PrestaShop install, the second iPod Nano image is stored as
/img/p/1-2.jpg. PrestaShop also generates thumbnail images as specified on the Preferences > Images tab. Each image size that has "Products" ticked will cause a thumbnail image to be created. For example, in a default PrestaShop install, the second iPod Nano image will also have thumbnails
/img/p/1-2-thickbox.jpg. That's a total of 6 images that are stored for each product image by default.
This system works well when there aren't many product images, but when there are thousands of product images, it may cause problems. Some hosts put a limit on the maximum number of files a subdirectory can contain, so product images may stop working after reaching the limit. Also, some FTP clients have a maximum number of files per subdirectory, which will cause all product images created after the limit was exceeded to become inaccessible.
PrestaShop v1.4.3 gets around these issues by using a new image system that divides product images into subdirectories using the image ID. For example, in a default PrestaShop v1.4.3 install, the MacBook Air product image is
/img/p/1/5/15.jpg and the thumbnails are
/img/p/1/5/15-thickbox.jpg. So by default, there are 6 images in each subdirectory, which won't ever exceed any maximum file-per-subdirectory limits. Having only 6 images per subdirectory instead of thousands of images in a single directory will also improve the performance of loading the images.
To switch to the new image system, go to the Preferences > Images tab and click the "Move images" button. Depending on how many product images you have, it may take a while to move them all into subdirectories.
Once it's finished, go to the Preferences > Products tab and change the "Activate legacy images compatibility" option at the bottom of the page to "No" to use the new image system.
Lastly, go to Tools > Generators and regenerate your
.htaccess file so that all the new product links work.