Как определить из всех стилей только те, которые реально необходимы (чтобы поместить их в head, а остальные — ниже)?

Question

[eugene159]

Пытаюсь оптимизировать сайт на Wordpress. Pagespeed рекомендует оставить в head только самые необходимые стили, а остальные перенести вниз.

Каким образом можно определить из всех стилей только те, которые реально необходимы (чтобы поместить их в head)?

Я пробовал вот этот сервис:
https://www.sitelocity.com/critical-path-css-generator
Но при открытии страницы она сначала отображается не очень корректно (видно развернутое мобильное меню и обычно меню - для ПК), а потом корректно. То есть, этот сервис - не самый лучший вариант. Какие еще есть варианты?

Answer 1

[Арсений Матыцин]

Руками, как ни странно.

1. Ты никогда не знаешь наверняка, где приземлится юзер. Может он по хеш-ссылке где-то в подвале окажется.
2. Точно не должно быть стилей, которые не представлены на данной странице. Фреймворки типа OctoberCMS позволяют подключать разбитые файлы со стилями на страницу, собирая их в один файл, таким образом ты исключаешь ненужное сам. При должных усилиях такой трюк можно провернуть и на других платформах ЯП\фреймах
3. Если у тебя тупо сгенеренный HTML+CSS+JS, каким-нить UnCSS можно фильтровать (загуглил, модуль для галпа deprecated)
4. А вообще стоит загуглить.