Jump to content

How to forcing JS to load the last

Pressed0024
 Share

Recommended Posts

ibndawood Newbie

ibndawood

Posted
Posted

This is something intresting and I have been personally loading files at the bottom just after loading the page. This is how we can achieve this:

 

Take a look at your header.tpl file of your theme.You will find something like this : 

<script type="text/javascript">
    var baseDir = '{$content_dir|addslashes}';
    var baseUri = '{$base_uri|addslashes}';
    var static_token = '{$static_token|addslashes}';
    var token = '{$token|addslashes}';
    var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
    var priceDisplayMethod = {$priceDisplay};
    var roundMode = {$roundMode};
</script>
{if isset($css_files)}
	{foreach from=$css_files key=css_uri item=media}
	<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
	{/foreach}
{/if}
{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
{$HOOK_HEADER}

You can just paste the above code in your footer.tpl file just before closing the <body> tag. 

 

But it is not as simple as that.

$HOOK_HEADER is used by lot of developers to load javascript, css files and also meta tags. If we paste HOOK_HEADER in the footer meta tags would be in the wrong place (meta tags are supposed to be withing <head> tag only) but if we leave just HOOK_HEADER then the javascript/css files that are loaded would be dependent on js files loaded above. So you'll have to check all the modules, make appropriate changes, test extensively and then deploy.

Link to comment
Share on other sites
Pressed0024 Newbie

Pressed0024

Posted
  • Author
Posted

This is something intresting and I have been personally loading files at the bottom just after loading the page. This is how we can achieve this:

 

Take a look at your header.tpl file of your theme.You will find something like this : 

<script type="text/javascript">
    var baseDir = '{$content_dir|addslashes}';
    var baseUri = '{$base_uri|addslashes}';
    var static_token = '{$static_token|addslashes}';
    var token = '{$token|addslashes}';
    var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
    var priceDisplayMethod = {$priceDisplay};
    var roundMode = {$roundMode};
</script>
{if isset($css_files)}
	{foreach from=$css_files key=css_uri item=media}
	<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
	{/foreach}
{/if}
{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
{$HOOK_HEADER}

You can just paste the above code in your footer.tpl file just before closing the <body> tag. 

 

But it is not as simple as that.

$HOOK_HEADER is used by lot of developers to load javascript, css files and also meta tags. If we paste HOOK_HEADER in the footer meta tags would be in the wrong place (meta tags are supposed to be withing <head> tag only) but if we leave just HOOK_HEADER then the javascript/css files that are loaded would be dependent on js files loaded above. So you'll have to check all the modules, make appropriate changes, test extensively and then deploy.

Tested. It did delay js to load somewhere at the middle of timeline not at the end (which is fine since the page would already start to render). Problem is I get this striped down version of the website without css which is thrown to the left of the page for like 0.5sec before it starts to shift to the center and load normal. Every load turns out this way. Like you said, Hookheader embeds the CSS as well so BOTH css and js gets delayed.

 

Is there another way to solely just delay all js including those Google API maps js, google font js, all the way to the back of the timeline? This would be especially helpful for those on shared hosting or not able to implement mod_pagespeed due to server mod conflicts.

Link to comment
Share on other sites
Pressed0024 Newbie

Pressed0024

Posted
  • Author
Posted

If there is a solution to this that can be easily be implemented across the board of any store theme, we could save at least 1 sec rendering time. Example, my CCC theme js takes 213ms to wait for server and 1.03s to receive at 126kb. This is alot of time if you ask me.

Link to comment
Share on other sites
ibndawood Newbie

ibndawood

Posted
Posted

one must determine by moving the existing java to the bottom, which java 'must' be loaded at the top.  So for many shops  just loading at the bottom will not work well.

 

so you start by moving everything to the bottom, then test to find which java must be loaded  earlier...and take appropriate action.

 

El Patron, I am sure you meant javascript :P

Link to comment
Share on other sites
ibndawood Newbie

ibndawood

Posted
Posted

@Pressed0024, I think most problems occur with $HOOK_HEADER. 

 

$HOOK_HEADER should be within the header but it should load only css files. So the best way to achieve this is in your theme check all modules that are hooked to header and if they had used hookheader to load javascript files using tpl files then remove them from the just add them to them to the controller context. Like 

 

$this->context->controller->addJS

 

This way hookHeader will set the $js_files smarty param which we'll move to the bottom.

Link to comment
Share on other sites
Pressed0024 Newbie

Pressed0024

Posted
  • Author
Posted

@Pressed0024, I think most problems occur with $HOOK_HEADER. 

 

$HOOK_HEADER should be within the header but it should load only css files. So the best way to achieve this is in your theme check all modules that are hooked to header and if they had used hookheader to load javascript files using tpl files then remove them from the just add them to them to the controller context. Like 

 

$this->context->controller->addJS

 

This way hookHeader will set the $js_files smarty param which we'll move to the bottom.

Is there a "cleaner" way to do this? A module that can be enabled and disabled to do this task would be a lot easier to maintain in the long run :)

Link to comment
Share on other sites
  • 3 weeks later...
  • 3 weeks later...
jirislav Newbie

jirislav

Posted
Posted (edited)

Hi there!

I'd like to ask if is there any option to move this code:

var baseDir = '{$content_dir}';
var static_token = '{$static_token}';
var token = '{$token}';
var priceDisplayPrecision = '{$priceDisplayPrecision*$currency->decimals}';
var priceDisplayMethod = '{$priceDisplay}';
var roundMode = '{$roundMode}';

to an external *.js? I've already tried it, but it does some errors.

 

I need it because of SEO. Thanks for help!

Edited by jirislav (see edit history)
Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

Yes, sorry I had to hide thread (with the module) until I can address a change I made for 1.6 alpha.

 

I am developing new module that will allow you to select from back office which java to load top/bottom..

 

the module profiles your existing .js, the you tell the module which files to load top/bottom...

 

I will update this thread when it's ready...eta end of Jan. 2014

  • Like 1
Link to comment
Share on other sites
Pressed0024 Newbie

Pressed0024

Posted
  • Author
Posted

I am developing new module that will allow you to select from back office which java to load top/bottom..

 

the module profiles your existing .js, the you tell the module which files to load top/bottom...

 

I will update this thread when it's ready...eta end of Jan. 2014

 

I thought previously this was not possible since various themes will have different ways of implementing the js. Can't wait to see how this works out.

Link to comment
Share on other sites
  • 1 month later...
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

just an update (as I tend to work in a vacum)  here is the new back office module configuration screen.

also, I'm amazed how little of the java scripts need to be loaded at the top.  What you see in screen shot works on native 1.5.6.2 shop without issue.  google/yslow tests are very positive.

 

 

02.23.2014-12.03.png
http://screencast.com/t/hhaTnyZoX8Rb

 

I have loads of testing yet to do.

 

Signed (tired) el

Link to comment
Share on other sites
  • 2 weeks later...
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

This one look promising El :)

Any eta on release to the public yet... and is there a price on this one ?

 

Hi, hoping to release end of this week or early next week. I leave for high up in the Andes in two weeks so much to do before we drop off the net on and off.  This works better than I had hoped but it sure stretched my old brain.  I am considering adding async/defer options to each file and  think it would be good idea to include the date the java is discovered so we can auto email admin to remind them to review and decide top/bottom.  All that little stuff is very time consuming but this is a hobby for me and one I still enjoy doing.

 

All my testing showed only two 'required' java at top, this on native 1.5.6.2...there were several 'hard' parts but all in all it came out 'very' clean which means the price can be lower at it requires no installation support from me. :)  adding async/defer options will be icing on the cake.

 

here is final screen  shot without async/defer options

03.04.2014-19.36.png

http://screencast.com/t/5TQBibJJE

Link to comment
Share on other sites
Pressed0024 Newbie

Pressed0024

Posted
  • Author
Posted (edited)

In fact it's hard to stay relevant in any tech space :) I'm pretty sure there are still a huge bunch of Prestashop stores on older version and prefer not to take the risk of upgrading.

 

Also, the upside of your module is that as long as the module is compatible with all 1.4, 1.5, 1.6, it's able to load js at top in 1.6 instead which some themes will find very useful :)

Edited by Pressed0024 (see edit history)
  • Like 1
Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

In fact it's hard to stay relevant in any tech space :) I'm pretty sure there are still a huge bunch of Prestashop stores on older version and prefer not to take the risk of upgrading.

 

Also, the upside of your module is that as long as the module is compatible with all 1.4, 1.5, 1.6, it's able to load js at top in 1.6 instead which some themes will find very useful :)

 

 

 

glad I added async/defer options yesterday...it really added even more giddy up to page render....above and beyond loading 98% of java to bottom...

 

 

 

1.6 is pretty cool...and just with async/defer for 1.6...I am still relevant!..jajajajajaja....

Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

I wish I had a module for that. B)

 

As Mr. Bowie reminds us:

We can beat them, just for one day
We can be Heroes, just for one day

or as I prefer,settle for being 'Tragically Hip'.  Mr. Dalton, I know you know this group.

 

Ok, so async/defer/default..I support for anything to be loaded at bottom...can not do at top without hacking header.tpl...and I don't do that anymore...

 

03.05.2014-16.11.png

http://screencast.com/t/i8BfGK46Mw

  • Like 1
Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

03.10.2014-10.10.png
http://screencast.com/t/3koKlELt5

 

uh...this is going to be my best work yet. :)

 

currently adding profiling by IP so you can profile the shop (test out java movement) without affecting real-time visitors.

 

now supports: JavaScript CCC even if CCC not enabled for top loading.  supports JavaScript peformance attributes by java file or CCC async/defer.

Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

Can asysc and defer actually work together for a particular js?

 

A quick technical brief of how the module works especially together with CCC and Full Page Caching would help those new to the concept of this module :)

 

yes, when you do not have bottom load ccc enabled, you can specific y by java file async/defer.  There is no point in this support for top loaded as they have already been defined as required top load/execute before page render.

 

if you run with bottom ccc, then you optionally can set defer on this file...I don't do async on this file because of bad results, async is an html5 attribute...:)

 

heck I am almost ready for picking an icon...

Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

El, I know very little about this subject. I just today tried to do some reading up on it. What do you think of the points made by this fellow, 

 

http://licson.net/post/really-defer-loading-javascript/

 

actually this article is like this article...

 

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

 

I plan on adding this support.

Link to comment
Share on other sites
PrestaHeroes USA Mentor

PrestaHeroes USA

Posted
Posted

Yeah I had seen that as well. Actually when I read that page I was thinking the image on that page would be the perfect Icon for your new module. ;)

 

Wonder if it's Public Doman ...

 

added load head, google suggested javascript loaing, testing results:

 

I have to more java in the header than I do when java loaded at the bottom and optionally deferred.  I do get an extra ranking point or two for the effort.

 

I will make this an additional load option rather than replacing load bottom logic.

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...