Hacker News Reader

This makes me want to write a post about the rabbit hole that is icon optimisation. It drives me insane when websites suffer from layout shift simply because they are not inlining their icons, for one.

View on HN

I agree with your comment, it is often an overlooked topic. Inlining icons can be one answer but be aware of the growing size of your DOM. Depending on the complexity, number and repetition of the icons you are using, an approach including lazy loading can be better. Layout shift is first and foremost caused by an improper space reservation.

I believe setting width/height is a good fix here, although I see aspect ratio suggested as well. Inlining icons would prevent caching.

https://web.dev/articles/optimize-cls#history_of_width_and_h...

Reply on news.ycombinator.com