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

  • Есть глобальный файл 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 дней в сервисе
Был
12 дней назад

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

Максим
 
35 лет
год в сервисе
Был
2 дня назад
1 отзыв
12 дней назад
Максим
 
26 лет
6 лет в сервисе
Был
5 часов назад
39 отзывов(-3)
14 дней назад
ТОП-5
Веб-программирование
Владислав
 
21 год
2 года в сервисе
Был
8 дней назад
16 дней назад
Олексій
 
50 лет
2 месяца в сервисе
Был
3 дня назад
17 дней назад
Дэниел
 
25 лет
18 дней в сервисе
Был
17 дней назад
18 дней назад
Станіслав
 
19 лет
2 года в сервисе
Был
10 часов назад
6 отзывов
18 дней назад
Андрей
 
33 года
11 лет в сервисе
Был
9 часов назад
199 отзывов(-3)
18 дней назад
Никита
 
20 лет
3 года в сервисе
Был
час назад
2 отзыва(-1)
18 дней назад