Page 2 of 2
Re: [Need Help]scripts to the bottom and make website faster
Posted: Tue Jan 03, 2012 10:32 pm
by Qphoria
Ok I've tested my theory above and see now what you mean. I believe if all the jquery calls were wrapped in
$(document).ready(function() {
})
it should work... again in theory
But to test it I loaded the product page and it threw an error on this line:
Code: Select all
<script type="text/javascript"><!--
$('#tabs a').tabs();
//--></script>
But when I changed it in the product.tpl file to:
Code: Select all
<script type="text/javascript"><!--
$(document).ready(function() {
$('#tabs a').tabs();
});
//--></script>
It did not throw an error and the tabs loaded fine.
But that is another debatable change, as loading jscript last may speed up content.. but for it to work you have to wait until document is ready to load certain items.. Which means that things like scrollers will load as ugly <ul> list items first until the page finishes, and then repaints the screen and adjusts them as they should look.
So really it's 6 in one.. half-dozen in the other.
Re: [Need Help]scripts to the bottom and make website faster
Posted: Tue Jan 03, 2012 10:50 pm
by subdivide
Well yes and no actually.
If you're using javascript files as opposed to inline js those files will be cached by the browser after the first load, and even better by using some simple expires headers, those files can be cached for as long as you want them to.
Just fire up YSlow in Firefox or Chrome and you'll see how incredibly poor the performance is on a default installation.
The demo store here scores a 67/100 in YSlow and a 56/100 in Page Speed, now imagine if you had 1000-2000 hits a day and 1000 products to display ... needless to say we need some improvements.
I think this is a topic that needs serious discussion and I'm working diligently on a more user friendly solution myself.
As I said, I got it handled, but it sucked, and it's certainly not an easy fix.
-V
Re: [Need Help]scripts to the bottom and make website faster
Posted: Fri May 18, 2012 10:10 pm
by Shark
subdivide wrote:No worries, I finished it.
-V
Could you tell me please how you solved the problem with the scripts added by modules (like slideshow, carousel)?
Thanks
Re: [Need Help]scripts to the bottom and make website faster
Posted: Fri May 25, 2012 12:14 am
by subdivide
I went through each template and moved all of the inline js to a single scripts.js file, leaving only script variables that could be referenced later.
For instance inside slideshow.tpl I moved all the inline and left only this:
Code: Select all
<script>var slideshow_module=<?php echo $module; ?>;</script>
With my set up I have a separate slideshow for the home page so I created 2 functions, one that does just the default nivoslider and one with options for the homepage.
Code: Select all
function loadSlideShow () {
$('#slideshow'+slideshow_module).nivoSlider();
}
function loadHomeSlideShow () {
$('#slideshow0').nivoSlider({
effect:"random",
slices:15,
boxCols:8,
boxRows:4,
animSpeed:1000,
pauseTime:8000,
startSlide:0,
directionNav:true,
directionNavHide:true,
controlNav:false,
controlNavThumbs:false,
controlNavThumbsFromRel:true,
keyboardNav:true,
pauseOnHover:true,
manualAdvance:false
});
}
Then I simply call those functions with this:
Code: Select all
if ($('.nivoSlider').length > 0) {
if ($('.nivoSlider').attr('id') == 'slideshow0') {
loadHomeSlideShow ();
} else {
loadSlideShow ();
}
}
The other option you have is to leave everything in place, go through all your templates and defer all your inline js until after the page loads which would include the js that loads at the bottom of your page.
Code: Select all
<script defer>// your inline js here</script>
I haven't tested that personally, but as long as you don't defer the main js file calls in your footer it should work as expected, though I would guess you'd probably need to tweak it in spots.
Hope that helps.
-V
Re: [Need Help]scripts to the bottom and make website faster
Posted: Fri May 25, 2012 5:28 pm
by rokdazone
Maybe the attributes defer or async could be of some use here?
http://dev.w3.org/html5/spec/the-script ... ript-defer
Code: Select all
<script src="script.js" type="text/javascript" defer="defer"></script>
Re: [Need Help]scripts to the bottom and make website faster
Posted: Thu Nov 01, 2012 8:56 pm
by painersin
How can we do that in 1.5.2.1?
Re: [Need Help]scripts to the bottom and make website faster
Posted: Tue Mar 26, 2013 3:01 pm
by greyman56
Has anyone done this yet, and had all the front end functions working properly? In 1.5.5.1?
Especially the checkout page!!!! It has bunches of ajax that fires off click and change events. They all need to be delayed in their initialization until after jquery is loaded.
Re: [Need Help]scripts to the bottom and make website faster
Posted: Wed Mar 27, 2013 5:33 pm
by Shark
I've done it in 1.5.4.1, didn't have time yet to upgrade. I use modernizr load (=yepnope) to check. You don't have to change the js parts that are being fetched when clicking a checkout step.
Re: [Need Help]scripts to the bottom and make website faster
Posted: Wed Mar 27, 2013 9:54 pm
by greyman56
Thanks Shark.
What are your yepnope checks doing?
I found out about the checkout template files during my testing today. Thanks for the heads up. I ended up finding 2 checkout files, 4 account files, 4 affiliate files, and 4 module files in the template area that seemed to need delayed initialization. Found 3 external script files that needed to be loaded in the product controller using ->addScript(). In walks vqMod for that <grin>.
This was in the standard install of OC 1.5.5.1. It seems to be running OK. More testing and tweaks tomorrow.
Re: [Need Help]scripts to the bottom and make website faster
Posted: Fri Nov 22, 2013 9:13 pm
by cosmicx
Any updates on this one, please?