Experiencing Google Cumulative Layout Shift (CLS) Issues?
You'll find any CLS issues in the Core Web Vitals tab in Google Search Console
Hmm... that's not looking too good
We're going to need to run a Lighthouse Audit in Chrome Stable to investigate further
Now lets see which elements are causing layout shifts
Using DevTools, we can also see highlighted elements on the page that are shifting
Lets get those CLS issues fixed and ready for 2021
Web Story Summary:
Cumulative Layout Shift (CLS) is a Core Web Vital which will become a ranking input
starting in 2021
. Use the 'Core Web Vitals' report in Google Search Console to see how pages on your site are performing. Perform testing in Chrome DevTools (now available in
Lighthouse
with Chrome Stable ) to locate elements that trigger a shift.
1.
Learn about the impact of Infinite Scroll on Cumulative Layout Shift
2.
Generate a GIF to show how shifts happen across different devices
3.
Create lightning fast comparison tables for CLS, FID, LCP & FCP
4.
Aggregate Lighthouse Reporter template in Google Data Studio
5.
Measure Core Web Vitals of websites in Google Sheets
More on Cumulative Layout Shift
Here's a list of my favourite (and free) CLS resources:
Created by Brodie Clark
Australian SEO Consultant