Company
Date Published
Author
Salma Alam-Naylor
Word count
1860
Language
English
Hacker News points
None

Summary

Cumulative Layout Shift (CLS) is a Core Web Vital that measures unexpected layout shifts on web pages, which can cause users to accidentally interact with elements they didn't intend to. CLS scores are measured on a decimal scale, with good scores being 0.1 or less and poor scores greater than 0.25. To avoid CLS, developers can include width and height attributes on image elements, provide placeholder elements for dynamic content, use the CSS `@font-face` rule to minimize font file loading shifts, and simulate slower internet connectivity during development. The Performance tab in Chromium browsers can help identify layout shifts and their associated scores, while a new experimental tool called "Performance Insights" provides quicker identification of CLS issues. CLS is not just limited to foreground elements, but also affects background page elements that may not shift UI content. To discover CLS in production, developers can use Sentry to capture performance data from real users and analyze it to identify top sources of CLS. By addressing these issues, developers can prevent the cumulative effect of performance issues and focus on building better user experiences.