Спасибо за предложение.
Использование метода отложенной загрузки CSS-стилей является хорошим, но к сожалению не подходит для CS-Cart. Из-за гибкой настройки блоков в блок-менеджере понять какие стили являются важными, а какие нет затруднительно. Поэтому сделать общее решение, которое подойдет для всех клиентов не представляется возможным.
Но данный способ подойдёт для конкретных магазинов с заблокированным блок менеджером.
Суть оптимизации:
- Вручную разделяем стили на важные и неважные.
- Важные стили грузим как обычно.
- Неважные стили грузятся с низким приоритетом и применяются после полной загрузки страницы
Принцип работы оптимизации:
Второстепенные стили подключаем следующим образом:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
- указываем тип стилей для печати
- т. к. смотрим с монитора, и они не нужны сейчас, то они получают низкий приоритет загрузки
- после загрузки тип стилей меняется на все устройства и стили автоматически применяются.
Особенности оптимизации загрузки стилей на 2020 год:
- Текущая оптимизация загрузки стилей не нуждается в JavaScript. Не нужна библиотека loadCSS.
- Не используется современный атрибут
rel=preloadиз-за того, что стили тогда загружаются с большим приоритетом. - Используется тип
print, а не несуществующий тип, из-за того, что в некоторых браузерах несуществующий тип не загружается.
Подробнее в оригинальной статье https://www.filamentgroup.com/lab/load-css-simpler/