PrestaShop front end optimized to speed your up your PrestasShop. In order to have a super fast page loading speed, you need to optimize both Server side and front end, in this article we will talk about some possible solutions to speed up front end, you will find easy & quick solutions and some advanced solutions.
What makes up Page loading time.
The page loading time is made up of two big parts:
- Server side loading time.
- Front end loading time.
The server-side performance is the same important as the front end performance, your page will be extremely fast when you optimize both of them.
For most PrestaShop site owners, we just need to do improvements which are easy and budget-friendly, absolutely no needs to a pursue 100 scores, that's for ultimate advanced users. For example:
- Doing all basic improvements requires $50 and 10 hours, the result is that the total page loading time get reduced for 2 seconds.
- Doing other high level improvements requires $500 and 50 hours, the result is that the total page loading time get reduced for another 1 second.
Then doing all basic improvements is enough for most PrestaShop site owners.
Major components affect total page loading time
- Server side loading time.
- Computer performance.
- Browser performance.
- The number of requests.
- The total size of images*
- The total size of Js/css files
- The total size of Font files
- Front end loading time.
- Server performance.
- Server configuration.
- Location of server.
- Code quality.
- The number of modules.
Reducible time and Irreducible time
Please refer to the description of Advanced page cache module for prestashop to know more about reducing Server side loading time. We will talk about Front end loading time here.
Quick fast solutions to speed up your site's front end (For all PrestaShop Users).
- Fix all hard 404 errors.
- Uninstall modules you don't need, especially those PrestaShop's stats modules.
- Remove tracking scripts.
- Use CDN
- Add at least one media server.
- Upload proper optimized images to your site.
- Lazy load images.
- Gzip ajax responses to speed up actions like add-to-cart, pagination, switching combinations, etc.
- Further optimize images.
Advanced solutions to speed your site's front end (For advanced PrestaShop users).
We will keep updating solutions to make this tutorial be a complete guide of how to optimized PrestaShop's front end.
Fix all hard 404 errors.
This is very important to fix all hard 404 errors, hard 404 error would slow your site down for a low and bad for SEO. To fix hard 404 errors are rather easy, so take actions to fix them all.
I did a test on my local with 126.96.36.199, configurations are "Never recompile template files" + "Smarty cache" + "PrestaShop's native module" + "CCC for js and css" + "No browser cache". I got enough data to show how bad 404 errors could be with just 3 tests (0 404 errors, 1 404 error and 3 404 errors), I run each test for 5 times, I got this.
How to find out 404 errors?
- Use tools like Chrome's developers tools.
- Use Google webmaster.
- If you are using a module to redirect 404 errors to a certain page, then you need to disable the module for a while to find out & fix all hard 404 errors. Like our PrestaShop removing IDs from URLs & SEO friendly url module, which has a feature to redirect 404 errors to a certain page, the feature is good for SEO, but we should fix all hard 404 errors before using the feature. What are hard 404 errors, for example a wrong image path can cause a hard 404 error, you should fix it. If a user try to view a page which doesn't exist on your site, that will cause a soft 404 error, you should use a module to redirect soft 404 errors to a page.
Add at least one media server.
This way can speed up your site and it costs nothing. Here is a guide of how to add a media server for PrestaShop 1.6 and PrestaShop 1.7. There are two major benefits of using media servers.
- Media servers are also known as cookie-free domains, which means when browser send a request to load a static content, if the request is send the same domain as your website, then cookies will be sent along, but if load the same static content from a media server, cookies won't be sent, so the total size of all requires will be reduced, the result is a shorter page loading time. Check these two images.
- Increase the number of parallax downloads, browsers have the maximum of requests per domain at a time, if you need to load 30 static content, then some of them have to queue to wait to be loaded. If you use several media servers, those 30 static contact can be started to load at one time, this can also save page loading time.
Disable presatshop's native modules you don't need, especially those PrestaShop's stats modules.
You can find a list of PrestaShop 1.7's native modules which we recommend you to disable. Disable these native PrestaShop 1.7's module.
For Transformer theme and Panda theme users, you can also disable those ones you do not need, here are a list of modules you can not disable.
- Theme editor
- Overriding default behaviors
- If you use blog, then "Blog module" and "Blog editor" are also can not be disabled.
Remove tracking scripts.
There are various tracking scripts to tracking things like page views, hot area, conversion rate, etc, remove them when you got enough data for data analytics.
Upload proper optimized images to your site.
This is the easiest way to speed up your site, it's also crucial to page loading speed, why? Because of the number of image requests takes a very large portion of the number of total requests, the size of images takes a very large portion of the total page load size. Here are data I got from some demos of Transformer theme and Panda theme to prove this point.
For eCommerce sites, we don't need to pursue a small number of image requests, we also don't need to pursue a small amount of total image size, we just need to find a balance between Good quality and Proper size.
- Save your images in the proper dimensions. Use photoshop to cope images to proper dimensions For example, the space for your logo is 200px in width, then upload a 200px in width logo, don't upload a 300px in width one.
- Use proper file formats. Use .jpg instead of .png if you don't need a transparent background, because in most cases, .jpg version is smaller that .png.
- Use photoshop's Save-for-web feature to option all images, including banner images, logo, product images, etc. If you upload an un-optimized image which is for example 2M, then the image will make most of your optimization work be lost in vain.
Photoshop's Save-for-web feature, it's very useful, it not only can make sure images can be displayed in proper colors, but also can reduce the size a lot, if you a 500kb image from your camera, the size will be reduced a lot about 200kb-400kb if you optimized it with photoshop's Save-for-web feature, quantity of the optimized image will be also quite high.
Sharp product images, for a eCommerce site, bad quantity images are not okay, what we need is good quantity with fast speed, check this tutorial to know How to have sharp and clear product images on prestashop if you are using Transformer theme or Panda theme.
Lazy load images.
Lazy-load-images feature is generally a built-in feature of themes, it's different for a module to perfectly add the feature because modules can't modify theme files, so choice a premium theme which has built-in lazy-load-images feature. Our Transformer theme and Panda theme have lazy-load-images feature built-in. Because of this is important, we also created a free module Free Prestashop lazy loading module for product images to speed your site which you can use to lazy load most images.
I did some tests on PrestaShop 1.7.2 + Panda theme + 16 images.
Gzip for ajax.
Very important configuration, check this post Why pagination is slow, switching combination is slow, all AJAX requests are slow on my PrestaShop site?.
Further optimize images.
Use our ImageMagick for PrestaShop with AJAX generator high quality images module to optimize product images, category images and brand images for PrestaShop.
For banner images, logo and other images you uploaded to your site, you can also use tools to further compress images to reduce their sizes by following these steps.
- Use GTmetrix to test your site, and then check the "Optimize images" section on the report you get. Images which need to be optimized are listed out there.
- Download them via FTP to your local.
- Optimize them use a tool.
- Upload optimized images back to your site via FTP to replace original ones.
Here are some recommended tools.
For more info about how to optimize images, please refer to this guide posted by Google Image Optimization.
Use Popular tools properly.
Speaking of speed up a website, we must talk about these four popular tools first, they are:
They are useful, I just want to say we should use them properly, no need to purse 100 scores, because in some case 100 is not the best, we use them to analyze, we should make the finally decision accordion to our needs, not accordion to the report. For example you need to display the same image twice, but in two different dimensions, 500x500 and 120x120, there are two ways 1) Load two files separately, small image will be sharp too, but it increases loading time and increase total download size. 2) Use css to resize 500x500 down to 120x120, small image will be not that sharp, it reduces loading time and total download size. If you choose #2, some of those tools may give a low score, but in real world, I think #2 also make a lot sense.
Will retina feature slow my site down?
Two common ways to add retina feature to PrestaShop, they won't increase the loading time of documentation, but will increase total page loading time for a little bit, because 2x images are larger.
- Another way is to use the srcset attribute, this also won't increase the loading time of documentation.
It's worthy to use retina feature, because of images will be extremely sharp on mobile devices with retina feature.
PrestaShop 1.7's back office is terribly slow, how to fix?
- Uninstall & delete the "Merchant Expertise(gamification)" module.
- Edit the /classes/Tools.php file to replace1protected static $is_addons_up = true;
with1protected static $is_addons_up = false;