Community Forums

'async' in .js speeds up site but breaks slider and carousel

General support for technical problems with OpenCart v1.x

'async' in .js speeds up site but breaks slider and carousel

Postby DrM » Sun Nov 17, 2013 3:07 pm

Hi all,

Using Opencart 1.5.5.1 with upgraded store.

I found a blog that Qphoria had contributed some advice too about speeding up your opencart site:
http://cartadvisor.com/blog/2013/11/05/speed-opencart-store

Speed Tip 5 is to add the 'async' after <script in the .js lines in the header.tpl file.

When I do this my site speeds up really well, performs great in all the page speed checkers etc...

However, my carousel appears to break, with the images becoming a single list of images going down the page, rather than being in the normal scrolling across format. Also, my slideshow just shows the loading symbol and doesn't bring any images up.

These are the 3 lines I edited in header.tpl:

Line 23: <script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
Line 24: <script asyn type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
Line 26: <script async type="text/javascript" src="catalog/view/javascript/common.js"></script>

As you can see, two of the 'async' ones don't appear to break anything. But when I add async into the script on line 23 the carousel and slideshow stop working properly.

Any advice would be very appreciated! Thanks.
User avatar
DrM
 
Posts: 11
Joined: Fri Mar 22, 2013 10:57 am

Re: 'async' in .js speeds up site but breaks slider and caro

Postby MarketInSG » Mon Nov 18, 2013 10:38 am

most likely the javascript file wasn't loaded but the script is already being called for. That's why it won't load properly.
User avatar
MarketInSG
 
Posts: 5360
Joined: Tue Nov 15, 2011 10:53 pm
Location: Singapore

Re: 'async' in .js speeds up site but breaks slider and caro

Postby DrM » Mon Nov 18, 2013 11:41 am

Thanks for the reply. Do you have any suggestions on how to fix this?

Google page speed insights tells me that this is holding me back. When I add the async I get 95/100 on the desktop page speed, so would obviously like to resolve this issue.

It advises me to: 'Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML'
User avatar
DrM
 
Posts: 11
Joined: Fri Mar 22, 2013 10:57 am

Re: 'async' in .js speeds up site but breaks slider and caro

Postby MarketInSG » Mon Nov 18, 2013 7:02 pm

Probably not async the jquery file and the slider file. The rest you can try to async them and see what happens?
User avatar
MarketInSG
 
Posts: 5360
Joined: Tue Nov 15, 2011 10:53 pm
Location: Singapore

Re: 'async' in .js speeds up site but breaks slider and caro

Postby welle93 » Tue Dec 03, 2013 4:08 am

Have you found a solution for this problem yet ?

i have Google page speed insights telling me that both jquery-1.7.1.min.js and jquery-ui-1.8.16.custom.min.js is blocking...
welle93
 
Posts: 20
Joined: Mon Dec 02, 2013 4:54 am

Re: 'async' in .js speeds up site but breaks slider and caro

Postby DrM » Wed Dec 04, 2013 3:02 am

Hi welle93. I haven't resolved this particular one, but I have got my page speed consistently up to 96/100 on the Google page speed insights. I have added async to these three lines in the header:

<script async type="text/javascript" src="catalog/view/javascript/jquery/ui/jquery-ui-1.8.16.custom.min.js"
<script async type="text/javascript" src="catalog/view/javascript/common.js"
<script async type="text/javascript" src="<?php echo $script; ?>"

This seems to work for me. But check your website in IE too.
User avatar
DrM
 
Posts: 11
Joined: Fri Mar 22, 2013 10:57 am

Re: 'async' in .js speeds up site but breaks slider and caro

Postby IP_CAM » Tue May 20, 2014 12:20 pm

Oops, I wondered today, when opening my Shop Site, using my Seamonky Browser, after adding that piece of 'async' gizmo generously into all of my template header.tpl javascript lines last night. Category Sections where all screwed up, dis-aligned content, and in the product Page, my Multi-tab-section was split up into 4 individual vertically aligned single parts, displaying parts of borders around them. The Image-Changer did not work anymore, a click on a thumb produced a large View. I was pissed...

Because of possibly beeing unaware what I'm doing, sometimes, at night, I started to look for eventually modified pages, css-files, I checked Page Source, until I realized, that the only 'fundamental' change was to add 'async' to all <script...> lines in the template/common/header.tpl .

Interesting was, that my good old IE8 did not bother, it displayed, more or less, everything as usual, the Firebird Browser displayed also, more or less, at least every second reload, my product description tabs, as requested, but my rather heavy secured, 'choosy', Seamonkey got all screwed up by the sudden 'async' Situation.

This is why I like the Semonkey so much, it's NOSCRIPT Option (Firebird has it as well) allowed me to individually enable/disable scripted Linksites, when disabling some of them, suddenly, my Seamonkey reacted in a way, that showed my, where the problem must come from.

'async' or not 'async', this is the Question, when deciding to either please Google Sitecheck, or then, please the Visitors. I decided to please my Visitors, by banning 'async' from my script lines. Whenever I have my OC completed, I may find some spare time to bother about 'async' again, for the time beeing, I have more urgent matters to solve.

I just wanted to tell you guys about this, do NO JUST FILL all your script lines with 'async', it could 'keep' a lot of things on your site from doing their job, important to make the thing work from the first Visitor-Click on!

Ernie
If you don't know where you're going, any road will take you there...
User avatar
IP_CAM
 
Posts: 709
Joined: Mon Mar 03, 2014 12:37 pm
Location: Switzerland

Re: 'async' in .js speeds up site but breaks slider and caro

Postby OSWorX » Tue May 20, 2014 3:48 pm

Only a few scripts can be running with 'async'.
Basically all those which are not needed when a program is loaded.
Slideshows and such have to be loaded at the beginning.
EU-Cookie-Solution OpenCart Rechtskonform - Buttonlösung
LiveSupport (Chat) Deutsches OpenCart / OCIE Forum
http://osworx.net :: Installation & Update Services for OpenCart, Custom Development
Individual modules - Payment modules - Shipping modules
Dt. Sprachpaket 1.5.x - Dt. Sprachpaket 2.x- Sofortüberweisung
User avatar
OSWorX
Global Moderator
 
Posts: 2973
Joined: Mon Jan 11, 2010 9:52 am
Location: Austria

Re: 'async' in .js speeds up site but breaks slider and caro

Postby joemaydew » Thu May 22, 2014 9:59 am

I have the exact same problem as described in the original post. Can anyone shed any light on this?
User avatar
joemaydew
 
Posts: 58
Joined: Wed May 07, 2014 3:58 am
Location: Staffordshire, United Kingdom

Re: 'async' in .js speeds up site but breaks slider and caro

Postby IP_CAM » Thu May 22, 2014 12:26 pm

What kind of light do you need? It has all been descibed in detail in many places and many forms.

Let me just act like Garner Ted Armstrong, telling you 'MY plain Truth'.
(A very 'impressive' Man, decades ago, on the radio, when I was living in Canada 69/71)

The Main Problem of 'slow loading' in certain OC Sites is not if one uses 'sync' or 'async' Javascripts, sure, they may have a certain ( but rather small) effect on page loading speed. The Main Problem is the 'huge amount of VQMod Options in many Scripts, combined with ACTIVE GIZMO Mod's like Facebook/Twitter/Google+/etc./etc. wich as well delays page load, sometimes, they even prevent a page from 'beeing' loaded to finish. As higher up placed, as worse they act...

Nobody would ever mention this 'async' thing, if the Google Pagetester would not exist. Honestly, I never had any need for this either, before coming here and reading about it, since working with this >Egg-laying wool milk Pork< type PHP Software called OC, 'cause I wanna make it fast as well...

The VQMOD IDEA is basically a giant step from how I was used to deal with, I would have liked something similar very much, screwing around with Perl-based Scripts for 15+ Years. For Testing-Purposes, it's unmatched, for Sellers, it's the best/easiest way to satisfy their Customers, because they don't have to know anything, exept for how to upload the .xml file to the server, and it works. At least, most of the time, somehow, in part, or else...

But the fact is, on a Server, AFTER everything else has been BUILT into a 'final' Template-WebPage-File, it's time to start the VQMOD-Routine. Since no 'prearranged' Indexing exists in any form, FROM ONE TO XX, all VQMOD's and EVERY of it's 'FILE ROUTINES' are needed to be compared/checked/placed, 'in Serie', not parallel, for possible DUTY, and EVERY VQMOD-COMMAND, one AFTER the other, will make the Server to create a new Template-File, based on the LAST active Template, before going to the next VQMOD, doing the same, again, again, and again, until it reaches the last One of the VQMOD's activated. After those 20, 30, 40, 50, 100 or more repeated 'Session-templates' Jobs created, the LAST one Template, containing the Result of this VQMOD-modified Product, is ready to be sent to the visitor.

As I mentioned here somwhere already, a highly enhanced 'Framework-styled' Software like OC would probably not have been of any use on a shared Server, about 10-12 Years ago. A single Pageload would have used up all of the memory available then, a 'View All' with 5'000 active Items would have brought down a Server on it's knees. Beeing aware of such, I strongly advise anyone to try to keep it's software as LEAN as possible, or then, move up to a dedicated Server, if one really plan's to offer a professional Shopping Place. It pay's out, when it comes to Business, everything else is Hobby-Type Webmaster Discussion.

It may look 'modern' to have all that surplus 'crap' installed everywhere, but just a minor quantity of Site-Owners seem to be aware about the consequences, when doing such. In addition to this, many try to install 'everything' imaginable, then, even after removing or disabling some of them, there may be still parts of 'routines', files, and whatever else, laying around all over the place, still, beeing frequently checked by some Routine-call's, not longer used as well, but still in a kind of 'standby' working stage.

Adding all this together, Scripts, VqMod's, >regular< Mod's, the only thing it now takes is a really cheap (or even free) shared Server, offered for a couple of bucks a month, where a Shop-Owner split's the IP, Network, Memory and Prozessor with a 4-figure amount of others, all trying do follow the same 'get rich quick' scheme, in one or the other way.

Then, some of them may find their way to here and ask, why is this thing so slow....

As I pointed out before, I do NOT complain, about NOTHING, I like VQMOD's very much, they make it very easy for me to find the RIGHT Places, if I want to replace/extend existing Source with other Functions. I understand and accept the Fact, that VQMOD-Sellers CANNOT give individual Source-Code-Support for 10-30 Bucks a Piece, it would be a waste of time, filled with frustrations, for all ...

I just want to point potential future PRO-Site Owners to the right direction, namely, to get their Software 'individualized' the >>> hardcoded way <<<, not just filled up with VQMOD's. Sooner or later, they will run into Problems, by doing such, anyway, and then, hardcoding still is the better way to keep a PRO OC System alive and well...

no offense...

Ernie
Last edited by IP_CAM on Thu May 22, 2014 1:35 pm, edited 9 times in total.
If you don't know where you're going, any road will take you there...
User avatar
IP_CAM
 
Posts: 709
Joined: Mon Mar 03, 2014 12:37 pm
Location: Switzerland

Re: 'async' in .js speeds up site but breaks slider and caro

Postby OSWorX » Thu May 22, 2014 1:20 pm

VQMod - and the xml-files - is not that bad overall.
Bad are some xml and how they are written or what they are doing!

Beside this modification system, there is another approach which seems to be more useful:
OpenCart Override Engine

Maybe you want to try it once Ernie and tell your experience with it here?
EU-Cookie-Solution OpenCart Rechtskonform - Buttonlösung
LiveSupport (Chat) Deutsches OpenCart / OCIE Forum
http://osworx.net :: Installation & Update Services for OpenCart, Custom Development
Individual modules - Payment modules - Shipping modules
Dt. Sprachpaket 1.5.x - Dt. Sprachpaket 2.x- Sofortüberweisung
User avatar
OSWorX
Global Moderator
 
Posts: 2973
Joined: Mon Jan 11, 2010 9:52 am
Location: Austria

Re: 'async' in .js speeds up site but breaks slider and caro

Postby IP_CAM » Thu May 22, 2014 1:24 pm

I planned to look into this, but for now, there are still 'basic' things waiting...

Ernie
If you don't know where you're going, any road will take you there...
User avatar
IP_CAM
 
Posts: 709
Joined: Mon Mar 03, 2014 12:37 pm
Location: Switzerland


Return to General Support

Who is online

Users browsing this forum: Bing [Bot], Fraz, uksitebuilder and 77 guests

Hosted by Arvixe Web Hosting