...
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.
| Code Block |
|---|
<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:
...
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:
...
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.
...
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.
...
Lastly, go to Tools > Generators and regenerate your .htaccess file so that all the new product links work.