Contents tagged “CLS”

Cumulative Layout Shift (CLS) is one of Google's Core Web Vitals, focused on unexpected movement of page content, annoying for users.

A layout shift occurs any time a visible element changes its position from one rendered frame to the next. […] Unexpected movement of page content usually happens because resources are loaded asynchronously or DOM elements get dynamically added to the page above existing content.

There are 12 contents with this tag:

Paul Hebert

Watch Out for Layout Shifts with ‘ch’ Units
- Nicolas Hoizey
- 31 May 2023
- WebPerf, Core Web Vitals, CLS, CSS
- 5 reactions
In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty…
Brendan Kenny

What's new in Lighthouse 10
- Nicolas Hoizey
- 10 February 2023
- Lighthouse, performance, CLS
- 2 reactions
The venerable Time To Interactive (TTI) metric is being removed in Lighthouse 10, with its 10% score weight shifted to Cumulative Layout Shift (CLS),…
- Nicolas Hoizey
- 27 January 2023
- CLS, Core Web Vitals, WebPerf
- 1 reaction
- permalink
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’”. 😞
- Nicolas Hoizey
- 14 October 2022
- CLS, Core Web Vitals, Lighthouse, WebPerf
- 4 reactions
- permalink
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?

-> https://github.com/GoogleChrome/lighthouse/issues/14449
Brian Louis Ramirez

Fallback Font Generator
- Nicolas Hoizey
- 27 September 2022
- WebPerf, font, CSS, CLS
- 32 reactions
Reduce Cumulative Layout Shift (CLS) by adjusting web fonts and system font fallbacks using special @font-face descriptors.
Hubert Sablonnière

Prevent layout shifts with CSS grid stacks
- Nicolas Hoizey
- 27 July 2022
- CSS, Grid, CLS, Core Web Vitals, WebPerf
- 22 reactions
I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links! 😎 No more layout shifts! Compared…
Jake Archibald

Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
- Nicolas Hoizey
- 11 July 2022
- image, responsive, CLS, Core Web Vitals, WebPerf
- 2 reactions
Layout shifts are a real annoyance on most sites, so please, read this new gem from Jake, about preventing images layouut shifts the right way… or…
- Nicolas Hoizey
- 28 June 2021
- CLS, Core Web Vitals, WebPerf
- 1 reaction
- permalink
Rhetorical WebPerf question: is it better to have a low or stable Cumulative Layout Shift? 😅
Barry Pollard

How To Fix Cumulative Layout Shift (CLS) Issues
- Nicolas Hoizey
- 2 June 2021
- CLS, Core Web Vitals, WebPerf
- 8 reactions
Barry shows here a few ways to prevent layout shifts and make your visitors happier. All of these techniques basically involve setting aside the correct…
- Nicolas Hoizey
- 26 May 2021
- CLS, Core Web Vitals, CSS, font, WebPerf
- 1 reaction
- permalink
Building a new site with the beautiful Coniferous web font from @OHnoTypeCo and I can't find the right "web safe" fallback font to be able to optimize Cumulative Layout Shifts. 😭

Any suggestion?
Simon Hearne

How to avoid layout shifts caused by web fonts
- Nicolas Hoizey
- 20 January 2021
- font, UX, CLS, Core Web Vitals, WebPerf
- 7 reactions
One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT). In this post we will explore the surprisingly…
Monica Dinculescu

Font style matcher
- Nicolas Hoizey
- 18 December 2018
- WebPerf, font, Core Web Vitals, CLS
If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont…

See all tags.