При разработке новой домашней страницы GitHub ребята столкнулись с проблемой — в коде не было явного перечисления анимируемых свойств
transition: * 0.6s ease;, что приводило к повышенному потреблению CPU. Для решения этой проблемы они стали анимировать только opacity и transform: transition: opacity 0.6s ease, transform 0.6s ease;.Внизу страницы находится большое изображение с прозрачностью. Самым оптимальным форматом для хранения этого изображения лучше всего подошёл WebP. В качестве фоллбека воспользовались SVG с маской. Благодаря такому подходу удалось сэкономить несколько сотен килобайт.
Интересная статья. Рекомендую заглянуть.
#performance
https://github.blog/2021-01-29-making-githubs-new-homepage-fast-and-performant/
