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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы