Finally. The solution is here: the Critical Path CSS manager.
Above the fold CSS optimization so far has been tedious and required a lot of work.
Critical Path CSS manager will take this work out of your hands.
It places the above-the-fold CSS in the header and moves the standard CSS to the footer.
Optionally you can replace the standard CSS with CSS which had been cleaned from unused style rules.
Obtain your copy from the Prestashop Addon store and install the module as usual. Then access the configuration screen.
Here you will see 3 buttons:
As a default the button settings are set to “No”, which means that the module has been deactivated.
Critical Path management can be activated separately for the Home page, the product pages and the category pages.
If a button is set to “Yes”, the input box for the critical rending path CSS will appear. Activated for all three page types it will look like this:
In this picture you see the above-the-fold CSS already inserted.
The CSS is the same on all pages for each pages page type. So all category pages will get the critical path CSS you insert here.
This is considered to be a no risk or low risk method. However, you might want to get your critical path CSS for the page with the most page elements to be most effective.
Whichever (online) system you use, make sure, that once Critical Path CSS Manager is activated, the url you submit has the querystring nm_vars=2 in it.
Example for a productpage: https://www.example.com/3-myproduct.html?nm_vars=2
If you prefer to get the critical path CSS online, then you can get it on this site: https://www.nivo-media.nl/css-tools/
If you have any questions or remarks, then you are welcome to put your remarks in the comments. The preferred method however is to submit (completely privately) your question here>>
http://prestashop.nivo-media.nl/ is the official demo site. Please do look at the HTML source.
(Please note: Tests were performed on the demo site and without minified HTML, so you can review the HTML source easier).
* The results of Google’s PageSpeed insights for the home page can be viewed here>>
* The difference in score can be viewed here>>
Conclusion for the home page:
For desktop a difference of 85 versus 100 with module.
For mobile a diffence of 95 versus 100 with module.
Try it yourself for http://prestashop.nivo-media.nl/?nm_vars=2 (without module) and http://prestashop.nivo-media.nl/ (with module)
*Note: I cheated here a little bit. I put the external Google fonts sheet in the footer manually, which results in a much higher score.
I highly recommend locally hosted Google fonts which will render your pages much faster. For that you can visit this site>>
Also note, that the “Remove render blocking CSS” message has disappeared.
Finally I have replaced the standard slider and banner images with optimized ones. The diffence can be seen when testing the category and product pages.