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

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