Внедрение критических стилей и разделение CSS по шаблонам

Текущая ситуация

• Есть глобальный файл style.css, который содержит все стили сайта.

• Реализована возможность инлайнить критические стили (critcss) в HTML.

• Весь CSS грузится на всех страницах, даже если значительная часть стилей не используется.

Что нужно сделать

1. Выделить глобальные критические стили

   • Создать global-critcss.css с минимальным набором стилей для базовых элементов, видимых на первом экране (header, общая сетка, базовая типографика).

   • Этот файл инлайнится на всех страницах.

2. Выделить критические стили для разных шаблонов

   • Для каждого шаблона (главная, статья, каталог и т.д.) сделать свой файл критических стилей:

     • template-home-critcss.css

     • template-article-critcss.css

     • template-catalog-critcss.css

   • Эти файлы будут инлайнится после global-critcss.css в зависимости от шаблона.

3. Разделить полный CSS на базовый и шаблонные файлы

   • Сохранить style.css как базовый файл с общими стилями, которые используются на всех страницах:

     • базовая типографика,

     • глобальные сетки и layout,

     • общие UI-элементы,

     • header, footer, навигация, формы, переменные, сквозные блоки

   • Создать отдельные CSS для уникальных стилей каждого шаблона:

     • template-home.css

     • template-article.css

     • template-catalog.css

   • В шаблонных файлах только уникальные стили блоков, которые не используются на других страницах.

4. Логика подключения

   • При генерации HTML:

     1. Inline: global-critcss.css

     2. Inline: template-XXX-critcss.css (если есть для шаблона)

     3. Async preload: style.css

     4. Async preload: template-XXX.css (если есть для шаблона)