Reducing Jitter and Improving CLS

CLS is a key metric of Google's Web Vitals.  Slickstream's static Filmstrip may contribute to CLS but that can be addressed using the Slickstream plugin for WordPress or by manually adding a container to your site.

What is CLS?

CLS is 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.  Check your ad partner's settings as many now have CLS optimizations that can be enabled.

Slickstream also loads after your page, and one the components, the static recommendation Filmstrip, may contribute to CLS.

How to mitigate CLS?

If you use the Slickstream plugin CLS issues are resolved automatically - no manual intervention required. For those that do not use the plugin, the solution is to pre-allocate space for the filmstrip when your page first loads. 

To pre-allocate space for the filmstrip in your page template, you can manually add the following container to your site.

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

As soon as you make this change, we will detect the presence of the container and immediately start injecting the filmstrip into it.  So, no action is needed on your part beyond adding the container.