Unable to set image height and width to fix CLS issue

[hellekim]

The collection image in my theme (Empire) is being loaded with a delay and it is the likely cause of the CLS issue I have with my collection pages. Example: https://www.urbankitsupply.com/collections/bags

The code to show the image is as below - how can I add the needed sizes through that so that it works responsively:

        <figure class="collection--image">
          {%
            render 'rimg',
            img: collection.image,
            size: '1350x',
            lazy: false,
            canvas: false,
            attr: 'fetchpriority="high"'
          %}
        </figure>

[oscprofessional · Accepted solution]

Hello @hellekim, For collection Page image issues you can add this code instead of your figure collection image.

<img class="collection--image"
srcset="{% if collection.image.width >= 288 %}{{ collection.image | img_url: '288x' }} 288w,{% endif %}
{% if collection.image.width >= 576 %}{{ collection.image | img_url: '576x' }} 576w,{% endif %}
{% if collection.image >= 550 %}{{collection.image | img_url: '550x' }} 550w,{% endif %}
{% if collection.image >= 1100 %}{{ collection.image | img_url: '1100x' }} 1100w{% endif %}"
src="{{ collection.image | img_url: '350x350' }}"
sizes="(min-width: 1200px) calc((1200px - 10rem) / 2), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
loading="preload"
fetchpriority="high"
width="{{ collection.image.width }}"
height="{{ collection.image.height }}"
alt="{{ collection.image.alt | escape }}"
>

 And if this is not working you can used another Code :

<figure class="collection--image">
  <img srcset="
    {{ collection.image | img_url: size: '1350x' }},
    {{ collection.image | img_url: size: '1080x' }} 1080w,
    {{ collection.image | img_url: size: '720x' }} 720w,
    {{ collection.image | img_url: size: '540x' }} 540w,
    {{ collection.image | img_url: size: '360x' }} 360w,
    {{ collection.image | img_url: size: '270x' }} 270w,
    {{ collection.image | img_url: size: '180x' }} 180w"
    sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33.3vw"
    src="{{ collection.image | img_url: 'master' }}"
    loading="preload"
    fetchpriority="high"
    width="{{ collection.image.width }}"
    height="{{ collection.image.height }}"
    alt="{{ collection.image.alt | escape }}"
   
</figure>

Now About your Site speed part,

After analyzing your website using the Google PageSpeed Insights tool, it's evident that there's a low score, particularly on mobile devices. Improvements are necessary, especially concerning your LCP and TBT scores, which are currently inadequate and require enhancement.

In the current era, mobile devices dominate user traffic, making it imperative for websites to load quickly to ensure optimal user experience.

Below are some factors that might impact the speed of your online store, and how you can address them. 

3rd Party App Code: 

• You should remove the unused app code. It will be beneficial to your store. and makes your theme code easier to read.
• 3rd party apps & codes which take time to load and their size. They decrease the speed.
• Some code can be removed or reordered to improve your online store's performance. If you're not using an app, then you can remove it.
• If you're removing an app, then consider removing the code that was added as part of the app install process. Some apps help you with this process by wrapping their code in {% comment %} tags that mention the app name.
• Removing unused app code is a best practice that avoids running code for unused features and makes your theme code easier to read.

 And  For LCP issues you need to apply Some liquid Conditions.

How to Optimize Total Blocking Time:

After determining the Long Tasks and the code blocks and web page assets that are causing them, optimizing Total Blocking Time can be possible. To optimize the Code Blocks that busy the main thread longer than 50 MS, the methods below can be used.

• Reduce the Request Count of the Third-Party Scripts
• Reduce the Size of the Third-Party Scripts
• Minimize the Browser’s Main Thread Work
• Clean the Unused Javascript and CSS Codes
• Compress the Javascript and CSS Files
• Implement the Code Splitting for Javascript Assets

You can choose from several fonts for the text in your online store. To avoid downloading a new font to your customer's computer, you can use a system font.

We’ve had the best success for our clients by working with our developers to implement the lazy sizes because it's quite complicated for non-technical people.

You need to work on the following points:

• Pass core web vitals (important)
• Reduce JS Payload.
• Use Critical CSS.
• Reduce Large Image Sizes
• Migrate Tracking Codes To Google Tag Manager
• Compress Images
• Limit Third-Party JavaScript & Shopify Apps
• Preload Web Fonts. 
•  Use a standard web font.

Theme Upgrade:

Its benefits include improved loading speeds, which can help with both user experience and store conversion rates, and search engine optimization. 

How to avoid showing invisible text:

The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font. By including font-display: swap in your @font-face style, you can avoid FOIT in most modern browsers.

Remove unused CSS and unused JS:

• Check the assets folder of the theme and remove unused CSS and JS file
• Check and remove unused apps
• If your store has not installed any app you can comment {{ content_for_header }} code in the theme. liquid (not recommended if you don't have knowledge about the liquid)

You can improve your website speed score by fixing these issues.

If there is anything that needs to be clarified or included, please let us know.  We will surely help you. 

Have a nice day!

[hellekim]

Absolutely brilliant! This fixed the issue 99% - only issue is that the photo is now 576px in width also when the page is 1400px in width making the quality really poor. Any ideas for that? 

Thanks for all the points, you might hear from me soon - CLS was something that I wanted to start with fixing the speed issues and move on from there. Talk to you soon!

Edit: I changed to 2nd option and 1st one had some liquid errors. Image is very poor quality with that one as well.

Edit 2: Got it now - edited the 2nd code a bit and now it works:

<figure class="collection--image">
  <img srcset="
    {{ collection.image | img_url: '1350x' }},
    {{ collection.image | img_url: '1080x' }} 1080w,
    {{ collection.image | img_url: '720x' }} 720w,
    {{ collection.image | img_url: '540x' }} 540w,
    {{ collection.image | img_url: '360x' }} 360w,
    {{ collection.image | img_url: '270x' }} 270w,
    {{ collection.image | img_url: '180x' }} 180w"
    sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33.3vw"
    src="{{ collection.image | img_url: 'master' }}"
    loading="preload"
    fetchpriority="high"
    width="{{ collection.image.width }}"
    height="{{ collection.image.height }}"
    alt="{{ collection.image.alt | escape }}"
   >
</figure>

[Makeitperfect]

Hi there,

I noticed your very detailed and extensive reply to combat CLS for this particular persons store and wanted to let you know that I am facing similar problem but not with an image but the actual product grid as its dynamically loaded I guess by shopify...

I've created a post for it myself and here is the link to it https://community.shopify.com/c/shopify-discussions/collection-page-cls-caused-by-dynamic-product-gr...

I hope you wouldn't mind me tagging you in the post as I really really need some proficient persons help! I am only a DIY guy :/.

Would be very grateful if you can review my post and potentially shed some light as to how I can set min height to the product grid container so it doesnt result in CLS.

Much appreciated! Thank you kindly