10 Best Tips to speed up your PrestaShop store

By - May 9, 2012

ShareTweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn14

See the 21 Comments

An updated version of this blog for PrestaShop 1.6 is available. Click here for updated settings 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

Receive articles like this in your inbox!

Subscribe to get the latest ecommerce news and tips sent directly to your email. Subscribe

ShareTweet about this on Twitter0Share on Facebook0Share on Google+0Share on LinkedIn14

See the 21 Comments

Comments (21)

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>