Minimizing Cumulative Layout Shift (CLS)

IN THIS ARTICLE

• Pre Load CSS Targeting
• Post Load CSS Targeting

Pre Load

Cumulative Layout Shift (CLS) measures how much the content on a webpage shifts or moves during the entire lifecycle of page rendering — or in other words — it measures the visual stability of the webpage.

If you are placing an In-Page Shareaholic App above the fold on a webpage, it is good practice to pre-size the app container canvas to eliminate CLS altogether by adding a few lines of CSS in your own site's local CSS stylesheet or in-line to pre-size the height -

In-Page Share Buttons Container:

.shareaholic-canvas[data-app="share_buttons"] {
   height: 54px;  // Customize height to match your app theme
}

In-Page Follow Buttons Container:

.shareaholic-canvas[data-app="follow_buttons"] {
   height: 54px;  // Customize height to match your app theme
}

In-Page Recommendations Container:

.shareaholic-canvas[data-app="recommendations"] {
   height: 530px;  // Customize height to match your app theme
}

If you have more than one theme of the same app type, you can target pre-sizing CSS code by App ID or App ID Name. App ID and App ID Name are unique for each In-Page App instance under a Site Profile.

For example, for the following In-Page container code:

<div class="shareaholic-canvas"
     data-app="share_buttons"
     data-app-id-name="post_below_content"
     data-app-id="12345"></div>

You can use the following:

.shareaholic-canvas[data-app-id="12345"] {
   height: 530px;  // Customize height to match your app theme
}

or

.shareaholic-canvas[data-app-id-name="post_below_content"] {
   height: 530px;  // Customize height to match your app theme
}

Post Load

It is also possible to target the Share Buttons container of each type. Note that these are available only once Shareaholic has loaded on the page -

Target Floated Share Buttons:

.shr-sharebuttons-floated {
   margin-left: 100px;
}

Target Image Share Buttons:

.shr-sharebuttons-image {
   padding: 100px;
}

Target In-Page Share Buttons:

.shr-sharebuttons-inpage {
   margin-top: 100px;
}

Target In-Page Follow Buttons:

.shr-followbuttons-inpage {
   margin-top: 100px;
}

Target In-Page Related Content / Recommendations:

.shr-recs-inpage {
   margin-top: 100px;
}

Target Recommendations Bar:

.shr-recs-bar {
   padding: 100px;
}

What is "above the fold"?

Above the fold content is the part of a web page shown before scrolling. Any content you'd need to scroll down to see is considered 'below the fold'.