Banner Image Desktop - failing pagespeed insights CLS score DAWN

[deakon]

finishlinewheels.com

homepage failing CLS for Desktop.  (it does well in Mobile)

banner image is causing .072, the main contributor, see below and the referenced code.

main#MainContent > section#shopify-section-template--15833734447275__image_banner > div#Banner-template--15833734447275__image_banner > ::after <::after>

0.072

section-image-banner.css is where i think the banner image needs changes.

this file has a section of code for the "banner_media"  

i think i need to change a bit of code to assign size attributes, height and width.  

the picture of the corvette (banner media) is 1219px by 579px

what do i need to do to fix the CLS issue with this image for Desktop?  

this is the Default Code (current code) in that file:

.banner__media {
height: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
}

[Cedcommerce]

Hello @deakon,

To resolve this issue, you must remove the lazy loading for this banner section.

Follow the steps below to get this fixed.

• Go to your Shopify admin > Online store
• Themes > Select your theme > Edit code
• Open the "banner-image.liquid" file from the section
• Remove the lazy load attribute and save the changes.

image.png

Hope it helps. Let us know if you need any further help.

Regards, 

CedCommerce

[deakon]

did not work,

can anyone else help on this?  

thanks!!  

[OneCommerce]

Hello mate,
We are OneExperts from OneCommerce - an eCommerce solution platform.

You can set specific width and height to decrease CLS like below:

.banner__media {
height: 579px;
position: absolute;
left: 0;
top: 0;
width: 1219px;
}

Of course you also need to pay attention to set the size according to responsive

Hope this can help you solve the problem. If you need any further support, hit us up at julia@onecommerce.io for replies within minutes