https:/
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.
For over a decade, we had to use silly hacks to manually apply an aspect ratio, and then, bloody typical, two better solutions arrived at roughly the same time. They are CSS
aspect-ratio, andwidth&heightpresentational hints.
Seriously, do we need yet another version of Low Quality Image Placeholders?
Why do some people want to do additional work just to show useless colourful pixels to users, delaying the rendering of the actual image?
As a user, I hate LQIP. Single colour backgrounds are fine, though.
Looks like Google likes it when we start improving websites performance! 🚀
According to the results presented above, we can conclude that JXL is the superior format for both lossy and lossless operations. That is clear by only looking at the results, but we can also have a look at the features of each format. Some of them are very important.
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’”. 😞
Priority Hints and optimizing LCP
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.
Jake Archibald