There are many ways to improve the performance of a 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 a website including Yahoo YSlow! and Google Page Speed.
PrestaShop automatically handles most of these performance guidelines. This performance guide describes how to implement the guidelines that require action to implement.
Enabling Smarty Template 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 debugging templates, but it slows down the website.
Once finished debugging templates, disable this feature so that Smarty templates aren’t unnecessarily recompiled. To do this, click the Performance subtab of the Advanced Parameters tab in the Back Office of PrestaShop v1.5 and later or the Tools tab of earlier versions.
In PrestaShop v1.5 and later, choose Never recompile template files for the Template cache option in the Smarty section or disable Force compile in earlier PrestaShop versions to ignore all changes to templates and use the previously compiled files.
Smarty templates should then load instantly on your website since they have already been compiled and cached. In PrestaShop v1.5 and later, there is also a Recompile templates if the files have been updated option that will only recompile templates that have been modified since they were last compiled.
This is faster than the Force compilation option, which recompiled every template even if it hasn’t changed. There is also a Cache option to cache Smarty templates so they load faster. For example, the category block uses this option to save its recursively generated categories and then reload them instantly.
When done, click the Save button to save changes. Smarty templates should then load instantly on the website since they have already been compiled and cached.
Disabling combinations and features
If the website doesn’t use product combinations or features, they can be disabled in PrestaShop v1.5 and later to improve the performance of product pages. To do this, click the Performance subtab of the Advanced Parameters tab and then scroll down to the Optional features section.
Use the radio buttons to disable combinations and features. Note that combinations cannot be disabled if they are currently in use. In that case, all product combinations must be deleted before the combinations feature can be disabled. Click the Save button in the toolbar to save changes.
Choose Minify HTML after “smarty compile” execution to compress HTML. Click the Save button to save changes. Note that PrestaShop’s Combine, Compress and Cache feature will only work with themes based on the default PrestaShop v1.4 theme or later.
Enabling the feature on older themes will cause problems. Also, older third-party modules may not be coded to take advantage of this feature. For those modules, 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:
Enabling GZIP compression and browser caching
PrestaShop makes it easy to enable GZIP compression and browser caching on a website. In PrestaShop v1.5 and later, click the Performance subtab of the Advanced Parameters tab in the Back Office and then enable the Apache optimization option in the CCC (Combine, Compress and Cache) section. Click the Save button in the toolbar to save changes.
In PrestaShop v1.4.11 and earlier, upload a blank .htaccess file to the root of the server with chmod 666 permissions. Click the Generators subtab of the Tools tab, tick the Optimization checkbox and then click the Generate .htaccess file button.
PrestaShop will then automatically write a .htaccess file in the root directory with the following:
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 year"
FileETag INode MTime Size
The 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 some servers do not support GZIP compression, so this code will have no effect. In that case, you will need to ask your host to enable GZIP compression or move to another host that does support GZIP compression.
Enabling Memcached, APC, Xcache or File System caching
PrestaShop also has the option to cache files on another server. To do this, click the Performance subtab of the Advanced Parameters tab in the Back Office of PrestaShop v1.5 and later or the Tools tab of earlier versions.
In PrestaShop v1.5 and later, choose either Memcached, APC or Xcache, depending on what the server supports. Earlier versions of PrestaShop only have Memcached as an option. A list of warnings will be displayed at the top of the page with links to download the required extensions. Ask the host whether they can install any of these extensions.
After selecting a caching system, click on the Add server link to add a new server and assign it a weight. If none of the caching systems are installed on the server, choose File System as the Caching system, which will store a cache on the same server. There is also an option to specify the directory depth of the cache. Click the Save button to save changes.
Another way to improve the performance of your PrestaShop website is to optimise the 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 the favicon is small, preferably less than 1 KB, so that it loads quickly. Use an icon editor like IcoFX to create the favicon.
Click the Browse… button for the Favicon option in the Appearance section on the Themes subtab of the Preferences tab and then select the icon to upload it. Click the Save button to save changes.
PrestaShop v1.5 and later allows the compression levels of its thumbnails to be adjusted on the Images subtab of the Preferences tab. There are options to Use JPEG, Use PNG only if the base image is in PNG format and Use PNG for all images.
The JPEG quality text field can be used to reduce the quality and file size and thumbnails. After changing a setting, click the Save button and then click the Regenerate thumbnails button at the bottom of the page.
Using CSS sprites
PNG 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.
To run SpriteMe, drag the SpriteMe link on the website to the browser’s bookmark toolbar in Firefox or Favorites toolbar in Internet Explorer. Go to the PrestaShop website in the browser and then click the bookmark to load SpriteMe.
A list of suggested sprites will then be displayed and a list of non-sprited images with reasons why they can’t be sprited such as the image not being visible, repeating or being a JPEG. Click the make all button to generate all the suggested sprites or use the make sprite buttons to generate only some of the sprites.
After generating sprites, click the export CSS button to view the CSS code. Search for the crossed-out code in PrestaShop’s global.css or other CSS files and then replace the code with the lines that aren’t crossed out.
By default, the sprites will be read from the SpriteMe website. To read them from the local server instead, click on each link to view the sprites. Right-click on each sprite image and then choose Save Image As… to download them into the PrestaShop theme’s
Edit the CSS code to point to the sprites on the local server instead of the SpriteMe website. For example, replace
http://www.jaredhirsch.com/coolrunnings/public_images/d91b07ae46/spriteme1.png in global.css with
Serving static content from a cookieless domain
When the combine, compress and cache option is enabled, PrestaShop allows static content including images, stylesheets and scripts to be distributed among up to 3 domains. To do this, click the Performance subtab of the Advanced Parameters tab of PrestaShop v1.5 and later or the Tools tab of earlier versions. Enter the domain or subdomain names in the Media servers (use only with CCC) section.
Put all the static content on a subdomain like
http://static.domain.com or on a separate domain altogether. Note that if the static content is on a subdomain, the main website must be
http://www.domain.com so the cookie doesn’t apply to the subdomain.
Reducing the 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.
The only way to improve the cookie speed is to use mcrypt instead of BlowFish. To do this, click the Performance subtab of the Advanced Parameters tab of PrestaShop v1.5 and later or the Tools tab of earlier versions. Choose the Use Rijndael with mcrypt lib option in the Ciphering section and then click the Save button to save changes.
Using 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.7.2 is https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js. By default, PrestaShop will read these libraries from the local server.
To make PrestaShop v1.5 and later read the jQuery library from Google’s CDN, simply delete it off the server. For example, deleting
/js/jquery/jquery-1.7.2.min.js off the server will cause the Google CDN to be used instead. Learn more about the available Google CDN libraries here.
Note: There is a bug in PrestaShop v18.104.22.168 that will cause the Google CDN to not be read in the Back Office. To fix it, change line 202 of
if (Context::getContext()->controller->controller_type == 'admin' && !array_key_exists('host', $url_data))
There is also a CloudCache module available for PrestaShop v1.5 and later that can be used to serve the entire website through a CDN. To do this, click the Performance subtab of the Advanced Parameters tab, scroll down to the CloudCache section and then click the Click here to install the CloudCache module for PrestaShop link to download and install the CloudCache module.
Dividing product images into subdirectories
In PrestaShop v1.4.2 and earlier, product images are 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 Images subtab of the Preferences 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 and later 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
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.
In PrestaShop v1.5 and later, this feature is automatically enabled and cannot be disabled. In PrestaShop v1.4.3 to v1.4.11, this feature must be manually enabled by going to the Images subtab of the Preferences tab and then clicking the Move images button. Depending on how many product images there are, it may take a while to move them all into subdirectories.
Once it’s finished, go to the Products subtab of the Preferences tab change the Activate legacy images compatibility option at the bottom of the page to No to use the new image system.
Lastly, go to the Generators subtab of the Tools tab and regenerate the .htaccess file so that all the new product links work.