Message-ID: <1496377293.379178.1711697388732.JavaMail.root@confluence-doc2-production> Subject: Exported From Confluence MIME-Version: 1.0 Content-Type: multipart/related; boundary="----=_Part_379177_245565099.1711697388726" ------=_Part_379177_245565099.1711697388726 Content-Type: text/html; charset=UTF-8 Content-Transfer-Encoding: quoted-printable Content-Location: file:///C:/exported.html PrestaShop 1.4.3 Performance Guide

PrestaShop 1.4.3 Performance Guide

Table of contents

=20 =20

= PrestaShop 1.4.3 Performance Guide

There are many things you can do to improve the performance of your Pres= taShop website.  Yahoo and Google have both created general website pe= rformance guidelines here and here.  There are also tools available t= hat rate the performance of your website including Yahoo YSlow!= and Google Page Speed.&nbs= p; PrestaShop automatically handles most of these performance guidelines fo= r you.  This performance guide describes how to implement the guidelin= es 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 t= he root directory of your server and give it chmod 666 permiss= ions, then go to the Tools > Generators tab in the Back Office.  In= PrestaShop v1.4 and above, tick the =E2=80=9COptimization=E2=80=9D checkbo= x, then click the =E2=80=9CGenerate .htaccess file=E2=80=9D button to creat= e 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.

=20
<IfMo=
dule 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>
=20

The code in the first if statement above enables browser ca= ching 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=E2=80= =99s browser cache instead of re-downloaded, which will reduce the load tim= e.

The FileETag line above enables ETags on your server. = ETags are used instead of the last modified date to determine whether cont= ent has changed before it has expired.  It the content has changed, th= en it is re-downloaded instead of waiting for it to expire.   Not= e that Yahoo recommends disabling ETags to improve performance.  To di= sable ETags, change the line to:

=20
FileETag=
 none
=20

Note though that if you disable ETags and then change an image, CSS, Jav= aScript or icon, it will not be re-downloaded until it has expired or the c= ustomer clicks the Refresh button in their browser.  That means that i= t 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 HT= ML, CSS and JavaScript.  GZIP compression generally reduces the size o= f text files by about 70%, which greatly reduces the time it takes to downl= oad the files and saves bandwidth.  Note that some servers do not supp= ort 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 anoth= er host that does support GZIP compression.

Combine, Compress and Cache CSS and JavaScript

Combining and compressing files reduces the number and size of HTTP requ= ests, which speeds up your website. PrestaShop takes the hard work out of c= ombining, compressing and caching CSS and JavaScript by doing it all for yo= u.  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.&n= bsp; There is an option to compress inline JavaScript in HTML too. &nb= sp; PrestaShop uses Douglas Crockford=E2=80=99s JSMin Javasc= ript minified ported to PHP by Ryan Grove for its compression and Smart= y to cache the combined, compressed file.  Go to the Preferences > = Performance tab to enable these options.

Choose the =E2=80=9CUse CCC for CSS=E2=80=9D option and =E2=80=9CUse CCC= for Javascript=E2=80=9D options to compress CSS and Javascript.  Choo= se =E2=80=9CCompress inline Javascript in HTML after =E2=80=98smarty compil= e=E2=80=99 execution=E2=80=9D to compress inline Javascript and =E2=80=9CMi= nify HTML after =E2=80=98smarty compile=E2=80=99 execution to compress HTML= .  There is also a =E2=80=9CHigh risk HTML compression=E2=80=9D option= , but it will cause your website to become non-standards compliant and it m= ay cause problems with UTF-8 characters, so it is better not to enable that= option.

Note that PrestaShop=E2=80=99s Combine, Compress and Cache feature will = only work with themes based on the default PrestaShop v1.4 theme or later.&= nbsp; If you are using a theme designed for an earlier PrestaShop version, = enabling the feature will cause problems.  Also, third-party modules m= ay 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:

=20
Tools::a=
ddCSS(_PS_MODULE_DIR_.$this->name.'/css/'.$this->name.'.css');
= =20

and the following to include its JS file:

=20
Tools::a=
ddJS(_PS_MODULE_DIR_.$this->name.'/js/'.$this->name.'.js');
=20

The third-party module=E2=80=99s CSS and JavaScript will then be combine= d and compressed along with PrestaShop=E2=80=99s modules.

Enable Smarty Template and File Caching

An easy way to improve the speed of your PrestaShop website is to disabl= e Smarty compiling and enable caching.  By default, Smarty recompiles = template files every time they are requested, which is great when you are d= ebugging 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 =E2=80=9CForce compile=E2=80= =9D to =E2=80=9CNo=E2=80=9D and also make sure =E2=80=9CCache=E2=80=9D is s= et to =E2=80=9CYes=E2=80=9D.  Smarty templates should then load instan= tly on your website since they have already been compiled and cached.

PrestaShop also has the option to cache files on another server.  C= hoose =E2=80=9CMemcache=E2=80=9D as the =E2=80=9CCaching system=E2=80=9D 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 wa= rning message until you do.  Click on the =E2=80=9CAdd server=E2=80=9D= link to add a new server and assign it a weight.

Alternatively, you can choose =E2=80=9CFile System=E2=80=9D as the =E2= =80=9CCaching system=E2=80=9D.  That will store a cache on your websit= e.  You can also specify the directory depth of the cache.

O= ptimise 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 s= hould 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 compres= sion in a smaller size.  Images with many more than 256 colours should= be saved in JPEG format.  JPEG uses lossy compression rather than los= sless compression like PNG, so keep a copy of the original image in PNG-24 = format before compressing it.  When compressing images as JPEGs, try t= o reduce the quality percentage as much as possible, but not so much that t= he compression is noticeable.

Try to keep the size of each image under 25 KB, since that is the maximu= m 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.  Up= load the icon on the Preferences > Appearance tab.

Images referenced in CSS files can be combined into CSS sprites to reduc= e 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 mu= ch 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 allow= s you to distribute your static content including images, stylesheets and s= cripts among up to 3 domains.  To do this, go to the Tools > Perfor= mance tab and enter the domain or subdomain names of the servers. &nbs= p; 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 b= e http://www.domain.com so that the cookie does not apply to the subdom= ain.  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 c= ookieless domain.

Reduce Cookie S= ize

Cookies are used for a variety of reasons such as authentication and per= sonalisation.  It's important to keep the size of cookies as low as po= ssible to minimize the impact on the customer=E2=80=99s response time. = ; Unfortunately, PrestaShop=E2=80=99s cookie can become quite big and there= isn=E2=80=99t 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 =E2=80=9CCiphering = Algorithm=E2=80=9D to =E2=80=9CUse Rijndael with mcrypt lib.=E2=80=9D

Use a= Content Delivery Network

A customer=E2=80=99s location can have an impact on response times. = ; A content delivery network (CDN) is a collection of web servers distribut= ed across multiple locations to deliver content more efficiently to users.&= nbsp; When a customer=E2=80=99s browser requests a file, their browser will= download it from the closest available server, which will be much faster t= han if it was downloaded only from the country where your website is hosted= .  It also saves bandwidth on your website, since the file is download= ed from the CDN instead of your website.  Customers will also save ban= dwidth if the file is a common library like jQuery that has already been do= wnloaded for another website, since the file will be read from the browser= =E2=80=99s cache instead of re-downloaded.

Google has a CDN available with many common libraries.  For example= , the URL for jQuery v1.4.4 is h= ttps://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 i= mage 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 st= ored as /img/p/1-2.jpg. PrestaShop also generates thumbnail im= ages as specified on the Preferences > Images tab. Each image size that = has "Products" ticked will cause a thumbnail image to be created. For examp= le, in a default PrestaShop install, the second iPod Nano image will also h= ave 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 th= at are stored for each product image by default.

This system works well when there aren't many product images, but when t= here 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 prod= uct images may stop working after reaching the limit. Also, some FTP client= s have a maximum number of files per subdirectory, which will cause all pro= duct images created after the limit was exceeded to become inaccessible.

PrestaShop v1.4.3 gets around these issues by using a new image system t= hat divides product images into subdirectories using the image ID. For exam= ple, 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/1= 5-home.jpg, /img/p/1/5/15-large.jpg, /img/p/1/5/1= 5-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 subdi= rectory, which won't ever exceed any maximum file-per-subdirectory limits. = Having only 6 images per subdirectory instead of thousands of images in a s= ingle 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 y= ou have, it may take a while to move them all into subdirectories.

Once it's finished, go to the Preferences > Products tab and change t= he "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<= /code> file so that all the new product links work.

------=_Part_379177_245565099.1711697388726--