Banner Image Desktop - failing pagespeed insights CLS score DAWN

Banner Image Desktop - failing pagespeed insights CLS score DAWN

deakon
Excursionist
51 5 6

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%;
}

Replies 3 (3)

Cedcommerce
Shopify Partner
718 77 116

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.

 

Cedcommerce_0-1672062334335.png

 

image.png

 

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

 

Regards, 

CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
deakon
Excursionist
51 5 6

did not work,

can anyone else help on this?  

thanks!!  

OneCommerce
Shopify Partner
253 19 110

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

OneCommerce - The Ultimate eCommerce Solution Platform
We offer 12+ solutions to help increase traffic, maximize conversion rates and generate better revenue for more than 500,000 eCommerce merchants worldwide.

Get know us at: Website | Blog | FAQ | Contact us