I use my own site's search every day, mostly because the links I put here are useful very often. 🤩
For example, multiple resources about layout shifts (aka CLS in Core Web Vitals):
https://nicolas-hoizey.com/archives/?query=layout shift
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 8 contents with this tag:
-
-
Prevent layout shifts with CSS grid stacks
I keep sending people this clever solution provided by Hubert, I wonder why I still didn't add it to my links!
-
Avoiding <img> layout shifts: aspect-ratio vs width & height attributes
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 the right ways actually.
-
Rhetorical WebPerf question: is it better to have a low or stable Cumulative Layout Shift? 😅
-
How To Fix Cumulative Layout Shift (CLS) Issues
Barry shows here a few ways to prevent layout shifts and make your visitors happier.
-
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?
-
How to avoid layout shifts caused by web fonts
One common cause of layout shift is surprisingly difficult to resolve though: flashes of unstyled text (FOUT).
-
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 that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths. This tool helps you do exactly that.
Hubert Sablonnière
Jake Archibald
Barry Pollard
Simon Hearne
Monica Dinculescu
See all tags.