ThemeBurn Support › Forums › OpenCart Themes › Shoppica 2 OpenCart Theme › performance issue – Remove render-blocking JavaScript – Optimize CSS
This topic has been marked as not a support question.
Hi! 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: http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js Optimize CSS Delivery of the following: http://www.mychifi.se/catalog/view/theme/shoppica2/stylesheet/screen.css.php?v=2.1.2&is_mobile=1&is_touch=1&language=ltr&price_design=plain&border=8&font_body=Arial&font_navigation=Oswald&font_navigation_weight=normal&font_navigation_style=default&font_navigation_size=14&font_intro=Oswald&font_intro_weight=normal&font_intro_style=default&font_intro_size=30&font_title=Oswald&font_title_weight=normal&font_title_style=default&font_price=Open+Sans+Condensed&font_price_weight=300&font_price_style=default&font_button=Open+Sans&font_button_weight=300&font_button_style=default&font_button_size=12 |
|
September 12, 2013 at 9:21 pm #27494
|
|
Hi, 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 Best, |
|
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 moving the jquery causes the slider to stop, |
|
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
|
|
@hotscotchbonnet Thanks for the information! We’ll have in mind for future releases. BR, |
|
January 13, 2014 at 2:41 pm #29912
|
|
@hotscotchbonnet, Hi, i need a solution 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’?>://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”> 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 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. Regards, |
|
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 http://stackoverflow.com/questions/17933816/is-it-safe-to-use-async-with-external-js-files 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 http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 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: 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 Regards, |
|
September 25, 2014 at 3:59 pm #33246
|
|
So, if HOW THE CORRECT WAY TO FIX IN GOOGLE PAGE SPEED SERVICE? Thank you! |
|
June 15, 2015 at 1:02 am #41481
|
|
Hi, 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. BR, |
|
June 23, 2015 at 11:55 am #41608
|
- You must be logged in to reply to this topic.