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
Table of contents
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.
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
<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:
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.
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:
Tools::a= ddCSS(_PS_MODULE_DIR_.$this->name.'/css/'.$this->name.'.css');= =20
and the following to include its JS file:
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.
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.
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.
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.
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
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.
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.