We are always looking for ways to help you improve the experience viewers have on your website. Google has recently published their Web Vitals that define a few key metrics concerning viewer experience.

One of these metrics is CLS -- short for "cumulative layout shift". This attempts to quantify the amount of "jitter" that a viewer experiences on your site. When I say, "jitter", I'm talking about when the contents of your web page bounce around after loading. This typically happens because of things that are loaded after your page loads.

The biggest culprit in this regard is typically advertisements. These are loaded dynamically. And because they sometimes have variable heights, they can cause the layout of your contents to shift accordingly when they are loaded.

Slickstream also loads after your page. We do our best to minimize the "jitter" effect. And if you pay close attention, you'll see that on subsequent page loads by the same viewer, our widgets will appear almost instantly. But on the very first pageview by a given viewer, it can take a few seconds before our widgets appear. (If you are looking at Google test results for CLS, they always measure things for the very first pageview, so the problem can be exaggerated.)

Is there something you can do to improve CLS for your site?

Yes! To avoid delayed layout shifts, the best thing you can do is to preallocate space on your page for things that may be loading later.

For Slickstream, the main widget to consider is our recommendation filmstrip. Typically this is injected into the page below the banner and above your article. For most customers, we do the work to automatically inject this for you. 

To preallocate space for the filmstrip in your page template, insert an empty container and assign it a minimum height -- reserving the space we will need.

Here's what that container will look like in your revised page template:

<div style="min-height:72px;" class="slick-film-strip"></div>

After you make this change, let us know so that we can make sure your site configuration is updated accordingly.

After making this change, when your page loads, you will briefly see a blank space which we will then populate with the filmstrip. And your CLS scores should improve!

Note, if your website theme is Genesis based then with version 1.1.9 or later of the Slickstream plugin, there is a setting to add this container automatically.

Kingston Duffie

Written by Kingston Duffie

Kingston is the CEO/CTO of Slickstream.

Subscribe Here!