What is Cumulative Layout Shift (CLS)?
Simply put, CLS is the shifting of elements – including fonts, buttons, forms, images, videos – on a web page while the page is still loading for the user. In measuring it, Google is looking for the amount of visual stability, and quantifying the unexpected amount of CLS as a web page loads.
An ideal measurement is less than 0.1.
And why is minimising CLS important?
Every time a web page loads and elements shift around it creates a poor experience for the user, dragging their eyes across the screen and making it difficult to settle the mouse pointer accurately.
Why does CLS occur?
Google states that there are five main reasons that websites experience CLS, namely:
- Images without dimensions
- Adverts, embeds and iframes without dimensions
- Dynamically-injected content
- Web Fonts causing FOUT (Flash Of Unstyled Text) and FOIT (Flash of Invisible Text), largely associated with custom fonts
- Actions awaiting network response before updating DOM (Document-Object Model)
CLS most-often results from actions during the coding process of a website, with many of the assets required to make up a page’s layout loaded onto a browser’s cache. This means that the next time a developer or publisher visits the page under development they won’t notice a layout shift because the page elements are already downloaded.
To ensure this doesn’t happen and that they can spot any CLS and adjust the page accordingly, developers will need to clear their cache and re-load the page.
CLS as part of Google’s Core Web Vitals
Core Web Vitals are three measurements within Search Console that measure good user experience, and include CLS, Large Contentful Pain (LCP) which measures perceived load speed, and First Input Delay (FID) which measures responsiveness and quantifies the experience users feel when first engaging with a web page.
Ideally, a website should have a LCP score of 2.5 seconds or faster, and a FID score less than 100 seconds. Within Search Console website owners and managers will be able to asses these on their own websites, with scores rated as Poor, Needs Improvement or Good.
To improve scores across the board for the Core Web Vitals, Google recommends:
- Reducing page sizes to less than 500KB
- Limiting the number of page resources to a maximum of 50
- Using Accelerated Mobile Pages (AMP) – an open-source project aimed at making mobile pages load as fast as possible
To get help with your website development, measuring optimisation and ensuring the best user experience speak to one of the experts at Realnet today on 01223 550800 or info@realnet.co.uk.