The average reader will spend about 15 seconds on a website before clicking away so you need to make a great first impression. Your ad experience plays a huge role in this as poorly designed or distracting layouts can deter a user. On the other hand, if your ad monetization mix includes advertising, you need to use that precious above-the-fold space to drive revenue. How to balance all that?
Let’s dive into the basics of how to create a delightful, premium user experience by not obscuring site content with custom-fit Skins. We’ll cover the basics of a CLS score and how that impacts your SEO rankings, as well as how to maintain a good one with responsive, multi-unit Skins.
What is cumulative layout shift and CLS score?
Is there anything more annoying than landing on a site, trying to click on a box, or view an element only to have it jump down once the page fully loads?
Cumulative Layout Shift (or CLS) is a metric Google has devised to measure how much a webpage unexpectedly shifts during its life and it is one of the Core Web Vitals ranking factors. The larger the jump or shift, the larger the CLS score – and a large score is not good news! CLS impacts not only the user experience but also your search engine ranking.
Why do layouts shift on a page? Usually, different content elements on a page load at different times. Think video players, banner ads, images, fonts, contact forms, and so on. According to Google, there are five main reasons you’ll experience a cumulative layout shift:
- Dynamic content on the site (like a Youtube or Twitter embed)
- Images without dimensions
- Embeds, iframes, and ads without dimensions
- Actions waiting for a network response before loading the site
- Loading of web fonts
How does Google calculate the CLS score?
The CLS score consists of two factors: impact fraction and distance fraction. Impact fraction refers to the size of the unstable element (aka: the section that causes the page to move) compared to the viewport or the area in view on the page. Distance fraction is the percentage amount the unstable element moves as a ratio of the viewport.
So, for example, if the element takes up 60% of the viewport and moves 30% we would sum 0.6 + 0.3 together for 0.9. This is the impact fraction score.
We’ll then multiply 0.9 x 0.3 (how much the element moved) to get the CLS score of = 0.18.
In short, a high CLS score means a large element is moving a long distance whereas a small CLS score is having a small element moving very little. Of course, the smaller the score, the better, and the goal is to keep it below 1.
How Multi-Unit Skins help maintain a low CLS score
While we know that Skins (at least in the short history of digital advertising!) have been a controversial ad unit, Celtra’s Multi-Unit Skins were built to strike that coveted balance between high-impact and user-friendly. Because the ad product is fully responsive, it automatically adapts to the screen when a browser window is resized. This does wonders to your CLS score as you won’t experience those unnerving jumps and shifts when running this takeover.
The experience is custom-built for each publisher to ensure that it fits perfectly on the page without compromising the integrity of the site design. By switching to Skins, you can swap out intrusive ad product experiences like Interstitials for a beautiful yet effective takeover that won’t disrupt the viewer’s experience.
Multi-Unit Skins power experiences that drive higher viewability rates for advertisers and friendly user experiences for publishers. You can now build, traffic, and track this in-demand format using the same end-to-end workflow and a wide array of creative features available for all other Celtra Rich Media formats.
Celtra for Media – now with multi-unit Site Skins
Celtra for Media is the market-leading creative software for media owners and operators. The suite enables greater media monetization with a premium suite of ad products. It provides a robust toolbox to create, traffic, and track unique ad experiences that win RFPs and drive results to meet advertiser KPIs.
We offer both templated and bespoke ad building solutions to fit the needs of your publishing business and ad monetization strategy. Talk to sales today to learn more.
Not quite ready to get in touch? Check out our Creative Insights Report to learn what ad formats and experiences are spearheading engagement and results!