Avoid Cumulative Layout Shift (CLS) with responsive containers

Avoid Cumulative Layout Shift (CLS) with responsive containers
By
21 January 2021 (Edited 15 February 2021)

Google will begin to use Cumulative Layout Shift (CLS) as a search ranking signal in May 2021

If you've read my last previous post you know that in May Google will begin using Cumulative Layout Shift (CLS) - the proportion of a web page impacted by the sum of all layout shifts, and the distances that elements are moved - as a search ranking signal.

A major contributor to CLS is the shifting of page elements that occurs when the loading of image files lags that of text and other faster-loading content, causing images suddenly to jump into the page layout and displace elements already displaying.

You can avoid those layout shifts by placing images and any other slower-loading elements in responsive containers - built with CSS and HTML - that load quickly and reserve space for the slower-loaders.

Go here to view a demo of responsive containers and get the code.

Ensuring that web pages comply with Google's guidelines for Cumulative Layout Shift and other Core Web Vitals is a component of Technical SEO. Learn more about technical SEO.


If you found this article helpful and would like to see more like it, please share it via the Share This Article link, below.

And if you have questions or comments, you can easily send them to me with the Quick Reply form, below, or send me an e-mail.


David Boggs    - David
David@DavidHBoggs.com
View David Boggs's profile on LinkedIn

Google Certifications - David H Boggs
View my profile on Quora
Subscribe to my blog

External Article: https://www.davidhboggs.com/demos/responsive-container.htm


Subhead Google will begin to use Cumulative Layout Shift (CLS) as a search ranking signal in May 2021
Website
Visit Website
Rating
4/5 based on 1 vote.
Show Individual Votes
Tags , , , , , , , , ,
Related Listings

Sorry, you don't have permission to post comments. Log in, or register if you haven't yet.

Please login or register.

Members currently reading this thread: