In this
B2B Digital Marketing Hub episode, we break down everything you need to know about CLS, or Cumulative Layout Shift. CLS measures visual stability and has been a ranking factor since 2021 as part of Google’s Core Web Vitals. We’ll explain what CLS is, why it matters for user experience, and how it impacts your website's SEO performance.
We’ll also explore common causes of high CLS values, such as improperly defined image dimensions, dynamic content, and external ads. Understanding these factors is key to identifying and resolving CLS issues.
Finally, we’ll share practical
tips for optimizing CLS, from using the CSS Aspect Ratio feature to pre-defining dynamic content. Whether you're a web developer or
an SEO professional, this episode provides actionable insights to improve your site's performance.
Chapters:
(
00:00) Intro to What is CLS and what does it stand for?
(
01:24) What causes a high CLS value?
(
01:59) How can we pre-define image dimensions in a responsive web design?
(
02:51) What else can be done to improve CLS scores?
(
03:49) Outro on Cumulative Layout Shift
What is B2B Digital Marketing Hub?
Welcome to the B2B Digital Marketing Hub, your one-stop destination for mastering the art and science of B2B digital marketing. Our podcast is designed specifically for B2B professionals seeking to elevate their marketing skills and outpace the ever-changing market demands.
In each episode, we delve into key concepts of B2B marketing, from SEO and Account Based Marketing to Content Marketing and Social Media strategies. We provide you with hands-on exercises, practical tools, and proven methodologies that will help you elevate your customer experience, leverage precise B2B targeting, and achieve your marketing goals.
Whether you're a seasoned professional or a newcomer to the B2B digital marketing world, our podcast is designed to take your knowledge to the next level. So, tune in, subscribe, and join us on this journey to become a B2B digital marketing master; visit our website at https://www.b2bdigitalmarketinghub.com/.
Our podcast is not just about learning; it's about applying what you've learned. We offer custom workshops that are carefully crafted to help you become a master in your desired field of B2B digital marketing. Whether you're interested in enhancing your SEO skills, developing engaging B2B content, or executing innovative audience-centric digital marketing campaigns, we've got you covered.
We believe in interactive, hands-on learning. Our episodes provide access to world-class marketing training from some of the top experts in the industry. We guide you in building a professional digital strategy, defining measurable goals and tangible KPIs, and recognizing common pitfalls to avoid.
For more information, visit our website at https://www.b2bdigitalmarketinghub.com/ or contact us on LinkedIn https://www.linkedin.com/company/b2b-digital-marketing-hub/
Hello and welcome to all our listeners tuning in from around the world. You're listening to the B2B Digital Marketing Hub. You're all in one hub for everything you need to know about B2B marketing in the digital age. In this podcast, we bring you a powerful blend of proven marketing methodologies, hands on exercises, and practical tools that equip you and your company to thrive amidst the ever changing demands of the B2B market.
What is CLS and what does it stand for?
CLS stands for “Cumulative Layout Shift”. It is a ranking factor and can be found in the core web vitals report in google search console. CLS measures a user experience (UX) event and became a ranking factor in 2021. It is a google term and refers to the instability of the user’s display of a webpage. High CLS values may occur when the webpage display is unstable. The metric indicates whether or not the page loads according to what the user expectations are.
What causes a high CLS value?
– Image dimensions: images that do not have a pre-defined display size.
– External elements: ads, iframes, external applications that do not have a predefined display size.
– Dynamic content: For example, content created dynamically by JavaScript code.
– Network font: For example, the definition of a font from an external site that changes the font text after it has been downloaded.
How can we pre-define image dimensions in a responsive web design?
– First, define the default width and height for all site media, images and videos and also for tables, iframes and external objects/elements.
– Use the CSS Aspect ratio feature that allows you to check in advance for the ratio between the object that was defined for height and width, and match them to the actual width of the screen while maintaining the same ratio.
If your site is defined with 100% image width and Auto height, which is the method used by many responsive websites, your browser will know ahead of time which height to define for a specific image. The method works well even if your site is using responsive Imaging in tandem with SRCSET. Note that this method works only for images.
What else can be done to improve CLS scores?
– Pre-define all dynamic content (for example responsive google ads). banners that appear suddenly and push the text around are exactly the kind of changes that negatively affect CLS scores.
– Ads can be isolated by using external DIV while pre-defining height and width to provide a better UX.
– Avoid adding new content above content that has already been loaded. This can be done only if the additional content was added as a result of user-action.
Inter-Dev is a leading B2B Digital Marketing agency specialized in Search Engine Optimization & PPC for start-ups, SEO for cybersecurity companies, medical device companies, technology companies, e-commerce websites and industrial B2B companies. We have over a decade of experience in helping companies achieve their lead generation goals.
Thanks for tuning into the B2B Digital Marketing Hub, your go to hub for all things B2B marketing in the digital age. If you enjoyed today's episode and want to stay up to date with our latest insights and trends, make sure to hit that subscribe button. Or follow us on your favorite podcast platform.