LogoLogo
Homepage
  • Documentations for PrestaShop 1.4
  • English documentation 1.4
    • Getting Started
    • Updating PrestaShop
    • User Guide
      • Training
      • Customizing your shop
      • Browsing the front-office
      • Connecting to the PrestaShop back-office
      • Adding Products and Product Categories
      • A Look inside the Catalog
      • Managing Customers
      • Managing Orders
      • Managing Payment Methods
      • Managing Shipping
      • Understanding Statistics
      • Managing Modules
      • Managing Employees
      • Understanding the Preferences
      • Exploring PrestaShop's Tools
      • PrestaShop Support
    • System Administrator Guide
    • Developer Guide
      • Developer tutorials
        • Using the REST webservice
          • Chapter 1 - Creating Access to Back Office
          • Chapter 2 - Discovery - Testing access to the web service with the browser
          • Chapter 3 - First steps - Access the Web service and list client
            • 3.1 - Access the web service
            • 3.2 - Handling errors
            • 3.3 - List clients
          • Chapter 4 - Retrieve Data - Retrieving a Client
          • Chapter 5 - Modification - Update client
          • Chapter 6 - Creation - Remote Online Form
          • Chapter 7 - Removal - Remove customer accounts from the database
          • Chapter 8 - Advanced Use
          • Cheat-sheet - Concepts outlined in this tutorial
        • Understanding and using hooks
        • Synchronization via Hooks
        • Modules, Classes and Controller Override
        • Modules, Override, Web Service
        • Db class good practices for Prestashop 1.4
        • Carrier modules - functions, creation and configuration
        • Creating your own payment module
        • Accelerated Security Course - Episode 1 - Never Trust Foreign Data
        • Accelerated Security Course - Episode 2 - SQL Injections
        • Accelerated Security Course - Episode 3 - XSS
        • Accelerated Security Course - Episode 4 - CSRF
      • Fundamentals
      • Creating a PrestaShop module
      • Development standard
      • Public and overloadable methods
      • Web-service reference
      • How to use the forge to contribute to PrestaShop
      • Rocky's guides
        • PrestaShop 1.4.3 Development Guide
          • Architecture
          • Overriding Files
          • Creating Modules
          • Cookie Structure
          • Database Structure
        • PrestaShop 1.4.3 Performance Guide
    • Designer Guide
      • Coding a theme
      • Design tips
      • Implementing layered navigation in a theme
    • Troubleshooting
    • FAQ
    • User contributions
    • Documentation PDFs
  • Documentation française 1.4
    • Guide de démarrage
    • Mettre à jour PrestaShop
    • Guide de l'utilisateur
      • Formation
      • Personnaliser votre boutique
      • Se connecter au back-office de Prestashop
      • Ajouter des produits et des catégories de produits
      • Un aperçu du catalogue
      • Gérer les clients
      • Gérer les commandes
      • Gérer les méthodes de paiement
      • Gérer le transport
      • Comprendre les statistiques
      • Gérer les modules
      • Gérer les employés
      • Comprendre les préférences
      • Explorer les outils de PrestaShop
      • Obtenir de l'aide
    • Guide de l'administrateur système
    • Guide du développeur
      • Fondamentaux
      • Créer un module PrestaShop
      • Tutoriels pour développeurs
        • Tutoriel Webservice REST
          • Chapitre 1 - Mise en place - Création des accès dans le Back Office
          • Chapitre 2 - Découverte - Tester l'accès au service web avec le navigateur
          • Chapitre 3 - Premiers pas - Accéder au service web et lister les clients
            • 3.1 Accéder au service web
            • 3.2 Gestion des erreurs
            • 3.3 Lister les clients
          • Chapitre 4 - Récuperer des données : Récupérer un client
          • Chapitre 5 - Modification : Mettre à jour un client
          • Chapitre 6 - Création : Formulaire d'ajout à distance
          • Chapitre 7 - Suppression : Retirer des comptes client de la base
          • Chapitre 8 – Utilisation avancée
          • Chapitre 9 - Gestion des images
          • Chapitre 10 - Gestion des prix
          • Mémento : Notions énoncées dans ce tutoriel
        • Mieux comprendre et utiliser les hooks
        • La synchronisation via les Hooks
        • Surcharge et override
        • Modules, surcharge, web service
        • Les bonnes pratiques de la classe Db sur Prestashop 1.4
        • Les modules transporteurs - fonctionnement, création, configuration
        • Cours de sécurité accéléré no. 1 - Never trust foreign data
        • Cours de sécurité accéléré no. 2 - Injections SQL
        • Cours de sécurité accéléré no. 3 - XSS
        • Cours de Sécurité accéléré no. 4 - CSRF
    • Guide du designer
      • Conseils en design
      • Créer un thème
    • Guide du Vendeur
    • Import Wiki FR
      • Dépannage
        • Changer la taille maximum de téléchargement de fichiers
        • Comment ajouter une page à PrestaShop
        • Générer le fichier .htaccess par Prestashop pour avoir des URLs simplifiées
        • Générer un nouveau mot de passe manuellement
        • Import CSV
        • Personnalisation des mails clients
        • Problème d'allocation mémoire chez 1&1
        • Problème pour se connecter après avoir effacé une langue
        • Votre site ne répond plus, une page blanche s’affiche
      • Fidéliser les Clients
      • Gestion des Taxes
      • Installer Un Module
      • Sauvegarder votre Base de Données
    • PDF de la documentation
    • Contributions des utilisateurs
    • Questions fréquentes
  • Documentación española 1.4
    • Introducción
    • Actualización de PrestaShop
    • Guía de Usuario
      • Entrenamiento
      • Personalización de su tienda
      • Exploración del front-office
      • Conexión al back-office PrestaShop
      • Añadir Productos y Categorías de Productos
      • Una Mirada Dentro del Catálogo
      • Gestión de Clientes
      • Gestión de Pedidos
      • Gestión de Métodos de Pago
      • Gestión de Envío
      • Comprensión de las Estadísticas
      • Gestión de Módulos
      • Gestión de Empleados
      • Comprensión de Preferencias
      • Exploración de las herramientas de PrestaShop
      • Soporte PrestaShop
    • Guía del Administrador del Sistema
    • Guía del Desarrollador
      • Aspectos Fundamentales
      • Creación de un módulo de PrestaShop
      • Estándares de desarrollo
      • Manuales de desarrollador
        • Utilización del servicio web REST
          • Capítulo 1 - Creación de Acceso al Back Office
          • Capítulo 2 - Descubrimiento - Pruebas de acceso al servicio web con el navegador
          • Capítulo 3 - Primeros pasos - Acceso al servicio Web y lista de clientes
            • 3.1 - Acceso al servicio web
            • 3.2 - Manejo de errores
            • 3.3 - Enumeración de clientes
          • Capítulo 4 - Recuperación de datos - Recuperación de un cliente
          • Capítulo 5 - Modificación - Actualización de cliente
          • Capítulo 6 - Creación - Formulario En Línea Remoto
          • Capítulo 7 - Eliminación - Eliminar cuentas de clientes de la base de datos
          • Capítulo 8 - Uso avanzado
        • Comprensión y uso de hooks
        • Sincronización a través de Hooks
        • Módulos, Reemplazo, Servicio Web
        • Módulos, Clases y Reemplazo del Controlador
        • Buenas prácticas de Clase DB para Prestashop 1.4
        • Módulos de transportistas - funciones, creación y configuración
        • Curso Acelerado de Seguridad - Episodio 1 - Nunca Confíe en Datos Exteriores
        • Curso Acelerado de Seguridad - Episodio 2 - Inyecciones SQL
        • Curso Acelerado de Seguridad - Episodio 3 - XSS
        • Curso Acelerado de Seguridad - Episodio 4 - CSRF
      • Referencia del servicio web
    • Guía de Diseñador
      • Codificación de un tema
      • Consejos de Diseño
    • Solución de problemas
    • Preguntas Frecuentes
Powered by GitBook
On this page
  • PrestaShop 1.4.3 Performance Guide
  • Enable GZIP Compression and Browser Caching
  • Combine, Compress and Cache CSS and JavaScript
  • Enable Smarty Template and File Caching
  • Optimise Images and Use CSS Sprites
  • Serve Static Content from a Cookieless Domain
  • Reduce Cookie Size
  • Use a Content Delivery Network
  • Divide Product Images into Subdirectories

Was this helpful?

  1. English documentation 1.4
  2. Developer Guide
  3. Rocky's guides

PrestaShop 1.4.3 Performance Guide

PreviousDatabase StructureNextDesigner Guide

Last updated 4 years ago

Was this helpful?

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 and . There are also tools available that rate the performance of your website including and . 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.

<IfModule mod_expires.c>
       ExpiresActive On
       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 text/javascript "access plus 1 week"
       ExpiresByType application/javascript "access plus 1 week"
       ExpiresByType application/x-javascript "access plus 1 week"
       ExpiresByType image/x-icon "access plus 1 year"
 </IfModule>
FileETag INode MTime Size
 <IfModule mod_deflate.c>
       AddOutputFilterByType DEFLATE text/html
       AddOutputFilterByType DEFLATE text/css
       AddOutputFilterByType DEFLATE text/javascript
       AddOutputFilterByType DEFLATE application/javascript
       AddOutputFilterByType DEFLATE application/x-javascript
 </IfModule>

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:

FileETag none

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

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:

Tools::addCSS(_PS_MODULE_DIR_.$this->name.'/css/'.$this->name.'.css');

and the following to include its JS file:

Tools::addJS(_PS_MODULE_DIR_.$this->name.'/js/'.$this->name.'.js');

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

Serve Static Content from 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.

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.

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 for its compression and Smarty to cache the combined, compressed file. Go to the Preferences > Performance tab to enable these options.

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

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 . 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 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. is a tool that will do this automatically and report how much download can be saved before applying it to your site.

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 or on a separate domain name altogether. Note that if you choose to have static content on a subdomain, your main website must be so that the cookie does not apply to the subdomain. If your main website is , then the cookie will be applied to too, causing it to not be a cookieless domain.

Google has a CDN available with many common libraries. For example, the URL for jQuery v1.4.4 is .

Douglas Crockford’s JSMin Javascript minified ported to PHP by Ryan Grove
here
Paint.NET
IcoFX
SpriteMe
http://static.domain.com
http://www.domain.com
http://domain.com
http://static.domain.com
https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
here
here
Yahoo YSlow!
Google Page Speed
PrestaShop 1.4.3 Performance Guide
Enable GZIP Compression and Browser Caching
Combine, Compress and Cache CSS and JavaScript
Enable Smarty Template and File Caching
Optimise Images and Use CSS Sprites
Serve Static Content from a Cookieless Domain
Reduce Cookie Size
Use a Content Delivery Network
Divide Product Images into Subdirectories