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