Как GitHub повысил производительность, добавив больше CSS – и как вы можете сделать то же самое
В смелом инженерном шаге GitHub недавно подробно описал свой полный переход от CSS-in-JS к написанному вручную, хорошо структурированному чистому CSS. Результат? Резкий скачок скорости сайта и улучшение пользовательского опыта. Это не возврат к старым методам; это тщательно продуманная стратегия, которая доказывает: добавление большего количества CSS на самом деле может ускорить ваш сайт. В этом глубоком погружении мы разберем путь GitHub, технические обоснования, прирост производительности и то, как такие инструменты, как DivMagic, делают этот подход доступным каждому фронтенд-разработчику.
CSS-in-JS произвел революцию в нашем подходе к изолированным стилям и компонентной архитектуре, но он имел скрытые издержки. Внедрение стилей во время выполнения, увеличенные пакеты JavaScript и более медленное время парсинга побудили многие высоконагруженные сайты пересмотреть свои стратегии стилизации. GitHub, одна из самых посещаемых платформ для разработчиков в мире, решила изменить подход: убрать уровень абстракции и с самого начала предоставлять легковесные статические CSS-файлы.
Парадокс производительности CSS-in-JS
Долгие годы команды использовали библиотеки CSS-in-JS, такие как styled-components или Emotion, из-за преимуществ для разработчиков: автоматический критический CSS, изоляция, динамические стили и совместное размещение. Но по мере масштабирования приложений эти преимущества часто имеют свою цену.
| Approach | Initial Render | Bundle Impact | Maintenance |
|---|---|---|---|
| CSS‑in‑JS | JS must parse style objects first | Adds runtime + CSS in JS bundle | Tight coupling, harder to refactor |
| Plain CSS (GitHub) | Browser parses CSS immediately | Smaller JS, CSS loaded separately | Class naming conventions, reusable |
| DivMagic | Extract exact UI from any site | Zero runtime, clean CSS output | Instant copy, then customize |
Таблица выше показывает разительный контраст. Собственный анализ GitHub показал, что размер JavaScript-пакета был раздут из-за кода времени выполнения CSS-in-JS и определений стилей, которые могли быть статическими. Хуже того, эти стили должны были быть распаршены и внедрены JavaScript до того, как браузер мог начать отрисовку, что задерживало First Contentful Paint (FCP) и Largest Contentful Paint (LCP).
Переместив все стили в отдельные CSS-файлы, GitHub устранил накладные расходы времени выполнения. Браузер мог загружать и парсить CSS параллельно с HTML, разблокируя рендеринг. Показатели Core Web Vitals сайта улучшились по всем направлениям, что является критическим фактором как для пользовательского опыта, так и для SEO.
Миграция: больше CSS, но более умный CSS
Инженерная команда GitHub – Джош Блэк и Мари Люкка – описали свой процесс в подробной записи в блоге. Вместо полной перезаписи они выбрали стратегию компонент за компонентом, преобразуя каждый элемент интерфейса из CSS-in-JS в чистый CSS, сохраняя при этом нулевое время простоя.
Это может показаться нелогичным: как можно добавить больше CSS, но уменьшить полезную нагрузку? Ответ кроется в удалении мертвого кода и разделении критического CSS. В мире CSS-in-JS многие стили генерировались динамически, часто включая недостижимые правила или чрезмерно специфичные селекторы. Проведя аудит фактической поверхности интерфейса, GitHub удалил неиспользуемые стили и использовал такие инструменты, как PurgeCSS, для удаления всего, что не отображается на текущей странице.
Команда также вложила значительные средства в надежный конвейер сборки, который мог выполнять tree-shaking CSS так же, как и JavaScript. Они внедрили этап «встраивания критического CSS», который извлекает стили, необходимые для контента «над сгибом», и встраивает их в <head>, в то время как остальное загружается асинхронно. Этот шаблон, известный как «прогрессивная загрузка CSS», гарантировал, что страница становится интерактивной быстрее без мерцания нестилизованного контента.
Показатели производительности, которые говорят сами за себя
Миграция GitHub улучшила не только синтетические бенчмарки; данные реального мониторинга пользователей (RUM) рассказали ту же историю. Давайте посмотрим на несколько ключевых цифр:
- Largest Contentful Paintулучшился на 34%, перейдя из категории «требует улучшения» в «хорошо» по шкале Core Web Vitals от Google. -Time to Interactiveстал на 25% быстрее, что означает, что пользователи могли взаимодействовать со страницей раньше. -Размер CSS-полезной нагрузкиснизился на 40%, несмотря на переход от стилей, генерируемых JS, к статическим файлам. -First Input Delayпочти исчез для большинства сессий, так как главный поток стал менее загружен вычислениями стилей.
Эти улучшения были не просто техническими победами; они напрямую привели к лучшему вовлечению и снижению показателя отказов на github.com.
«Мы были удивлены, насколько простое удаление абстракции CSS-in-JS улучшило наш конвейер рендеринга. Браузер умеет эффективно обрабатывать CSS – нам просто нужно было позволить ему делать свою работу.» – Инженерная команда GitHub
Почему это важно для каждого фронтенд-разработчика
Вы можете подумать: «Я не управляю платформой размером с GitHub, так зачем мне это?» Ответ в том, что те же принципы применимы в любом масштабе. CSS-in-JS вводит зависимость, которая может замедлить ваш сайт на сотни миллисекунд – а в веб-производительности каждая миллисекунда на счету.
Современные браузеры невероятно оптимизированы для парсинга чистого CSS. Они могут создавать CSSOM (объектную модель CSS) в отдельном потоке, эффективно кэшировать его и применять к DOM, не прерывая выполнение JavaScript. Когда вы генерируете стили через JavaScript, вы нарушаете этот конвейер и заставляете браузер ждать.
Как DivMagic вписывается в рабочий процесс с чистым CSS
Воссоздание точных стилей сложного UI-компонента может быть утомительным и чреватым ошибками процессом. Вот гдеDivMagicстановится революционным инструментом. Как расширение для браузера, DivMagic позволяет скопировать любой элемент интерфейса с любого сайта и мгновенно получить чистый, многократно используемый CSS и HTML. Вместо того чтобы инспектировать элементы и собирать стили по частям, вы можетескопировать весь внешний вид одним кликом.
Представьте, что вы обнаружили красиво оформленный компонент карточки на сайте конкурента. С помощью DivMagic вы выбираете элемент, и расширение извлекает точные CSS-правила – никакого JavaScript, никакого времени выполнения, только нужные вам стили. Затем вы можете вставить их в таблицу стилей вашего проекта, настроить имена классов и придерживаться вашей дизайн-системы.
Это идеально соответствует философии GitHub по доставке большего количества CSS (хорошего качества) без накладных расходов. DivMagic генерирует готовый к производству CSS, который является статическим, поддается tree-shaking и полностью находится под вашим контролем. Он обходит необходимость в промежуточных слоях CSS-in-JS, позволяя вам создавать быстрые и легковесные интерфейсы.
За пределами копирования: создание библиотеки компонентов
Многие разработчики используют DivMagic как исследовательский инструмент. Они собирают UI-паттерны с лучших продуктов, изучают CSS-архитектуры и адаптируют их в свои собственные библиотеки компонентов. Поскольку вывод представляет собой чистый CSS, он бесшовно интегрируется с любым фреймворком – React, Vue, Svelte или ванильным HTML.
| Task | Traditional Method | DivMagic Method |
|---|---|---|
| Extract a button style | Inspect element, copy dozens of CSS rules, test | 1‑click copy, get clean CSS |
| Build a design system | Write from scratch or import bloated library | Collect real‑world examples, refine |
| Performance optimization | Profile, strip unused styles manually | Copy only the styles you use, no runtime |
Уроки миграции GitHub
Если вы рассматриваете аналогичный переход от CSS-in-JS, вот несколько практических выводов:1. Проведите аудит существующих стилей– Запустите такие инструменты, как PurgeCSS, или вручную проверьте, какие правила реально используются в продакшене. Вы часто обнаружите 30–50% неиспользуемого CSS. 2.Примените подход критического CSS– Встройте минимальные стили, необходимые для первой отрисовки, а остальные отложите. Такие инструменты, как Critical или кастомные плагины Webpack, могут автоматизировать этот процесс. 3.Используйте CSS-переменные– Они уменьшают повторение и делают настройку тем тривиальной. Отличный пример — новая система дизайн-токенов GitHub. 4.Используйте BEM или функциональный CSS– Выберите схему именования, которая предотвращает конфликты без изоляции во время выполнения. 5.Тестируйте постепенно – Мигрируйте по одному компоненту за раз и отслеживайте производительность с помощью Real User Monitoring.
«Самым большим откровением стало то, что обычный CSS при хорошей организации масштабируется гораздо лучше, чем мы когда-либо представляли, — даже на таком сложном сайте, как GitHub».
Примите простоту
История успеха GitHub — это мощное напоминание о том, что иногда лучший инструмент — это тот, который браузеры уже отлично понимают. Поставляя больше CSS — тщательно проработанного, очищенного и разделённого, — они подарили своим пользователям более быстрый и плавный опыт, упростив при этом собственный стек разработки.
С DivMagic эта простота теперь доступна каждому проекту. Вы можете избежать трений CSS-in-JS, извлекать любой понравившийся UI и сосредоточиться на создании отличного пользовательского опыта. В следующий раз, когда вы собираетесь import styled from 'styled-components', спросите себя: может ли обычный CSS сделать это лучше? Ответ может быть просто «да».
