Как подгрузить сначала Критический CSS?

Question

[Вагид Гусейнов]

Есть многостраничный сервис сверстанный на шаблонизаторе django. Нужно для лендинга этой страницы увеличить скорость загрузки. Хочу за счёт критичискего css ускорить. Подскажите пожалуйста варианты решения задачи. Везде вижу решения только для одностраничных сайтов, а как сделать для страницы который наследует несколько шаблонов и следовательно подгружает несколько css файлов?

Answer 1

[Odisseya]

Используйте Critical Path CSS Generator: penthouse или critical. Их принцип работы — запустить сайт в клиентской среде (headless browser) и выбрать стили необходимые только для первого экрана. Стили для нескольких страниц (различных шаблонов) можно склеить в один файл. Отмечу, что рендерить стили стоит на нескольких разрешениях — для десктопов и мобильных, а также проверить наличие стилей состояний и модальных окон — подключив только сгенерированный critical css.

Answer 2

[Otrivin]

Делаю так:
1) в devtools включаю override для сайта
2) прохожу типичные страницы, удаляя с помощью js элементы ниже первого экрана + доп отступа
3) сохраняю результирующий html как override
4) анализирую страницу с помощью coverage, экспортирую отчёт по ней. Попутно меняю разрешение до мобильной версии и обратно, чтобы стриггерить медиа-правила.
5) когда все типичные страницы пройдены, и собраны отчёты по каждой из них, анализирую папку с ними скриптом, объединяющий использованные правила в один файл, неиспользуемые - в другой. Сохраняя исходную структуру/количество css.
6) создаю critical.css, который можно пушить по http2 либо просто добавив link preload, а остальные исходные css проекта заменяю очищенными экземплярами, чтобы не дублировать правила и в исходнике, и в критическом.
7) загрузку исходных откладываю с помощью js, loadcss, к примеру

Первые 3 шага рисковые, их можно пропустить, но с ними критический стиль получается меньшего размера, т.к. coverage записывает стили всех элементов, находящихся на странице.