From e426e529747be98c3696af4f7bcdac01fd276a0b Mon Sep 17 00:00:00 2001 From: wbamberg Date: Mon, 13 May 2024 22:01:09 -0700 Subject: [PATCH] Fix issue 033506: add a page on CLS --- files/en-us/glossary/cls/index.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 files/en-us/glossary/cls/index.md diff --git a/files/en-us/glossary/cls/index.md b/files/en-us/glossary/cls/index.md new file mode 100644 index 000000000000000..fa305c7672e896d --- /dev/null +++ b/files/en-us/glossary/cls/index.md @@ -0,0 +1,19 @@ +--- +title: Cumulative Layout Shift (CLS) +slug: Glossary/CLS +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Cumulative Layout Shift (CLS)** is a usability metric for websites, designed by Google as one of the [Core Web Vital](https://web.dev/explore/learn-core-web-vitals) metrics. + +It measures the extent to which users encounter unexpected layout shifts, in which elements of the page are moved in an unexpected way: that is, that are not the result of a user action like pressing a button or part of an animation. + +Layout shifts may be caused, for example, by {{htmlelement("img")}} or {{htmlelement("video")}} elements that are not given `width` and `height` attributes, so the browser doesn't know how much space they will occupy until they are loaded. + +The {{domxref("LayoutShift")}} interface, part of the [Performance API](/en-US/docs/Web/API/Performance_API), can be used to measure individual layout shifts, which can then be used to calculate the CLS score for a web page. + +## See also + +- [CLS](https://web.dev/articles/cls) on web.dev