Jump to content

Google says I should put .js at the bottom of the page


FluffyCat

Recommended Posts

Hi

 

Running through some test tools with my page I am repeatedly recommended to put the javascript at the bottom to improve speed so I ran some tests.

 

Just moving the combined .js file to just before the </body> did not work since the page needs jQuery from the beginning. 

 

So then I loaded jQuery from google in the <head> and let the rest load at the bottom but my page did not really get any faster and webpagetest still says I should defer the javascripts that are already at the very end of the file.

 

Also I am not sure if there is a clean way to prevent Prestashop from loading jQuery as well if I put in on the top manually. Right now it is loaded twice which is of course a bad idea.

 

So, I basically have 2 questions:

 

1. in general I am curios to know how others are doing. This seems to be a very basic recommendation and yet I have about 10 javascript files that loads in the <head>. Do you just leave it like this or is it worth trying to change?

 

2, jQuery seems to be the largest file, is there a gain loading it from google? It seems as there should be a caching advantage but I am just a bit hesitant since Prestashop has choosen not to do this by default?

 

Any ideas or comments are very welcome

Link to comment
Share on other sites

Thanks Vekia

 

I looked at the module but I guess it is doing the same as copying the .js files to the footer.tpl but without the manual work involved which is nice.

 

I do not think it solves the jQuery issue since jQuery needs to be loaded in the head. Possibly it can be optimized to solve this. 

 

What is still confusing me though is that webpagetest.org still tells me to defer the .js scripts even if they are in the end of the html document which is counterintuitive. 

 

It would be nice to know if anyone actually cares about changing this or if you just go with the default?

Link to comment
Share on other sites

Hi everyone,

 

I am working on a new module to accomplish this.  The original module (now removed from  ps download) was for testing only.

 

The new module will profile the java used by the shop and allow you to specificy  which java to load at the top and what can be loaded at the bottom.

 

Please be patient (expect release mid -  Feb 2014.)  Note testing shows 4x page load speed improvement. :)

 

el

  • Like 1
Link to comment
Share on other sites

Hi El Patron

 

That is certainly very good news. I really look forward to testing it.

 

What´s your opinion on loading jQuery from the Google CDN? Prestashop includes it by default no? Is it worth overriding this and fetch it from Google instead to free up a browser connection?

 

Thanks for your efforts on this, it will be very interesting to test when you have something for the public to try,

Link to comment
Share on other sites

Hi El Patron

 

That is certainly very good news. I really look forward to testing it.

 

What´s your opinion on loading jQuery from the Google CDN? Prestashop includes it by default no? Is it worth overriding this and fetch it from Google instead to free up a browser connection?

 

Thanks for your efforts on this, it will be very interesting to test when you have something for the public to try,

 

I don't really have an opinion on the source location...happy prestashopping

Link to comment
Share on other sites

  • 1 month later...

Hi El Patron

 

That is certainly very good news. I really look forward to testing it.

 

What´s your opinion on loading jQuery from the Google CDN? Prestashop includes it by default no? Is it worth overriding this and fetch it from Google instead to free up a browser connection?

 

Thanks for your efforts on this, it will be very interesting to test when you have something for the public to try,

 

Hi fluffy, as promised an update on module, now released.

http://www.prestashop.com/forums/topic/314461-module-prestashop-javapro-remove-page-render-blocking-javascripts/

 

happy java modeling

Link to comment
Share on other sites

Nice, I will have a look at it.

 

Two questions before doing so:

 

1. On our test site we do not use CCC while in the live one we do. Do I have to change the module configs when cloning the site for testing or will this be automatically managed?

 

2. What does the modelling mean. For instance, I know we need JQuery to load at the header for the slides etc to work. Does the modelling mean that JQuery simply stays in the header or how does it work? What is done automagically and what part do we need to control ourselves.

 

Thanks

Link to comment
Share on other sites

Nice, I will have a look at it.

 

Two questions before doing so:

 

1. On our test site we do not use CCC while in the live one we do. Do I have to change the module configs when cloning the site for testing or will this be automatically managed?

 

2. What does the modelling mean. For instance, I know we need JQuery to load at the header for the slides etc to work. Does the modelling mean that JQuery simply stays in the header or how does it work? What is done automagically and what part do we need to control ourselves.

 

Thanks

 

Thanks for the questions.

 

1. you can with a click of a button enable or disable CCC.  This is no problem.  When not using CCC for bottom loaded, they will simply be loaded bottom but you can for these files also specifiy html attributes async or defer.  defer is a good opiton.

 

2. when one models, and each shop is different, you model (move to bottom) java that is not required.  This may be Jquery for example or product.js (for attributes).  This is why I built in a modeling control so you can test your changes so that it's not affecting vistiors view of your shop.  This is automatically turned on during installation, but note: without any change JavaPro will not affect your existing java script at top.

 

note in a native 1.5.6.2 shop after modeling, we only needed to load jquery, product.js and for some odd reason the google map on stores page.

 

for complete  info see: http://www.prestasho...ng-javascripts/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...