How to use Async function

Ask the community
,
1

I am trying to speed up my site, more specifically the area I’m having trouble with is the Time to Interactive following the loading of the LCP.

The Largest Contentful Paint is loading at the same time as FP and FCP, but the time it takes for the site to respond to user input i.e. opening the menu, swiping across to the next image etc. drags out another 2.2 seconds.

I have done everything I can think of such as reducing javascript, removing elements that are not absolutely necessary to my site, minifying javascript, reducing the container box size that will house the image, putting JS in order of what is needed first (though I’m not sure if this was needed), I’ve managed to bring it down a bit from what it once was, but still it’s too high, meaning I am not passing CWV.

I’ve read about async functions - whereby if I’m right you put async at the start of a function and put something like await in there too so the code will continue being read without waiting for this part to resolve, essentially speeding things up and reducing the Time to Interactive.

I’m not really sure how to do this or if this is even the right thing to do. Hoping someone can help with this or point me in the right direction, thanks.

Below is my code…

$w.onReady(function () {
    $w("#MensFootwearItem").onReady(() => {
        let item = $w("#MensFootwearItem").getCurrentItem();

        $w('#imageX144').src = item.mainImage;
        $w('#imageX144').alt = item.h1Title;
        $w('#imageX145').src = item.image1;
        $w('#imageX145').alt = item.h1Title;
        $w('#imageX146').src = item.image2;
        $w('#imageX146').alt = item.h1Title;
        $w('#imageX147').src = item.image3;
        $w('#imageX147').alt = item.h1Title;
        $w('#text29').text = item.h1Title;
        $w('#text206').text = item.styleCode;
        $w('#text203').text = item.price;

        if (item.supplier1) {
            $w("#box86, #imageX8, #buyNow1").show();
            $w('#imageX8').src = item.urlImage1;
            $w('#text101').text = item.supplier1;
            $w('#text36').text = item.priceUrl1;
            $w('#text37').text = item.sizeText1;
            $w('#buyNow1').label = item.buttonText1;
            $w('#buyNow1').link = item.url1;
        } else {
            $w('#text101, #text36, #text37').hide();
        }
        if (item.sizeText1 === 'Sold Out') {
            $w('#buyNow1').style.backgroundColor = "#FF0000";
        }
        if (item.supplier2) {
            $w("#box85, #imageX14, #buyNow2, #line12").show();
            $w('#imageX14').src = item.urlImage2;
            $w('#text42').text = item.supplier2;
            $w('#text41').text = item.priceUrl2;
            $w('#text40').text = item.sizeText2;
            $w('#buyNow2').label = item.buttonText2;
            $w('#buyNow2').link = item.url2;
        } else {
            $w("#box85, #imageX14, #buyNow2, #line12, #text42, #text41, #text40, #buyNow2").collapse();
        }
        if (item.sizeText2 === 'Sold Out') {
            $w('#buyNow2').style.backgroundColor = "#FF0000";
        }
        if (item.supplier3) {
            $w("#box34, #imageX10, #buyNow3, #line13").show();
            $w('#imageX10').src = item.urlImage3;
            $w('#text46').text = item.supplier3;
            $w('#text45').text = item.priceUrl3;
            $w('#text44').text = item.sizeText3;
            $w('#buyNow3').label = item.buttonText3;
            $w('#buyNow3').link = item.url3;
        } else {
            $w("#box34, #imageX10, #buyNow3, #line13, #text46, #text45, #text44, #buyNow3").collapse();
        }
        if (item.sizeText3 === 'Sold Out') {
            $w('#buyNow3').style.backgroundColor = "#FF0000";
        }
        if (item.supplier4) {
            $w("#box35, #imageX12, #buyNow4, #line14").show();
            $w('#imageX12').src = item.urlImage4;
            $w('#text50').text = item.supplier4;
            $w('#text49').text = item.priceUrl4;
            $w('#text48').text = item.sizeText4;
            $w('#buyNow4').label = item.buttonText4;
            $w('#buyNow4').link = item.url4;
        } else {
            $w("#box35, #imageX12, #buyNow4, #line14, #text50, #text49, #text48, #buyNow4").collapse();
        }
        if (item.sizeText4 === 'Sold Out') {
            $w('#buyNow4').style.backgroundColor = "#FF0000";
        }
        if (item.supplier5) {
            $w("#box36, #imageX13, #buyNow5, #line15").show();
            $w('#imageX13').src = item.urlImage5;
            $w('#text54').text = item.supplier5;
            $w('#text53').text = item.priceUrl5;
            $w('#text52').text = item.sizeText5;
            $w('#buyNow5').label = item.buttonText5;
            $w('#buyNow5').link = item.url5;
        } else {
            $w("#box36, #imageX13, #buyNow5, #line15, #text54, #text53, #text52, #buyNow5").collapse();
        }
        if (item.sizeText5 === 'Sold Out') {
            $w('#buyNow5').style.backgroundColor = "#FF0000";
        }
        if (item.supplier6) {
            $w("#box373, #imageX141, #buyNow6, #line16").show();
            $w('#imageX141').src = item.urlImage6;
            $w('#text281').text = item.supplier6;
            $w('#text280').text = item.priceUrl6;
            $w('#text279').text = item.sizeText6;
            $w('#buyNow6').label = item.buttonText6;
            $w('#buyNow6').link = item.url6;
        } else {
            $w("#box373, #imageX141, #buyNow6, #line16, #text281, #text280, #text279, #buyNow6").collapse();
        }
        if (item.sizeText6 === 'Sold Out') {
            $w('#buyNow6').style.backgroundColor = "#FF0000";
        }
        if (item.supplier7) {
            $w("#box415, #imageX142, #buyNow7, #line17").show();
            $w('#imageX142').src = item.urlImage7;
            $w('#text294').text = item.supplier7;
            $w('#text293').text = item.priceUrl7;
            $w('#text292').text = item.sizeText7;
            $w('#buyNow7').label = item.buttonText7;
            $w('#buyNow7').link = item.url7;
        } else {
            $w("#box415, #imageX142, #buyNow7, #line17, #text294, #text293, #text292, #buyNow7").collapse();
        }
        if (item.sizeText7 === 'Sold Out') {
            $w('#buyNow7').style.backgroundColor = "#FF0000";
        }
        if (item.supplier8) {
            $w("#box416, #imageX143, #buyNow8, #line18").show();
            $w('#imageX143').src = item.urlImage8;
            $w('#text297').text = item.supplier8;
            $w('#text296').text = item.priceUrl8;
            $w('#text295').text = item.sizeText8;
            $w('#buyNow8').label = item.buttonText8;
            $w('#buyNow8').link = item.url8;
        } else {
            $w("#box416, #imageX143, #buyNow8, #line18, #text297, #text296, #text295, #buyNow8").collapse();
        }
        if (item.sizeText8 === 'Sold Out') {
            $w('#buyNow8').style.backgroundColor = "#FF0000";
        }
    });
});

export function imageX144_viewportEnter(event) {
    $w('#box424').style.backgroundColor = "#000000";
}

export function imageX144_viewportLeave(event) {
    $w('#box424').style.backgroundColor = "#979797";
}

export function imageX145_viewportEnter(event) {
    $w('#box425').style.backgroundColor = "#000000";
}

export function imageX145_viewportLeave(event) {
    $w('#box425').style.backgroundColor = "#979797";
}

export function imageX146_viewportEnter(event) {
    $w('#box426').style.backgroundColor = "#000000";
}

export function imageX146_viewportLeave(event) {
    $w('#box426').style.backgroundColor = "#979797";
}

export function imageX147_viewportEnter(event) {
    $w('#box427').style.backgroundColor = "#000000";
}

export function imageX147_viewportLeave(event) {
    $w('#box427').style.backgroundColor = "#979797";
}
2

Hello Chris,

An async function is used for promises. You can use async in your case to await the .getCurrentItemCall().

A few things to note in general here. The dataset you have on your onReady function will load shortly after the page loads. That will always be the case and there is nothing you can do about it. However, you should await the current item so that your machine knows to not execute any of the code below your getCurrentItem() call until an item is returned.

Also you do not need to keep all of your code in one function, you can build multiple functions and call them once the onReady loads. I see you have a lot of conditional if else statements. Often cases of using an if after an else won’t always render cleanly so you should consider writing different functions, stick with if statements, use else if {}, or ternary operators. Here’s an example with an if only statement:

import wixWindowFrontend from 'wix-window-frontend';

let currentItem // by placing it here, item is now reachable across your functions 
$w.onReady(function () {

    $w("#MensFootwearItem").onReady(async () => {
        currentItem = await $w("#MensFootwearItem").getCurrentItem();
        if (currentItem) {
            logicFunctions()
        }
    })
});

function logicFunctions() {
	uiExample()
	// other funtions to keep code short and easier to follow
}

function uiExample() {
	if (currentItem.supplier1) {
            $w("#box86, #imageX8, #buyNow1").show();
            $w('#imageX8').src = currentItem.urlImage1;
            $w('#text101').text = currentItem.supplier1;
            $w('#text36').text = currentItem.priceUrl1;
            $w('#text37').text = currentItem.sizeText1;
            $w('#buyNow1').label = currentItem.buttonText1;
            $w('#buyNow1').link = currentItem.url1;
        } 
		// if no current item . supplier 1
		if (!currentItem.supplier1) {
            $w('#text101, #text36, #text37').hide();
        }
}
3

Thank you for this, I have applied the code in this format and the page seems to be loading much quicker. :+1: