https:/
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors.
I have a client site with a header that is hidden when the user scrolls down, but shown again when the user scrolls up, which seems pretty comon nowadays.
This triggers some CLS, even if the hide/show is done in less than 500 ms, as “continuous interactions such as scrolls, drags, or pinch and zoom gestures are not considered ‘recent input’”. 😞
The Right Way to Use fonts.com Web Fonts
Let’s talk about web fonts. More specifically, about a mistake I have seen developers make in several projects for different agencies: Embedding a web font in the wrong way.
Sam Magura
Why We're Breaking Up with CSS-in-JS
Thanks for reading this deep dive into runtime CSS-in-JS. Like any technology, it has its pros and cons. Ultimately, it's up to you as a developer to evaluate these pros and cons and then make an informed decision about whether the technology is right for your use case. For us at Spot, the runtime performance cost of Emotion far outweighed the DX benefits, especially when you consider that the alternative of Sass Modules + utility classes still has a good DX while providing vastly superior performance.
width and height attributes on <img> help prevent layout shifts (CLS). Values should be unitless integers.
But #Lighthouse sees 100% as 100, thanks parseInt()…
Do you think it should be improved?
a tool that automatically matches the fallback font to the custom font–because computers are good at that stuff.
Brian Louis Ramirez 
Matthias Ott
Malte Ubl