Defer JavaScript loading to bottom.tpl

Anyone have any pointers on how to defer or what files can be deferred to the bottom.tpl file so the page will load faster for the user?



Right now my page load is taking 3.23s according to GTMetrix

6 Months later and still not even a reply. Is there an answer regarding this topic somewhere in the forum?



~B.

[quote name='BluBT' timestamp='1353350093' post='149517']

6 Months later and still not even a reply. Is there an answer regarding this topic somewhere in the forum?



~B.

[/quote]



Nope.

[quote name='JesseLeeStringer' timestamp='1353436488' post='149609']

Nope.

[/quote]



is it right to say that there is a better way to get good GTMetrix scores without having to move scripts to the bottom.tpl and that is why there is no answer?



~B.

up can change scripts from {script src=“YOURSCRIPT.JS”} to

Ahhhhaaaa. Thank you mg.

I'll give it a spin.



~B.

What's a problem to move scripts to the bottom? The only script you should keep in the head tag is jquery.js, because there are a lot of inline JavaScript snippets in the templates (bad style) which depend on the jQuery. The rest you can easily move to the bottom.

Thumbs up mghazal making that script change helped.

note - addons may also have script links that can be 'defered' as well.



~B.

When you say move to the bottom, how do we do this.



Thanks

John

You'll want to edit the index.tpl within your skins folder (/skins/yourskin/customer/index.tpl)



Move this line:


{include file="common_templates/scripts.tpl"}


To the bottom, below:


{hook name="index:footer"}{/hook}


It would be interesting to see someone using this on a live store as I have not tested this outside of a development store.

Yeah seems to have made a little difference.

before moving it on gtmetrix was



PAge Speed 93 A and Yslow 82



after



Page speed 93 A and Yslow 86



but definately feels snappier now too, which is what counts.



1 problem is… it has prevented my block, “best sellers” from showing properly but I can live with that for a while till I get it fixed



i think if I can get the other GTmetrix things sorted Im a happy chappy.



Thanks for the info, we will see if any problems crop up over the next 24 hours



John

ps after.JPG

never mind 24 hours, about 24 minutes made me realise;

1;product tab info was all dumped out on product details page even though tabs still showed

2; image previewer no longer worked properly



Shame as it really did seem to feel quick.



anybody know if it could be done any other way.



John

How do you Defer the Script?

[quote name='StellarBytes' timestamp='1364340512' post='158773']

You'll want to edit the index.tpl within your skins folder (/skins/yourskin/customer/index.tpl)



Move this line:


{include file="common_templates/scripts.tpl"}


To the bottom, below:


{hook name="index:footer"}{/hook}


It would be interesting to see someone using this on a live store as I have not tested this outside of a development store.

[/quote]



Is this the only place where you DEFER the script? I tried this and Gmaxtrix still says I still need to DEFER the script.

Defer the script by adding 'defer' in the script tag, ie:

```php


```
John, you need chop and change a few templates to put a hardcoded call for jquery.js in only the and the rest, I think, can be added to the bottom as above.

Thanks for the info StellaBytes. Can you tell me how I would move scripts.post.tpl to the footer? I saw





{hook name=“index:scripts”}

{/hook}



at the bottom of [color=#282828][font=arial, verdana, tahoma, sans-serif]/customer/index.tpl but was not sure if that would take care of it.[/font][/color]



[color=#282828][font=arial, verdana, tahoma, sans-serif]Thanks.[/font][/color]

[quote name='mghazal' timestamp='1353573715' post='149716']

up can change scripts from {script src=“YOURSCRIPT.JS”} to

[/quote]


[quote name='StellarBytes' timestamp='1364420031' post='158850']

Defer the script by adding 'defer' in the script tag, ie:

```php


```
[/quote]

that't sound easy and great, but could you please said [color=#ff0000][b]where[/b][/color]?
some explanation to newbies would be appreciate.

Wherever a JS script is loaded, the core JS scripts (those which reside in the root js folder) are a little more complicated (OK, vastly more complicated) to handle.



The easier ones are in commonly found in locations such as /skins/basic/customer/addons/addon_name/hooks/scripts.post.tpl

I am not able to find the file path on my directory. Can you please advise?


[quote][/quote]

You can't defer all javascript without destroying the user experience. Much JS in cs-cart is used to control layout and modify styling based on run-time decisions. If you defer all of this, you will get a screen that jumps around, colors that change and other odd effects which are very undesirable.



Just because Google thinks you should doesn't mean you should. Do a “view source” of gmail.com. They don't defer their JS because the couldn't do what they need to do if they did.