Как оптимизировать css для компонентов MODX?

Question

[Bloggo123]

Можно ли оптимизировать css для компонентов в Modx?
В общем, закидываешь в гугл page speed например ссылку на какую-нибудь новость, и он выдает:

Исправьте обязательно:
Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение
Количество блокирующих ресурсов CSS на странице: 6. Они замедляют отображение контента.
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.
Оптимизируйте работу CSS на следующих ресурсах:

…omponents/hybridauth/css/web/default.css
…mponents/voteforms/css/web/voteforms.css
…ponents/tickets/js/web/editor/editor.css
…s/components/tickets/css/web/default.css
…ts/tickets/css/web/lib/jquery.jgrowl.css
…omponents/hybridauth/css/web/default.css

Answer 1

[Realetive]

«Склейте» все css-файлы в один, удалив перед этим неиспользуемые стили. Не самая лучшая практика, но на начальном этапе вполне подходящая — специальный модуль для MODX от bezumkin: MinifyX (документация).
P.S. Более корректно делать это на рабочей машине, на которой ведётся разработка (до выгрузки на сервер), например через Gulp.js, но это тема отдельного разговора.

Comments

[Bloggo123]

Есть такой модуль, стоит на моем сайте. Только вот в том то и вопрос, можно ли склеить этим модулем компонентные скрипты и стили, ведь MODX их сам подключает.

[Realetive]

Bloggo123: можно прописать их вручную в MinifyX, а в настройках соответствующих компонентов — удалить.

Answer 2

[GoldSlide]

Оптимизация css для modx , правильно как сказал комментатор выше , тебе нужно минифицировать стили а именно:
Если они у тебя прям в коде прописаны то вытащить их все в отдельный файл и подключить из футера (если загрузка будет тормозить верни в head)