performance issue – Remove render-blocking JavaScript – Optimize CSS

ThemeBurn SupportForumsOpenCart ThemesShoppica 2 OpenCart Themeperformance issue – Remove render-blocking JavaScript – Optimize CSS

This topic has been marked as not a support question.


We have a performance issue.

Google pagespeed adress these below as urgent to fix

Most of them seem to be connected to Shoppica?

Remove render-blocking JavaScript:

Optimize CSS Delivery of the following:,latin-ext,cyrillic-ext,greek,greek-ext,latin,latin-ext,vietnamese,cyrillic-ext,greek,greek-ext,latin,latin-ext,vietnamese

September 12, 2013 at 9:21 pm #27494


You can move some of these file in the footer if you want.

All these resources are located here:


and you can move them here:


The cannot be removed from the header as it requires rewriting of the most scripts. This is valid for the default theme also, as it is not theme specific.

ThemeBurn team

September 23, 2013 at 9:41 am #27657

I tried this fix and cant get it to work at all?

If I move any of the ‘render blocking script’ to the footer bad things happen….

So far I have tried moving the following from tb/header.php to common/footer.php ( i am unsure how to paste code so I am summarising)

theme stylesheet
google fonts

moving the jquery causes the slider to stop,
moving the theme stylesheet/schemer causes the menu rollovers to stop
Moving google fonts doesnt seem to break anything but without moving the schemer doesn’t make any difference.

January 3, 2014 at 1:14 am #29734

With a bit of fiddling around the best result were obtained by leaving and theme & screen css in the header and moving google fonts to the footer, along with an external custom css I use.

The render blocking of the jquery was solved by using the tag instead of the standard tag.

Google page speed is now only flagging up 1 render bloking script which is related to the screen.css, but as my page speed is now 94/100 desktop and 87/100 for mobile devices, I dont think that is critical.

However, without making those changes 9 render blocking scripts were being flagged (each google font being counted as a separte blocking script)…and this was enough to drop my pagespeed score for mobile devices into the amber alert range.

I am just adding this info in case it helps anyone else.

January 3, 2014 at 9:44 pm #29760


Thanks for the information! We’ll have in mind for future releases.

ThemeBurn team

January 13, 2014 at 2:41 pm #29912

@hotscotchbonnet, Hi, i need a solution
moving the JavaScript, I have problems in home and in cart.

thanks a lot

February 17, 2014 at 12:06 am #30584

Hi there,

It depends which Javascript you mean….I am assuming you are talking about the render blocking scripts that google pagespeed complains about?

In my case it was the links to googles jquery library in template\tb\header.tpl that were causing the complaints.

I was not able to move these scripts to the footer without causing errors, but I did find that google page speed stopped complaining if these scripts were loaded asynchronously…the way to do that is add ‘asynch’ after the script tag like this:

<script async type="text/javascript" src="httpisHTTPS) echo ‘s’?>://”>
<script async type="text/javascript" src="httpisHTTPS) echo ‘s’?>://”>

Google seemed happy after that.

Hope that helps!

February 17, 2014 at 12:18 am #30585

i have try it but i have problem with menu in home, with product reviews and problem in the cart.

February 17, 2014 at 9:28 am #30602

@hotscotchbonnet – using script async for jquery.min.js and jquery-ui.min.js could cause you problems because they need to be downloaded and executed in order. If the browser downloads and executes jquery-ui.min.js first, you’ll get an error. And there is no way to predict which one will be first if you use “async” attribute.

If you put the fonts in end of the page, there would be no issues except for an eventual page flickering on the first load. This is rather a visual issue, not a functional one.

We could easily tweak the Shoppica code to work when all of the javascript files are put in the end of the page and there will be no pagespeed complaints. Sadly this would break compatibility with many plugins and extensions so we can’t just do it.

ThemeBurn team

February 20, 2014 at 11:21 am #30683

Thanks for explaining that. I had not encountered any errors and did not understand the dependency risk.

On the basis of what i read over at stack overflow
I have decided to self-host a combined, minified jquery & jquery ui file . I replaced the two seperate links to jquery and jqueryui in tb/header.tpl with a single link to my combined file (in which jquery ui comes after jquery). As I am now only calling a single file async is fine.

Whilst not using google hosted library has caching downsides, the difference is enough to increase my desktop google page speed by 5% and make my mobile page speed go from a red alert to green (which was my biggest worry).

February 20, 2014 at 9:07 pm #30696

In which part of the footer exactly I should move these two lines

I moved them right before but the website didn’t load the slider and the brands icons instead of being in a horizontal line they were displayed in a vertical line.

I did async, it works, but when you hit the back button it will break and you will see the same problem described above.

Also, I still dont know how to solve these

Remove render-blocking JavaScript:…y/nivo-slider/jquery.nivo.slider.pack.js…avascript/jquery/jquery.jcarousel.min.js
Optimize CSS Delivery of the following:…button_style=default&font_button_size=16…theme/shoppica2/stylesheet/slideshow.css…/theme/shoppica2/stylesheet/carousel.css

Please help.

September 19, 2014 at 8:48 am #33195

I forgot to tick the notification.

September 19, 2014 at 10:20 am #33198

You shoudn’t move outside the header. You also shoudn’t use async attribute on it.

ThemeBurn team

September 25, 2014 at 3:59 pm #33246

So, if
“You shoudn’t move outside the header. You also shoudn’t use async attribute on it.”

* Remove render-blocking JavaScript:
* Optimize CSS Delivery of the following:


Thank you!

June 15, 2015 at 1:02 am #41481


Removing the jquery library out of the header (or make it load asynchronously) will require a lot of modification to all templates and is not an easy fix.

ThemeBurn team

June 23, 2015 at 11:55 am #41608
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.