In 2021 (rumored to be January), Google is releasing a new search algorithm – The Page Experience algorithm. With new ranking factors like Web Core Vitals worked into the mix, this algorithm will be incorporating signals that speak to the user’s experience on their mobile device. As more information is learned of the new algorithm, one thing is clear: site owners must pay attention to how well users can navigate and interact with their site. Slow load time is a biggie, but also a seamless path from page to page and how easily it is to view the content.
What is it
Cumulative Layout Shift refers to the sudden and unexpected shifting on a mobile webpage, causing enormous user frustration. At least for me, the shift seems to happen at the very moment my finger touches the screen, often sending me to a different page (and higher blood pressure) altogether.
most common reasons and the solutions
Think of all the different areas of your blog article template. You have the content, some images, an e-mail subscribe button, buy buttons, an ad or two, social buttons, maybe a video and a content recirculation widget. They load and re-load at different times and depending the sizes and the layout, this might cause the page to shift.
Google gives us five most common reasons the shift.
1. Images without dimensions
The best practice here is to make sure your videos and images have a specified height and width tag attribute defined in the code. This is how it was originally done by developers but with the later introduction of responsive images came the use of CSS to resize images to fit a variety of screen sizes. The main problem with the image height and width setting at the time was that even if the image itself didn’t match those dimensions, the image would be forced into that space. In modern day, a lot of the image resizing is done through the browser as long as there are dimensions in the image tag.
Solution: make sure you images have a defined height and width.
Publishers and ad networks often support dynamic ad sizes. This means that one ad unit might hold two different ad sizes. When the ad refreshes and the size of the unit is different than the one prior, this can cause a shift on the page.
Solution: Google says sites can lesson these layout shifts by:
Statically reserve space for the ad slot.
Take care when placing non-sticky ads near the top of the viewport.
Avoid collapsing the reserved space if there is no ad returned when the ad slot is visible by showing a placeholder.
Eliminate shifts by reserving the largest possible size for the ad slot.
Choose the most likely size for the ad slot based on historical data.
More information on that can be found here.
3. Dynamically injected content
This is almost impossible to avoid if you’re loading anything other than content onto your pages. When certain elements stack on top of each other, like GDPR, cookie consent forms or newsletter banners, this can cause the page to shift.
Solution: One way for bloggers to manage this is to lazy load as much as possible.
What is a good cls score
Google gives the green light to anything .1 or below. If your CLS is between a .1 and a .25, that’s moderate and anything above a .25 is considered to be a poor experience.
It’s important to remember that ads aren’t the only reason for a high CLS but it is one of the most common. With the ads, it’s common for the creative to refresh after a set amount of seconds. This can also lead to shifting if there are multiple ad sizes that can fit in the same slot dimension on the page. For our SHE Media Partners, we have a CLS solution coming that will reduce the shifting to within the .1 range.
Knowing that this is one of the metrics that will become a Google ranking factor in 2021 means it’s time to focus on it now.