Включая критический путь извлечения CSS в моей сборке

Question

После прочтения на critical path css мне было интересно, как я мог бы вставить это в мои сборки. Есть ли готовые инструменты, которые делают это уже? Процесс должен быть автоматизирован, чтобы избежать встроенного CSS, который не синхронизируется с другим CSS.

Если сегодня нет такого инструмента, я могу видеть, как я мог бы сделать его (скажем, плагин grunt), используя этот experimental script вместе с PhantomJS, но нет смысла повторно изобретать колесо (если есть один уже).

Answer 1

Я имел точно такую ​​же идею - если вы все еще ищете, я построил именно то, что мы оба хотели:

Critical Path CSS Generator. (Я не использовал инструмент, который вы связали, так как он пропускает селектор psuedo, медиа-запросы, не -webkit с префиксом css-правил и т. Д.).

документации находится на пути, но в основном только установить PhantomJS первым, а затем вызвать скрипт так:

phantomjs penthouse.js http://youSite.com/page1 yourSite.css > yourSite-criticalcss-page1.css 
phantomjs penthouse.js http://youSite.com/page2 yourSite.css > yourSite-criticalcss-page2.css 

Вы можете пройти в уменьшенной CSS, а также unminified - не изменять CSS за исключением удаления несогласованных селекторов, правил (и я удаляю комментарии).

Answer 2

Используйте IISpeed ​​или модули Apache/Nginx PageSpeed ​​

Google поддерживает некоторые wonderful modules called PageSpeed, который работает на Apache и Nginx фронтальных серверов. Для тех, кто на .NET, только use IISpeed, эквивалент IIS модулей PageSpeed. Он коммерческий и стоит 100 долларов, но он очень изумительный с точки зрения внешнего вида в том, что он делает, и (среди множества других вещей) справляется с основной проблемой при использовании Penthouse: работа с изменением/динамическим контентом.

Он работает, введя некоторый javascript в голову некоторых из первых посетителей любой страницы, анализируя, какие правила CSS используются на самом деле. Затем, после некоторых раундов, он затем собирает эти правила css и вводит их как inline css в head этой страницы для всех последующих посетителей.

Это абсолютно автоматический и работает на любой странице ASP.NET. Затем вы избегаете ручного запуска Penthouse (упомянутого выше) на каждой странице, которую вы хотите ускорить, и помните, что этот css обновлен (в противном случае он будет устаревшим в определенное время, испортив ваши стили).

Пентхаус по-прежнему отлично подходит для страниц, где контент в основном статичен.