Hi there
My website is www.ahikersfriend.com
After recently realising the slow performance I have made changed to improve page speed. Some of the changes i have made include:
I still haven’t seen much of an improvement, if there is anything else i can do to try get into that green 90-100 page speed then please tell me.
You have a code error there. .onMouseIn is not a function
@jonatandor35 This is my code for my mega menu… would there be any improvements (i know there are) to make it quicker?
$w.onReady(()=> {
$w('#lsbutton').onMouseIn(()=> { $w('#lsdropdown').expand(); });
$w('#lsdropdown').onMouseOut(()=> { $w('#lsdropdown').collapse(); });
$w('#lsdropdown').onMouseIn(()=> { $w('#lsdropdown').expand(); });
$w('#ftbutton').onMouseIn(()=> { $w('#ftdropdown').expand(); });
$w('#ftdropdown').onMouseIn(()=> { $w('#ftdropdown').expand(); });
$w('#ftdropdown').onMouseOut(()=> { $w('#ftdropdown').collapse(); });
$w('#mbutton').onMouseIn(()=> { $w('#mdropdown').expand(); });
$w('#mdropdown').onMouseIn(()=> { $w('#mdropdown').expand(); });
$w('#mdropdown').onMouseOut(()=> { $w('#mdropdown').collapse(); });
$w('#fhbutton').onMouseIn(()=> { $w('#fhdropdown').expand(); });
$w('#fhdropdown').onMouseIn(()=> { $w('#fhdropdown').expand(); });
$w('#fhdropdown').onMouseOut(()=> { $w('#fhdropdown').collapse(); });
});
$w.onReady(function () {
setTimeout(function(){
$w('#lsbutton').onMouseOut(()=> { $w('#lsdropdown').collapse(); });
}, 300);
});
$w.onReady(function () {
setTimeout(function(){
$w('#ftbutton').onMouseOut(()=> { $w('#ftdropdown').collapse(); });
}, 300);
});
$w.onReady(function () {
setTimeout(function(){
$w('#mbutton').onMouseOut(()=> { $w('#mdropdown').collapse(); });
}, 300);
});
$w.onReady(function () {
setTimeout(function(){
$w('#fhbutton').onMouseOut(()=> { $w('#fhdropdown').collapse(); });
}, 300);
});
@welchjoshua818 It is not clear why you have:
2 different $w.onReady and why you put event listeners inside setTiemout. it makes no sense.
@jonatandor35 It’s because when someone hovers from one menu item to the next it can flash a little gap in between which looks quite bad… would you be able to simply the code, I’m new to coding and that is why it probably looks funny to you.
@welchjoshua818 But if I translate your code into English, this it what it’ll mean:
Once the page got loaded and the $w is ready, wait 300ms and then add an event handler that on mouse-in will immediately collapse the drop-down.
I’m pretty sure that’s not what you wanted to do.
$w('#lsdropdown').onMouseIn(()=>{$w('#lsdropdown').expand();});
This line means that when the mouse get into the $w(‘#lsbutton’) area it should expand. But if it’s not already expanded, the mouse won’t be able to get over it.
Try to think what you need to achieve, and fix the code in accordance.
@jonatandor35 I did want to stop the dropdown from collapsing immediately because if the other one is not open on time then it looks very wired. All the code is working as it should and doing what I want I just want to know how I could make it so it would improve my site performance.
thanks, Josh
remove your animations - I found this to be the most dramatic speed increase for my site (I still get 99% with hover animations - just remove the animations that are triggered by the page load)
@welchjoshua818 When I tried your site it loaded pretty fast. Anyway, I don’t think that the code you’re using has any significant effect on the slowness you described. So I can’t give you any smart advice. Maybe someone else.
@jonatandor35 Fair enough, just trying to hit that green zone on the page speed tests for a better user experience.
thanks for spending the time to help!
@prestonkelpiek9 yea, just removed the one animation I had