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?
Cropping Images with CSS While Keeping a Focal Point in the Center
This is a lovely way to deal with image crop and focal point with CSS only! 😍 And I love that Johannes put this warning in the beginning: While client-side…
Apparently, an image whose part above the fold is indeed the largest, but of which only a small part can be seen, can be considered an LCP element, even if another image has a larger part visible... 😭
You can see this for my photography site in this WebPageTest result:
https://www.webpagetest.org/vitals.php?test=230606_BiDcN4_4NJ&run=3&cached=0#lcp
Watch Out for Layout Shifts with ‘ch’ Units
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…
Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?
Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?
Limiting the image density on mobile devices drasticaly improves performance, with no visual loss, so we did it!
I still wish it was much easier than dealing with <picture> and x descriptors for fluid images… 😞
With a <img maxdensity="2.5" …> attribute for example!
If you agree, comment:
https://github.com/whatwg/html/issues/4421
Johannes Odland
Paul Hebert