Overview
You’ve just landed on a web page and you try to click a certain element, but just before you do, an ad loads on top of it and you end up clicking that thing instead.
That…that’s a layout shift. Everyone, developers and users alike, know that layout shifts are bad. And the later they happen, the more disruptive they are to users. In this workshop we’re going to look into how web fonts cause layout shifts and explore a few strategies of loading web fonts without causing big layout shifts.
Objective
To learn how web fonts cause layout shift strategies of loading web fonts without causing big layout shifts.
Five Things Audience Members Will Learn
- What is CLS
- How is CLS calculated
- How can fonts cause CLS?
- Top strategies for minimizing CLS
- How Sentry can help you identify CLS
Target Audience
Frontend developers
