Concept: Cumulative Layout Shift (CLS)
How frustrating is it when you’ve just landed on a web page, you click on a certain element and an ad or something else pops up and you end up clicking that thing instead? That’s a layout shift, which is bad for the user’s experience and the later they happen, the worse it is.
How to fix or minimize CLS? Check out this great article by Sentry:
- Don’t use a web font
- Use fewer font files
- Use a variable size font
- Host your own fonts
- Use a woff2 font format
- Use the font-display property
- Define a fallback font with font descriptors