Ecommerce Blog - The #1 Source for Ecommerce News, Tips and Trends!

Get ecommerce updates, news, and insider tips from the experts at PrestaShop!

Ecommerce Blog - The #1 Source for Ecommerce News, Tips and Trends!
 

< Back to the Blog home

10 Best Tips to speed up your PrestaShop store

This article is the first one in a series titled “Be the Best-in-Class in your Industry”.

Today, your customers are one second away from leaving your online store. Top retailers like Amazon remind us how competitive and cut-throat the e-commerce market is.

A very interesting and powerful story regarding the competitive nature of it, is that Jeff Bezos (Amazon.com CEO & Founder) used to meet every morning with his IT team to compare the loading speeds of their top competitors to make sure that they were at least two times as fast as the #2 competitor.

I won’t lie to you, speeding up your website is cumbersome and technical. However, the good news is that PrestaShop can do most of the job for you!

To be successful, and to keep it simple, follow these 10 tips:

1. Check that your template engine Smarty is properly configured

  1. Go to your admin panel and click on the “Preferences” tab, then “Performance”, look at the “Smarty” section
  2. Check that “Force compile” is set to false
  3. Check that “Cache” is set to true

Configure Smarty

2. Enable CCC (Compress, Combine, Cache)

  1. Go to your admin panel and click on the “Preferences” tab, then “Performance”, look at the “CCC (Combine, Compress and Cache)” section
  2. Enable everything except the “High risk HTML compression”

Enable CCC

3. Prefer Ridjnael to Blowfish to encrypt your cookies

  1. Go to your admin panel and click on the “Preferences” tab, then “Performance”, look at the “Ciphering” section
  2. Select “Ridjnael” instead of “Blowfish”

Configure Ciphering

Warning: You must have the mcrypt PHP extension installed on your server, or else you will get an error message.

4. Switch to the new directory tree for Pictures

In the new PrestaShop v1.4, we are offering a new storage architecture for pictures. The main goal is to avoid having 100,000 pictures in the same “/img/p” folder. Instead, the pictures will be spread into subfolders (ex: “/img/p/1/2/”, etc.).

If you upgraded your shop from a previous version of PrestaShop, you need to do the following to take advantage of this improvement:

  1. Go to your admin panel and click on the “Preferences” tab, then “Images”, look at the “Move images” section
  2. As the process can take a while, make sure that your server can run PHP scripts for more than 30 seconds. If you are not sure, ask your hosting provider.
  3. Click on “Move images”

Move Images

5. Create sub-domains for Javascript files and CSS files

  1. Create a sub-domain js1.mystore.com and ask your hosting provider to direct it to /js/
  2. Create a sub-domain js2.mystore.com and ask your hosting provider to direct it to /theme/mytheme/js/
  3. Create a sub-domain css1.mystore.com and ask your hosting provider to direct it to /css/
  4. Create a sub-domain css2.mystore.com and ask your hosting provider to direct it to /theme/mytheme/css/

These 4 sub-domains will allow your visitors to load more files at the same time. Basically, a web-browser is limited to 8 parallel downloads. Each sub-domain is adding 8 new parallel downloads, so the total would be 40 (Main domain + 4 sub-domains).

6. Setup a CDN

You should think globally; your site has to load quickly from everywhere across the globe. That’s why using a CDN (Content Delivery Network) is the most effective to reduce the distance between your server and your visitors.

PrestaShop has partnered with the best-in-class CDN in the market, CloudCache. The CloudCache module is available for free and PrestaShop’s users have special rates using the “PRESTA25″ coupon on their website.

  1. Download the free CloudCache module in our “Free Modules” section
  2. Install the module in your shop
  3. Create a account on CloudCache using the “PRESTA25″ coupon
  4. Configure the module with your CloudCache API Key

And you’re done! The module will make sure that your pictures are automatically synchronized with the CDN.

7. Merge all your small pictures into a big one using CSS Sprites

Each time your visitors are loading a page from your store, their web-browser has to load about 75 to 100 pictures. Most of these are small decorative pictures which could be easily merged into one big picture called a “CSS Sprite”.

Here is a sample from Amazon:
Amazon Sprite

Main benefits of this technique are:

  • Faster page loading
  • Less server usage (the server will deliver 1 file instead of 100)
  • Smaller HTML code

There’s only one drawback which is the maintainability over time; indeed, it can be time-consuming to add new pictures to your sprite (editing the picture, locating coordinates, etc.).

Useful link: Automatic CSS Sprite Generator

If you have a dedicated server, ask your hosting provider for the following changes:

8. Enable either MemCached, XCache, APC or the default PrestaShop caching system

Memcached is a free distributed memory object caching system. It’s very simple yet powerful and easy to deploy. It can resolve many problems facing large data caches and is already used by Wikipedia, Twitter or Craigslist.

PrestaShop is already ready to use with MemCached and can be enabled in one second:

  1. Ask your hosting provider to enable MemCached for your store
  2. Go to your admin panel and click on the “Preferences” tab, then “Performance”, look at the “Caching” section
  3. Select MemCached in the “Caching system” dropdown menu

MemCached

As an alternative, you can also use XCache (available in PrestaShop v1.5), or the PrestaShop default caching system from the same dropdown menu which does not require any server-side extension.

9. Install a OP-Code caching tool like eAccelerator or APC

eAccelerator is a free PHP code accelerator & optimizer. It increases the performance of PHP scripts by caching them in their compiled state, so that the overhead of compiling is almost completely eliminated. It also optimizes scripts to speed up their execution. eAccelerator typically reduces server load and increases the speed of your PHP code by 1-10 times.

There’s no specific configuration needed to be done within PrestaShop to work with eAccelerator. Simply ask your hosting provider to enable eAccelerator and make sure your store is still working properly.

10. Tune your MySQL configuration, and check your SQL query cache value

Ask your hosting provider to dig into the MySQL configuration and to check the query_cache value. This value should be at the very least “512M” (512 Mega-bytes).

Other MySQL configuration values can also be fine-tuned, have a look to the excellent MySQL Performance Blog.

Extras

  1. Install YSlow or Google Page Speed
  2. Optimize your code with XDebug and KCacheGrind

Conclusion

I hope that today you learned from our experience and our insights. A faster store means more orders and thus more income, that’s the reality. So, don’t disappoint your customers and stay ahead of your competition by checking your online store loading speed often.

At PrestaShop, our motivation is to build a fast and reliable e-commerce solution. It’s a daily challenge and I love it!

The good thing about PrestaShop is that you are part of a worldwide community of e-commerce enthusiasts. There’s no better place to share your best practices; we all learn from each other.

PrestaShop Forum: Share your best tips to optimize your online store

Here are the two best hosting providers which will give you the best results in terms of performance with PrestaShop, at an affordable cost:

HostgatorBluehost

  1. Also, use Nginx instead of Apache for high traffic store and a dedicated server.

    And for very high traffic web site, use HTTP cache (nginx proxy, varnish, Prestashop module ?) ….

  2. Author: Aputsiaq Janussen

    Date: May 9, 2012 at 6:24 pm

    Great article – and bravo for the effort put into Prestashop.
    The optimization done by Prestashop itself are very good.
    I’ve experienced that compressing xml/html server-side improved response time.

    As mentioned in the Extras, installing YSlow and Google Page Speed really helps you discover weaks spots related to speed.
    Page Speed covers at least three technologies: browser extension to measure speed, measure speed online and the Apache module mod_pagespeed. YSlow often recommends reducing image size, and refers to Smush.it – also a great online service.

  3. Hi Bruno,

    Great article but i don’t understand the point 5 because you create some sub domains but what you do with it ?

  4. Author: kkzk

    Date: May 10, 2012 at 8:55 am

    It would be a nice addition to this great post if, for chapter 5, you would give us the .htaccess rules to include in the Tools/Generators/ Htaccess generator section of the BO.

  5. At point 5 you mention that “ask your hosting provider to point to the directory”. So what do you mean here? Ask them to create a soft link (unix style) or create an extra dns entry ??

    • Author: Marius

      Date: July 30, 2012 at 2:49 pm

      Have you find what the point 5 is about?
      as I have asked my shared hosting to do it, and they created the 4 subdomains and in each they created a ,.htaccess file with this code inside, is this enough?
      RewriteEngine On
      RewriteCond %{HTTP_HOST} ^css1.mydomain.com$ [OR]
      RewriteCond %{HTTP_HOST} ^www.css1.mydomain.com$
      RewriteRule (.*)$ http://www.mydomain.com/css/$1 [R=301,L]

  6. Author: nk8

    Date: May 16, 2012 at 6:07 am

    Tip #5 is very clever — I wasn’t aware of the download cap and the exception of sub-domains. This might be worth fleshing out in a bit more detail.

    • Author: Marius

      Date: July 30, 2012 at 3:02 pm

      I think the the redirect should be done the other way around, from the main domain to the sub domain, am I right ?

  7. Author: lettersets

    Date: May 19, 2012 at 8:44 pm

    “It would be a nice addition to this great post if, for chapter 5, you would give us the .htaccess rules to include in the Tools/Generators/ Htaccess generator section of the BO.”

    I was wondering indeed if you have to point towards the new css and jc subdomains somewhere or if it automatically finds them when you’ve created them.

  8. Author: adamus007p

    Date: June 4, 2012 at 6:09 pm

    5. Create sub-domains for Javascript files and CSS files

    Create a sub-domain js1.mystore.com and ask your hosting provider to direct it to /js/
    Create a sub-domain js2.mystore.com and ask your hosting provider to direct it to /theme/mytheme/js/
    Create a sub-domain css1.mystore.com and ask your hosting provider to direct it to /css/
    Create a sub-domain css2.mystore.com and ask your hosting provider to direct it to /theme/mytheme/css/

    These 4 sub-domains will allow your visitors to load more files at the same time. Basically, a web-browser is limited to 8 parallel downloads. Each sub-domain is adding 8 new parallel downloads, so the total would be 40 (Main domain + 4 sub-domains).

    but there is only 3 lines to write media servers.

  9. This is an amazing piece of information Bruno. It means time to expend in our shops but totally worth it in the long run, cheers

  10. thanks for good info !!!
    dose some one have details for older prestashops Version 1.3.1.1 to increase
    the speeeed !!

  11. Author: cogeanumarius

    Date: July 29, 2012 at 8:52 am

    Salve to all, great article, I have done most of the recommended tips, except those involving huge fee per month :D .
    I am not sure how may I find a tool like phpinfo.php but for apache settings, I am not sure if on my shared environment mod_deflate and mod_expire are ON, using Google’s Page Speed, I get these 2 errors: Leverage browser caching and enable compression.
    PS: I have already made the settings that were suggested above :D
    Huge thanks for your support.

  12. I have problem with ssl page on chapter 5.
    any suggestion?

  13. Author: giftsforyounme

    Date: September 9, 2012 at 5:32 pm

    1 error
    An error occurred while creating object. product

    I am unable tom import new products to my website, what can cause this?

  14. Author: prestadget

    Date: September 23, 2012 at 5:49 pm

    With more than 100 Mysql queries per page, it’s strange to see “speed” and “prestashop” in the same sentence ^^

  15. Author: avaldivielso

    Date: March 6, 2013 at 9:18 am

    Fantastic article!!, one of the best about prestashop performance. Thanks a lot

  16. Author: dxotic

    Date: March 11, 2013 at 3:06 pm

    Thank you for the article Bruno. Any chance of an updated one for 1.5.3+

    has anything else changed?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>