How to avoid CLS (Cumulative Layout Shift) when using ShareThis.com site plug-in.

Sharethis.com, along with AddThis.com and AddToAny.com, are the three biggest website bookmarking sites currently out there. As you've probably noticed, this site utilizes ShareThis.com. I can't talk about AddToAny as I've not used it, but AddThis and ShareThis do relatively the same functions and operations.

The problem with ShareThis is that improper usage of the site can cause Cumulative Layout Shift (C.L.S.). C.L.S. is when the content shifts when a site is loading in a browser. Google is now using C.L.S. as a ranking factor. If your site has a lot of shifting, then Google will penalize it in the rankings. Remember, where Google leads, the other search engines will follow, and other search engines will also penalize you.

If you use the "Inline Share Button" tool like what I've done here, it will cause a C.L.S. and hurt if not done correctly. The other forms of buttons, e.g. the sidebar, are not affected by this. You shouldn't remove it nor move to one of the other sites as they will probably have the same issue. The problem lies in the code that ShareThis tells you to add to your site where you want the buttons to appear. The code looks like this:-

<div class="sharethis-inline-share-buttons"></div>

The solution is to add a style, or as I have an outer division with a class so that when the browser is building the page, it knows how much space to reserve, so it doesn't need to shift the text later down and get you a penalty, So the above now becomes:-

.sharer {
    height: 50px;
    }

<div class="sharer">
    <div class="sharethis-inline-share-buttons"></div>
</div>

Be sure to put the CSS in the appropriate place and not immediately before the division. With that, any C.L.S. on your pages will not be caused by the ShareThis plug-in.

Tags - HTML

Last Modified : June 2023