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

  • Есть глобальный файл 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 (если есть для шаблона)

18 часов назад
Максим
18 часов в сервисе
Был
26 минут назад

Заявки фрилансеров

Дэниел
 
25 лет
4 часа в сервисе
Был
2 часа назад
2 часа назад
Станіслав
 
19 лет
2 года в сервисе
Был
17 часов назад
6 отзывов
17 часов назад
Андрей
 
33 года
11 лет в сервисе
Был
2 часа назад
199 отзывов(-3)
18 часов назад
Лучший веб-программист июля
Никита
 
20 лет
3 года в сервисе
Был
час назад
1 отзыв
18 часов назад