GitHub ускорил сайт, заменив CSS‑in‑JS на статические стили
GitHub полностью отказался от CSS‑in‑JS, перешёл к доставке большего объёма статических CSS‑файлов и сократил время загрузки страниц на 30 %.
В новой статье блога GitHub Engineering команда рассказала о масштабном рефакторинге фронтенда GitHub.com: они полностью мигрировали сайт от подхода CSS‑in‑JS к традиционной доставке статических CSS‑файлов. По словам инженеров, CSS‑in‑JS добавлял лишний JavaScript‑парсинг и увеличивал время первого рендера, особенно на медленных соединениях.\n\nДля перехода команда использовала автоматизированные миграционные скрипты, которые извлекали стили из компонентов, группировали их по страницам и генерировали отдельные CSS‑бандлы. В результате объём CSS, отправляемый клиенту, вырос с 120 KB до 260 KB, но общий размер JavaScript‑пакетов сократился более чем на 500 KB.\n\nКлючевые метрики после релиза: среднее время до первого контента (FCP) упало с 1,8 с до 1,2 с, а показатель Largest Contentful Paint (LCP) улучшился на 30 %. Кроме того, количество запросов к серверу уменьшилось на 15 % благодаря более эффективному кэшированию CSS‑файлов.\n\nКоманда также внедрила новые CI‑проверки, чтобы гарантировать, что новые изменения не вернут старый подход. Статью с подробным описанием миграции и измерениями эффективности можно прочитать на официальном блоге GitHub: https://github.blog/engineering/architecture-optimization/improving-site-performance-by-shipping-more-css/
Для разработчиков это сигнал, что стоит переосмыслить использование CSS‑in‑JS в проектах, где критична производительность. Статические стили упрощают кэширование и снижают нагрузку на клиент, но требуют более строгой организации CSS‑кода.
