User Guide of Prestashop Speed Optimization

Optimization of the website is very much essential nowadays. Many of the customers bounce back due to the poor performance & slow speed of the website.

Hence, the concept of optimization of the web pages becomes very important. Now, provide better experience to your users by optimizing your store with Prestashop Speed optimization module.

The purpose of the optimization of a web page is very simple. You need to make it faster and responsive on all kinds of platforms. And, this can be easily achieved with the help of this module.

• Enable or disable lazy loading of the product images on product listing & product details page.
• Choose to upload custom GIF file for the lazyload image.
• Enable image responsiveness of product images on the product listing & product details page either with the help of DPR(Device Pixel Ratio) or picture tag.
• Make the slider images responsive with the help of DPR(Device Pixel Ratio) or picture tag.
• Use webP* images to display better quality images with lesser size which in turn will reduce the loading time of the webpage.
• Improves the performance and speed of the website.
• Enable or disable the default settings of Prestashop smart cache for CSS & Javascript.
• Enable customization of browser cache to save files locally in the browser for the desired time span.
• Module translation is available in following languages: French (fr), Arabic(ar), Spanish(es), German(de), Italian(It), Russian(ru), Japanese(ja), Dutch(nl), Bulgarian (bg), Portuguese (pt).
• Prestashop Speed Optimization module is MultiShop compatible.

*(In order to use the functionality, please install our Prestashop Google WebP Image Converter module.)

• Go to Module Manager in Back office and click on ‘upload a module’.
• Now, Drag and drop the module file or select the file from the system.
• In this way, the module installation will be successful.

A new tab ‘speed optimization’ is added under ‘Advanced Parameters’ tab after the successful installation of the module.

There are various options in the configuration setting of the module. Let’s understand each one of them one by one.

Image optimization

• Allow lazy loading on the product images: This option enables loading of the product image of the web page as and when the user scrolls down the page.
  View lazy load custom loader while the image of the product is loading. Lazy loading of the product image is only available on product listing & product details page.

• Allow srcset attribute on product & slider images: Enable the srcset attribute on product and slider images to make the images responsive. This option lets you display images of different sizes adjustable to different devices.
  You can choose to display the product or slider images using DPR or by picture tag.
  It only runs on the product image or slider image.

Note: To use “srcset” attribute on slider images, you must install & enable the Prestashop image slider module.

The option allows you to optimize images for various devices like mobile, tablet, desktop etc. You can choose to optimize the image in the following two ways:

• Using DPR(Device Pixel Ratio)

• Using Picture Tag

• Allow webP images: This option allows you to show webP images on the store. To show webP images, you need to install our Prestashop Google WebP Image Converter module.

This setting enables the default settings of Prestashop smart cache for CSS & Javascript available in the performance tab.

• Smart cache for CSS: Using this option, you can create a single file by combining all the CSS file.
• Smart cache for javascript: This option creates a single file for all the JS file.

• Apache optimization: It enables the default feature of Prestashop apache optimization available under CCC(Combine, Compress and Cache) in the performance tab. It adds directives to your (.htaccess) file which in turn improves the caching of the web pages.
  This option improves the caching of your website by using leverage browser caching.

With the help of leverage browser caching, you can define a time span for different kinds of files. It allows you to save files up to the desired time span on the browser.

• Customize browser cache: Enable or disable this option to save files locally in your browser. You can choose to save these files with default Prestashop setting or customized setting.

You can set a timeline for various types of files until which they will be saved. The names of files for which you can set the timeline is:

• Images
• CSS
• JS
• Font
• Icon

In case if you don’t enable this option, then the default setting of the PrestaShop will run.

You can view the timeline up to which various kinds of data will remain saved in your Prestashop in the image below.

You can customize browser cache to set the timeline for saving various kinds of files.

The following image shows the change in the timeline in the .htaccess files after saving the details in the configuration setting.

Note: Expire and Headers module must be enabled on the server.

The following two images contain the performance of website before & after using the module.

The improvement in the performance of the site can be clearly observed from the following two images.

This was all about the working of Prestashop speed optimization module.

Note: The module file is not available for Prestashop version 1.6.x.x.

For any kind of technical assistance, just raise a ticket at http://webkul.uvdesk.com and for any doubt contact us at support@webkul.com