Improve CLS score

When customers are visiting your shop, the user experience is important. You might have used various tools, often provided by Google, to test the overall user experience and found that some parameters could be tweaked. One such parameter is called CLS (Cumulative Layout Shift); a measure of how much the layout shifts as the page is loading. We all know it — we are ready to click a link or button on a page, and suddenly it jumps down because some extra image just loaded and shifted everything in position. It's a bad user experience, and naturally, we want to eliminate this as much as possible.

CLS and Hello Retail

If you have Product Recommendations from Hello Retail, you might experience this layout shift when the recommendations load. The shift happens as the recommendations are injected after parts of your page have loaded. So, your page loads, and Hello Retail injects a row of products that will shift anything below some pixels corresponding to the injected products' height. In most cases, the recommendations are loaded fast enough so that the user hardly notices the shift. Nonetheless, you might still want to eliminate the shift either to pump up your user experience score when testing your site or because you want everything to be perfect — we get that.

How to fix layout shifts

In its essence, the fix is rather simple: if the space needed for the injected products is already allocated on your site before Hello Retail injects the products, the site will not shift. So the solution is to allocate the space in the HTML code on your site beforehand. But be aware that the size of the products is dynamic and depends on screen size, therefore it depends on platform, resolution, and anything else that might stretch or compress your shop on the users' screen. So allocating the correct amount of space before the products are injected requires a few steps to ensure the fix is working across all or most platforms. 

An example: on a desktop computer, when the products are injected, the height of the products could be 430 pixels. The fix is to allocate a height of 430 pixels on the DIV where the products are placed. Now the page will not shift when the products are loaded. But if a customer now visits your shop on a tablet, the screen's resolution will be different, changing the sizes of various components on your site — including the product recommendations from Hello Retail. So now the products are (for example) 300 pixels high, and the allocated space of 430 pixels will create 130 pixels of whitespace. Unfortunately, there's no robust technique to dynamically determine the products' height before they have loaded, so there's no magic code snippet that will solve the issue for all platforms/resolutions. But if you make changes to your code to catch a variety of resolutions, you can eliminate most visitors' issue.

An example

First of all, due to the nature of the issue, the fix has to be implemented in your shop's code. Hello Retail can't implement a fix in our own code as our code loads after your shop has loaded — and the whole issue is that the fix needs to be in place before Hello Retail loads. So you need to implement a platform/resolution-dependent solution that can cover a handful of common resolutions, and you will be covered in most cases.

The way to do it is to define a class with CSS, as in the example below. In the example, various "min-height" has been defined for specific screen resolutions so that the correct space is allocated depending on the device's resolution. The actual resolutions and corresponding "min-height" are just examples, and you will need to determine the values relevant to your shop. You can test the Product Recommendations' height after they have loaded by simulating various devices, for example, with the Chrome developer tools.

The class:

.hr-recom-cls{
     min-height: 460px;
}

@media only screen and (max-width: 600px) {
     .hr-recom-cls{
         min-height: 400px;
     }
}
@media only screen and (max-width: 720px) {
     .hr-recom-cls{
         min-height: 430px;
     }
}
@media only screen and (max-width: 1080px) {
     .hr-recom-cls{
         min-height: 450px;
     }
}

After you define the class, you add the class to each DIV where the Product Recommendations are loaded. Example:

<div id="hr-productbox-k5b749wb4ey555516e9a77dfbf" class="hr-recom-cls"></div>

 

As mentioned, this is not a complete solution. Still, if you include some common resolutions and input the corresponding minimum height, you will improve the CLS score and the user experience for most of your visitors.