PrestaShop 1.4.3 Performance Guide
Table of contents
/*<![CDATA[*/ div.rbtoc1597330885146 {padding: 0px;} div.rbtoc1597330885146 ul {list-style: disc;margin-left: 0px;} div.rbtoc1597330885146 li {margin-left: 0px;padding-left: 0px;} /*]]>*/
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 first if statement above enables browser caching of images, CSS, JavaScript and icons. It instructs the browser to cache images for 1 month, CSS and JavaScript for 1 week and icons for 1 year. This means that the second time a customer visits your website, the images, CSS, JavaScript and icons will be read from the customer’s browser cache instead of re-downloaded, which will reduce the load time.
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 though that if you disable ETags and then change an image, CSS, JavaScript or icon, it will not be re-downloaded until it has expired or the customer clicks the Refresh button in their browser. That means that it may appear as though your modified images, CSS, JavaScript and icons are not updating. You must remember to refresh your browser whenever you modify these files.
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.
Choose the “Use CCC for CSS” option and “Use CCC for Javascript” options to compress CSS and Javascript. Choose “Compress inline Javascript in HTML after ‘smarty compile’ execution” to compress inline Javascript and “Minify HTML after ‘smarty compile’ execution to compress HTML. There is also a “High risk HTML compression” option, but it will cause your website to become non-standards compliant and it may cause problems with UTF-8 characters, so it is better not to enable that option.
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:
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.
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-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.
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-home.jpg, /img/p/1/5/15-large.jpg, /img/p/1/5/15-medium.jpg, /img/p/1/5/15-small.jpg and /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.
Last updated