Topic: 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 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js http://www.mychifi.se/catalog/view/javascript/jquery.cluetip.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 http://fonts.googleapis.com/css?family=Oswald:regular&subset=latin,latin-ext http://fonts.googleapis.com/css?family=Open%20Sans%20Condensed:300&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin,latin-ext,vietnamese http://fonts.googleapis.com/css?family=Open%20Sans:300&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin,latin-ext,vietnamese http://www.mychifi.se/catalog/view/theme/shoppica2/stylesheet/facebooklogin.css http://www.mychifi.se/catalog/view/theme/shoppica2/stylesheet/blog_module.css http://www.mychifi.se/catalog/view/javascript/jquery.cluetip.css	kalenen
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: `catalog/view/theme/shoppica2/template/common/header.tpl catalog/view/theme/shoppica2/template/tb/header.tpl` and you can move them here: `catalog/view/theme/shoppica2/template/common/footer.tpl` The `http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js` 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. Best, ThemeBurn team	TB Support
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 schemer.css google fonts jquery.min.js jquery-ui.min.js 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.	hotscotchbonnet
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.	hotscotchbonnet
January 3, 2014 at 9:44 pm #29760
@hotscotchbonnet Thanks for the information! We’ll have in mind for future releases. BR, ThemeBurn team	TB Support
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	clipperstore
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”> <script async type="text/javascript" src="httpisHTTPS) echo ‘s’?>://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js”> Google seemed happy after that. Hope that helps!	hotscotchbonnet
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.	clipperstore
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. Regards, ThemeBurn team	TB Support
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 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).	hotscotchbonnet
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 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.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: http://www.taiwannutrition.com/…y/nivo-slider/jquery.nivo.slider.pack.js http://www.taiwannutrition.com/…avascript/jquery/jquery.jcarousel.min.js Optimize CSS Delivery of the following: http://www.taiwannutrition.com/…button_style=default&font_button_size=16 http://www.taiwannutrition.com/…theme/shoppica2/stylesheet/slideshow.css http://www.taiwannutrition.com/…/theme/shoppica2/stylesheet/carousel.css Please help. thanks	kaliyas
September 19, 2014 at 8:48 am #33195
I forgot to tick the notification.	kaliyas
September 19, 2014 at 10:20 am #33198
You shoudn’t move `http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js` outside the header. You also shoudn’t use `async` attribute on it. Regards, ThemeBurn team	TB Support
September 25, 2014 at 3:59 pm #33246
So, if “You shoudn’t move http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js outside the header. You also shoudn’t use async attribute on it.” HOW THE CORRECT WAY TO FIX * Remove render-blocking JavaScript: * Optimize CSS Delivery of the following: IN GOOGLE PAGE SPEED SERVICE? Thank you!	realarchitect
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, ThemeBurn team	TB Support
June 23, 2015 at 11:55 am #41608