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 .htaccess file.

...

The code in the second if statement above enables GZIP compression on HTML, CSS and JavaScript.  GZIP compression generally reduces the size of text files by about 70%, which greatly reduces the time it takes to download the files and saves bandwidth.  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.

Combine, Compress and Cache CSS and JavaScript

Combining and compressing files reduces the number and size of HTTP requests, which speeds up your website. PrestaShop takes the hard work out of combining, compressing and caching CSS and JavaScript by doing it all for you.  It has the option to combine all external CSS files into a single CSS file and all external JavaScript files into a single JavaScript file.  There is an option to compress inline JavaScript in HTML too.   PrestaShop uses Douglas Crockford’s JSMin Javascript minified ported to PHP by Ryan Grove for its compression and Smarty to cache the combined, compressed file.  Go to the Preferences > Performance tab to enable these options.

...

The third-party module’s CSS and JavaScript will then be combined and compressed along with PrestaShop’s modules.

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.

...

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.

...

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-home.jpg, img/p/1-2-large.jpg, img/p/1-2-medium.jpg, img/p/1-2-small.jpg and img/p/1-2-thickbox.jpg. That's a total of 6 images that are stored for each product image by default.

...