Table of contents
- 1. QuikRead
- 2. What is Cumulative Layout Shift?
- 3. What’s a good CLS score?
- 4. Does your CLS score affect your SEO?
- 5. Why you should worry about Cumulative Layout Shift
- 6. What is causing Cumulative Layout Shift?
- 7. Layout shifts in detail
- Layout shift score
- Impact fraction
- Distance fraction
- 8. Expected vs. unexpected layout shifts
- 9. How to measure CLS
- 10. Final Thoughts
- CLS is less than 0.1, which is a good sign.
- CLS between 0.1 and 0.25, needs to be improved.
- CLS greater than 0.25 is considered bad.
4. Does your CLS score affect your SEO?
5. Why you should worry about Cumulative Layout Shift
6. What is causing Cumulative Layout Shift?
- Images that do not have dimensions: When responsive Web design became popular, developers abandoned the use of ‘width’ and ‘height’ measurements in favor of resizing images with CSS. The issue here is that page space could only be reserved after the image had been downloaded, which could result in a major layout change as the image resized to match the viewport.
- Advertisements embed, and iframes with no measurements: This one is a bit more difficult to handle. Ads that trigger CLS can be dealt with by styling the element where the ad will appear. If you format the div to have unique heights and widths, for example, the ad would be limited to certain dimensions. If there is a shortage of supplies and an ad does not appear, there are two options. If an ad-containing feature does not display an ad, you may specify that an alternate banner ad or placeholder image be used to fill the space.
- Content that is inserted dynamically: Dynamically injected content includes YouTube videos, Google Maps, and compact social media updates. Since they don’t know how big the change would be, these embedded widgets can be unpredictable. For example, a social media post may include photographs, videos, and several lines of text, all of which can change over time. As a result, sites that have embeds don’t always assign enough room on the website, causing layout changes.
- FOIT/FOUT caused by web fonts (Flash of Invisible Text and Flash of Unstyled Text): Flash of invisible text (FOIT) and Flash of Unstyled Text (FOUT) can also be caused by downloaded web fonts. Using rel=”preload” in the download link for the web font will help avoid this. Lighthouse can assist you in determining the cause of CLS.
- Actions that wait for a network response before upgrading the DOM.
- CLS can infiltrate during development: During the development stage, a cumulative layout change can occur. What can happen is many of the assets required to render the page may end up in a browser’s cache. Since the design components have already been downloaded, the next time a developer or publisher views the page under development, they will not note a layout change. That is why doing measurement in the lab or in the field is beneficial.
7. Layout shifts in detail
Layout shift score
8. Expected vs. unexpected layout shifts
Layout adjustments initiated by the user
Transitions and animations
- Instead of changing the height and width properties, use transform: scale().
- To move elements around, avoid changing the top, right, bottom, or left properties and use transform: translate() instead.
9. How to measure CLS
CLS – Lab Data
- Chrome DevTools,
- Chrome Web Vitals extension.
CLS – Real User Data
- Google’s BigQuery,
- Google Data Studio,
- PageSpeed Insights,
- CrUX API,
- Google Search Console (Core Web Vitals report).
10. Final Thoughts
Some of our Magento 2 optimization Blogs
19 July 2021 | 8 min Read [...]
15 July 2021 | 5 mins read [...]
July 13, 2021 | 6 min read [...]
July 02, 2021 | 7 min read [...]
July 02, 2021 | 4 min read [...]
June 29, 2021 | 8 min read [...]
June 29, 2021 | 8 min read [...]
June 24, 2021 | 5 min read [...]
June 23, 2021 | 8 min read [...]
June 18, 2021 | 5 min read [...]