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
Subscribe to my blog

Share This Article

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 at the top of the page.

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

   
   
Website
Visit Website
Rating
4/5 based on 1 vote.
Show Individual Votes
Tags , , , , , , , , ,
Related Listings
External Article: https://www.davidhboggs.com/demos/responsive-container.htm


E-mail:
Quick Reply
Name:
E-mail:
Subscribe to my blog:
Your Comment:


You may use BB Codes in your message.
Spam Prevention:


Members currently reading this thread:

Previous Article | Next Article