I have been trying to improve my site performance, more specifically for the LCP on mobile.
I have made various changes to try to improve this such as code compression, reducing image size on screen, removing unnecessary and non-essential code, removing elements and text that are not absolutely necessary to my design and multiple others.
On Lighthouse I have managed to knock off around 0.5 seconds, improving the overall performance score from around 30% to the 60%+ mark, but the real-world data is showing the LCP as 4.4 seconds, which has increased from 3.7 seconds since 30/07/2023, essentially getting worse. This has had a negative effect on my ranking with Google, effecting site visits and purchases.
I am really struggling with this, and am a relative novice when it comes to coding etc. I have read about ‘async’ functions etc. and putting stuff in the backend code to prioritise certain elements, but I’m not really sure if this is the right way to go, if I can even use these in my code or how to actually use them. I have also researched other things such as forcing the LCP to load at the start, eliminating render blocking resources etc. but truth be told this is beyond my capabilities and I’m not sure if I can use these or how to implement them.
Any help, tips or anything at all will be greatly appreciated, I really need to get this LCP down.
Code and screen shots below…Thanks
Non-compressed code…
$w.onReady(function () {
$w("#MensFootwearItem").onReady(() => {
let item = $w("#MensFootwearItem").getCurrentItem();
if (item.supplier1) {
$w("#box86, #imageX8, #buyNow1").show();
}
if (item.sizeText1 === 'Sold Out') {
$w('#buyNow1').style.backgroundColor = "#FF0000";
}
if (item.supplier2) {
$w("#box85, #imageX14, #buyNow2, #line12").show();
} else {
$w("#box85, #imageX14, #buyNow2, #line12").collapse();
}
if (item.sizeText2 === 'Sold Out') {
$w('#buyNow2').style.backgroundColor = "#FF0000";
}
if (item.supplier3) {
$w("#box34, #imageX10, #buyNow3, #line13").show();
} else {
$w("#box34, #imageX10, #buyNow3, #line13").collapse();
}
if (item.sizeText3 === 'Sold Out') {
$w('#buyNow3').style.backgroundColor = "#FF0000";
}
if (item.supplier4) {
$w("#box35, #imageX12, #buyNow4, #line14").show();
} else {
$w("#box35, #imageX12, #buyNow4, #line14").collapse();
}
if (item.sizeText4 === 'Sold Out') {
$w('#buyNow4').style.backgroundColor = "#FF0000";
}
if (item.supplier5) {
$w("#box36, #imageX13, #buyNow5, #line15").show();
} else {
$w("#box36, #imageX13, #buyNow5, #line15").collapse();
}
if (item.sizeText5 === 'Sold Out') {
$w('#buyNow5').style.backgroundColor = "#FF0000";
}
if (item.supplier6) {
$w("#box373, #imageX141, #buyNow6, #line16").show();
} else {
$w("#box373, #imageX141, #buyNow6, #line16").collapse();
}
if (item.sizeText6 === 'Sold Out') {
$w('#buyNow6').style.backgroundColor = "#FF0000";
}
if (item.supplier7) {
$w("#box415, #imageX142, #buyNow7, #line17").show();
} else {
$w("#box415, #imageX142, #buyNow7, #line17").collapse();
}
if (item.sizeText7 === 'Sold Out') {
$w('#buyNow7').style.backgroundColor = "#FF0000";
}
if (item.supplier8) {
$w("#box416, #imageX143, #buyNow8, #line18").show();
} else {
$w("#box416, #imageX143, #buyNow8, #line18").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";
}
sometimes when I do this test it shows the LCP as quite a short block, with TTI underneath which extends a couple of seconds
Real World Data
