FROM CACHE - en_header

Shopify site has been flagged for CLS, how to add explicit width and height to logo image?

MITACJ
Excursionist
13 0 3
In Google Search console, our Shopify site has been flagged for CLS - Content Layout Shift, for the desktop version ONLY, not the mobile version. It says it's on every page, so I think it's something to do with the header menu or logo.
 
I'm trying to problem-solve, and one of the issues PageSpeed Insights flagged is as following:
 
- Image elements do not have explicit width and height.Set an explicit width and height on image elements to reduce layout shifts and improve CLS.
 
It specifically calls out our logo as one of the images that doesn't have an explicit size. It provides this code for the logo:
<img class="js lazyautosizes lazyloaded" src="https://cdn.shopify.com/s/files/1/0531/4039/0059/files/Insta_360x.jpg?v=16…" data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" data-aspectratio="1.0" data-sizes="auto" alt="Men in the Arena" style="max-width: 110px" data-srcset="//cdn.shopify.com/s/files/1/0531/4039/0059/files/Insta_180x.jpg?v=16107389…" sizes="110px" srcset="//cdn.shopify.com/s/files/1/0531/4039/0059/files/Insta_180x.jpg?v=16107389…">
 
Which liquid file do I go into to give an explicit width and height to the logo in the menu bar?
 
I've found this Shopify conversation that tells changes that need to be made to images https://community.shopify.com/c/site-speed/image-elements-do-not-have-explicit-width-and-height-page...
But not where to make them.
 
Can anyone here help? Thank you!
Replies 2 (2)
LDI
Shopify Partner
75 5 36

Hi,
Did you look in sections/header.liquid file?

Developer of PixPix image editor for Shopify
MITACJ
Excursionist
13 0 3

@LDI 

I have looked in there, and this is the logo-related code. What do I need to change for there to be explicit width and height for the logo image?

{% if section.settings.logo %}
{%- assign img_url = section.settings.logo | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<a href="{{ routes.root_url }}" class="site-header__logo-image{% if section.settings.align_logo == 'center' %} site-header__logo-image--centered{% endif %}" data-image-loading-animation>
{% capture logo_alt %}{{ section.settings.logo.alt | default: shop.name }}{% endcapture %}
<img class="lazyload js"
src="{{ section.settings.logo | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.logo.aspect_ratio }}"
data-sizes="auto"
alt="{{ logo_alt | escape }}"
style="max-width: {{ section.settings.logo_max_width }}px">
<noscript>
{% capture image_size %}{{ section.settings.logo_max_width | escape }}x{% endcapture %}
<img src="{{ section.settings.logo | img_url: image_size }}"
srcset="{{ section.settings.logo | img_url: image_size }} 1x, {{ section.settings.logo | img_url: image_size, scale: 2 }} 2x"
alt="{{ section.settings.logo.alt | default: shop.name }}"
style="max-width: {{ section.settings.logo_max_width }}px;">
</noscript>
</a>
{% else %}
<a class="site-header__logo-link" href="{{ routes.root_url }}">{{ shop.name }}</a>
{% endif %}

 

 

 

This is what another thread says needs to happen, but I'm having a little trouble applying it to the code above and figuring out how the code above needs to change:
"

So there are some themes that have a image snippet that is used everywhere, there are themes where there aren't and you have to go through each image in the code and add fixed dimensions.

 

So if an image is like

<img src={{ img | img_url: '500x' }}" alt="{{img.alt}}" >

You'd change it to

<img src={{ img | img_url: '500x' }}" alt="{{img.alt}}"  height="{{img.height}}" width="{{img.width}}">

You might also have to make sure those images have a style attribute of 

height: auto;

since adding fixed dimensions can make  stretch out on safari., becuase safari is silly."