Hubert Sablonnière

Prevent layout shifts with CSS grid stacks

https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/

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 to the absolute position solution, we improved the situation:

• No need to add a .wrapper
• Would work fine with more than two panels
• No need to assume which panel needs to guide the whole component size

• older link:
  Hydration is Pure Overhead
• newer link:
  Some personas - Orange digital accessibility guidelines

---

Related contents with similar topics

1. • Nicolas Hoizey
   • 21 March 2023
   • Core Web Vitals, Google, WebPerf
   • 3 reactions
   • permalink

   Looks like Google likes it when we start improving websites performance! 🚀

   

2. • 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’”. 😞

3. 

   Kevin Farrugia

   Priority Hints and optimizing LCP

   • Nicolas Hoizey
   • 3 January 2023
   • WebPerf, priority, LCP, Core Web Vitals
   • 2 reactions

   Increasing the priority of a resource usually comes at the cost of another resource, so Priority Hints should be used sparingly. However, if the browser is queuing your LCP image, I recommend you experiment with Priority Hints to see if you can reduce this waiting time and improve your LCP.

4. 

   Matthias Ott

   The Right Way to Use fonts.com Web Fonts

   • Nicolas Hoizey
   • 21 December 2022
   • font, WebPerf, CSS
   • 1 reaction

   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.

5. • Nicolas Hoizey
   • 12 December 2022
   • Core Web Vitals, WebPerf
   • 3 reactions
   • permalink

   Of course we don't work on performance improvements only for Google, but the Search Console is our clients' main concern, so when it shows such a graph, it's satisfying for everyone! 🎉