Converting to Colossus: Significant Google Search Console Warnings Have Increased

[lesliekirk]

The site was previously built on the Base (Bootstrap) ReadyTheme and had fairly good Page Speed Insight numbers. But since the switch to Colossus, the numbers are bad. And the store owner is in a panic.

The top issue that I have been asking about (and even have a support ticket open for) is the need to preload the ReadyThemeIcons.woff - it's taking 2.28 seconds to load. Everything suggested has been tried. Google is not recognizing the preload and that is most likely because the font is being "called" from within the icons.css file

@font-face {
font-family: 'ReadyTheme Icons';
font-style: normal;
font-weight: normal;
font-display: fallback;
src: url('themes/colossus/ui/css/ReadyThemeIcons.woff') format('woff');
}

I have asked before and I ask again, isn't there some way to do this like Google Fonts does? For example:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">

And then there is this CLS (Cumulative Layout Shift) - GTmetrix really helped point something out

<main class="o-wrapper t-wrapper t-site-main">

with a 0.36 and

<div id="sfnt_hero" class="readytheme-contentsection">

with a 0.36

So it's something in these two sections that need tending to? That's what I'm thinking.

FWIW - the does have Cloudflare added on.

Suggestions are welcome.

[lesliekirk]

Another Google tidbit - the DevTools are warning

The resource https://www.domain.com/Merchant2/the...off?T=898d261e was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

[Matt Zimmermann]

Hi Leslie,

I have the font concern as part of the update for version 2, once I have a handle on it I may be able to post a solution. As for CLS, I would start by looking here: https://web.dev/optimize-cls/ .

[lesliekirk]

Hi Leslie,

I have the font concern as part of the update for version 2, once I have a handle on it I may be able to post a solution. As for CLS, I would start by looking here: https://web.dev/optimize-cls/ .

It looks like there is a need for a lot of image-specific styling to keep the CLS content. Are any best practices going to be outlined for usage within these ReadyTheme templates?

[Matt Zimmermann]

Hi Leslie,

By default, if an image has its width and height defined, it will be output as an attribute. As CLS is still a bit of a moving target, the best practices are going to be set by Google.

[lesliekirk]

Hi Leslie,

By default, if an image has its width and height defined, it will be output as an attribute. As CLS is still a bit of a moving target, the best practices are going to be set by Google.

Google is always a moving target but I have to deal with the issues that have put a store owner in panic mode

[lesliekirk]

Hi Leslie,

By default, if an image has its width and height defined, it will be output as an attribute. As CLS is still a bit of a moving target, the best practices are going to be set by Google.

One more question - what are going to be the best practices for defining the width and height in Colossus?

[Matt Zimmermann]

Most, if not all, of the images output by the image management function of the software have those tokens available for inclusion in the front end code. You can reference Shadows for how it will work in Colossus.

[lesliekirk]

Most, if not all, of the images output by the image management function of the software have those tokens available for inclusion in the front end code. You can reference Shadows for how it will work in Colossus.

Yes, I've seen where you can insert fixed sizes for images via the ReadyTheme Images - is that what you are referring to? But what happens when you set a fixed size and then go to mobile view? Is this mentioned in the Shadows documentation? It helps to have something to read and review

[lesliekirk]

Yes, I've seen where you can insert fixed sizes for images via the ReadyTheme Images - is that what you are referring to? But what happens when you set a fixed size and then go to mobile view? Is this mentioned in the Shadows documentation? It helps to have something to read and review

I've been trying to look into the Cumulative Layout Shift and image dimensions. I've been looking in the Theme Components > Images to figure out how to get the image dimensions to be outputted. There are two choices for Auto Sizing Use Image Dimensions or enter a Width and Height (in pixels). Since I wasn't seeing a width and height outputted with the "Auto Sizing" I thought I would need to enter the dimensions, so I did.

When I went to inspect the generated code, image my surprise when I saw the dimension tacked onto the file name instead of adding it as height="" and width=""

It looks like the way around this is to NOT use any Theme Component Images - seriously? Seriously?!?

[Matt Zimmermann]

Hi Leslie,

There are variables output by ReadyThemes for the images. The appending of the image size to the file name is how image management works.

[lesliekirk]

Hi Leslie,

There are variables output by ReadyThemes for the images. The appending of the image size to the file name is how image management works.

My apologized - I had "assumed" that it was going to insert the width and height tags. With that said, how do I make that happen?

[lesliekirk]

My apologized - I had "assumed" that it was going to insert the width and height tags. With that said, how do I make that happen?

On a side note, I noticed something that WordPress does when you insert an image and it's probably what I need. All I did was insert an image into a page. I've taken what WordPress started and edited it (slightly).

<img class="alignleft size-full wp-image-3367" src="https://www.domain.com/Merchant2/graphics/00000001/1/antique-white-kitchen-cabinets_header.jpg" alt="" srcset="https://www.domain.com/Merchant2/graphics/00000001/1/antique-white-kitchen-cabinets_header-200x75.jpg 200w, https://www.domain.com/Merchant2/graphics/00000001/1/antique-white-kitchen-cabinets_header-300x113.jpg 300w, https://www.domain.com/Merchant2/graphics/00000001/1/antique-white-kitchen-cabinets_header-400x151.jpg 400w, https://www.domain.com/Merchant2/graphics/00000001/1/antique-white-kitchen-cabinets_header-600x226.jpg 600w, https://www.domain.com/Merchant2/graphics/00000001/1/antique-white-kitchen-cabinets_header-768x289.jpg 768w, https://www.domain.com/Merchant2/graphics/00000001/1/antique-white-kitchen-cabinets_header-800x301.jpg 800w, https://www.domain.com/Merchant2/graphics/00000001/1/antique-white-kitchen-cabinets_header-1024x386.jpg 1024w, https://www.domain.com/Merchant2/graphics/00000001/1/antique-white-kitchen-cabinets_header-1200x452.jpg 1200w, https://www.domain.com/Merchant2/graphics/00000001/1/antique-white-kitchen-cabinets_header.jpg 1288w" sizes="(max-width: 1288px) 100vw, 1288px" width="1288" height="485">

This seems to be what Google is now demanding. Yes, I know Google is a moving target but "we" have to try and keep up with it.

[Matt Zimmermann]

Hi Leslie,

If you set a ReadyTheme Image width and height, you have access to those values as global variables. In Shadows, the large promo image on the storefront, for example, has:

• g.storefront_promo_large:image_wdth / &mvt:global:storefront_promo_large:image_wdth;
• g.storefront_promo_large:image_hght / &mvt:global:storefront_promo_large:image_hght;

If you output the image manually, not using the token, you can add in the width and height attributes. If there is no value for width and height, the output will be "0".

[afiumano]

We are having CLS issues with Colossus as well. The main culprit is the main product image on the mobile product page. Google is giving us a score of .136. I have set up a min-height on the surrounding div so there should be very little movement but we still aren't scoring within range. Anyone have any experience with this and a possible solution?