OpenCart PageSpeed - Eliminate render-blocking JavaScript and CSS in above-the-fold content

Question

I've improved many issues that Google pagespeed tool reported and now the main issue is the following: Eliminate render-blocking JavaScript and CSS in above-the-fold content opencart

I am using OpenCart and didn't understand exactly how to fix the problem, and how exactly prevent from things to cause problems/dissappear/etc, after making this change..

Do you have a suggestion of how you deal with it? A specific JS that solved it? A tutorial that will clear things up for me?

I've tried a few on Youtube and Google but didn't understand exactly how to approach it.

Currently this is the site's status and last report from Google:

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fswing-and-play.com%2F&tab=desktop

Answer 1

I'm not familiar with OpenCart, but basically what this warning means is that you have many js/css files loaded when the page loads.

this is blocking page rendering until all js/css files are loaded. In order to deal with it you need to do several things:

1. Concat js/css files into 1-2 files and minify them - that way you reduce the number of http requests and loading time of the page.
2. if possible, move js files to the bottom, right before the closing body tag.