How to improve home page load time?

Ask the community
, ,
1

Hello! I’d appreciate some help as my website home page is taking too long to load the code below:

$w.onReady(()=>{
    let sentence1 = $w('#textHome1');
    let sentence2 = $w('#textHome2');
    let sentence3 = $w('#textHome3');
    let sentence4 = $w('#textHome4');
    let floatDir = {
        "direction": "left"
    };
    let floatEsq = {
        "direction": "right"
    };
    for (i=0;i<100;i++){
    setTimeout(()=>{sentence1.hide('float',floatDir)},i*14000+5500) 
    setTimeout(()=>{sentence2.hide('float',floatEsq)},i*14000+5500)

    setTimeout(()=>{sentence3.show('float',floatEsq)},i*14000+7000) 
    setTimeout(()=>{sentence4.show('float',floatDir)},i*14000+7000)

    setTimeout(()=>{sentence3.hide('float',floatDir)},i*14000+12500) 
    setTimeout(()=>{sentence4.hide('float',floatEsq)},i*14000+12500)

    setTimeout(()=>{sentence1.show('float',floatEsq)},i*14000+13500) 
    setTimeout(()=>{sentence2.show('float',floatDir)},i*14000+13500)
    };
})

It was taking about 6 seconds to begin the “For” loop iteration, so I removed the members area and it came down to 2,5 seconds, then I removed the “Search” option and it came down to 1 - 1,5s, is there any way to load it faster without having to sacrifice those features in my website?

Obs.: I also got some code for the header as I made a customized submenu:

export function buttonPecas_mouseIn(event) {
    $w('#box7').show();
    $w('#vectorImage4').show();
}
export function box8_mouseOut(event) {
    $w('#box7').hide();
    $w('#vectorImage4').hide();
}
export function box9_mouseOut(event) {
    $w('#box7').hide();
    $w('#vectorImage4').hide();
}
export function box7_mouseOut(event) {
$w('#box7').hide();
$w('#vectorImage4').hide();
}

Thanks in advance!

2

First of all try to find out how long it takes to the $w to be ready.

const start = Date.now();
console.log('START', start);
$w.onReady(()=>{
console.log('$w - start (ms)', Date.now() - start);
///...
})

Try to feel how long it takes to the initial start log to appear.
And look for the second log to see the gap between the $w and the start.
Maybe it’ll help understanding the situation.

Also check if you have any code in the masterPage.js file that might slow it down.

3

Rebuilding your example and running it like suggested by J.D. it seems that with your code everything is just allright.

There was just one missing declaration in your for-loop, but the code works just fine and also the loading-time is absolutely ok…

const start = Date.now();
console.log('START', start);

$w.onReady(()=>{console.log('$w - start (ms)', Date.now() - start);
    let sentence1 = $w('#txt1');
    let sentence2 = $w('#txt2');
    let sentence3 = $w('#txt3');
    let sentence4 = $w('#txt4');
    let floatDir = {
        "direction": "left"
    };
    let floatEsq = {
        "direction": "right"
    };
    for (var i=0;i<100;i++){
        setTimeout(()=>{sentence1.hide('float',floatDir)},i*14000+5500) 
        setTimeout(()=>{sentence2.hide('float',floatEsq)},i*14000+5500)

        setTimeout(()=>{sentence3.show('float',floatEsq)},i*14000+7000) 
        setTimeout(()=>{sentence4.show('float',floatDir)},i*14000+7000)

        setTimeout(()=>{sentence3.hide('float',floatDir)},i*14000+12500) 
        setTimeout(()=>{sentence4.hide('float',floatEsq)},i*14000+12500)

        setTimeout(()=>{sentence1.show('float',floatEsq)},i*14000+13500) 
        setTimeout(()=>{sentence2.show('float',floatDir)},i*14000+13500)
    }
});


I would say 62-milliseconds for a loding is - → OK.

I would suggest you to read this one first, perhaps you have such a problem…