CODEWITHSUNDEEP
javascriptcssopencartrenderpagespeed
tomastsc
tomastsc

Reputation: 47

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

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

Upvotes: 1

Views: 4258

Answers (2)

pixeline
pixeline

Reputation: 17974

well, you should first put all javascript at the end of the html file, just before the closing BODY tag. Failing to do so means that the browser will wait for the files to be downloaded before proceeding with rendering the screen, thus provoking a longer waiting time for the user. Then, you should combine them all to have just one file, thus only one http request. Then, you could minify them to save extra kilobytes.

Upvotes: 1

Tomer
Tomer

Reputation: 17930

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.

Upvotes: 4

Related Questions