Google в своих рекомендациях по оптимизации сайтов советует разделять CSS-файлы, с помощью атрибута "media", например так:
<li nk href="style.css" rel="stylesheet">
<li nk href="print.css" rel="stylesheet" media="print">
<li nk href="other.css" rel="stylesheet" media="(min-width: 40em)">
Иными словами все медиазапросы из общих файлов стилей рекомендуется переносить в отдельные файлы и подключать отложено при определенных условиях.
Однако, у метода Asset::getInstance()->addCss() нет возможности задать атрибут "media" - все CSS-ки по умолчанию складываются в одну кучу, что приводит к необходимости грузить достаточно объемный итоговый файл стилей.
Идея в следующем:
Внедрить в метод Asset::getInstance()->addCss() возможность указывать специфичный атрибут "media"
Аналогичным образом доработать метод addExternalCss() для вызова в шаблонах компонентов.
При объединении CSS-файлов группировать их по значениям данных атрибутов: все файлы, например, со значением media="print" объединяются в один файл, все файлы со значением media="blabla" - в другой и т.д.
Разумеется, наличие данного атрибута не должно быть обязательным, чтобы сохранить обратную совместимость. Просто хотелось бы получить инструмент для оптимизации стилей разрабатываемых сайтов.
Google PageSpped ругается на все сайты на Битриксе в контексте того, что в шапке сайта подключается огромная объединённая и сжатая CSS. Согласно рекомендациям в шапке сайта нужно подключать только те CSS, которые нужны на первом экране. Но в Битриксе же все все css всех шаблонов компонентов подключаются исключительно в шапке. Нужно дать возможность в шаблоне компонента голосовать за место расположения CSS - Header/Footer. По аналогии с голосованием за композит. На выходе получим то, что требует Google - в шапке будут подключаться только те CSS, которые нужны для первого экрана, остальные соответственно будут подключаться в подвале сайта.