penthouse
2.3.3
Генератор CSS критического пути
Penthouse — это оригинальный генератор CSS критического пути, который поможет вам ускорить рендеринг страниц ваших веб-сайтов. Укажите полный CSS вашего сайта и страницу, для которой вы хотите создать критический CSS, и Penthouse вернет критически важный CSS, необходимый для идеальной визуализации содержимого страницы, расположенного выше сгиба. Подробнее о критическом пути CSS можно прочитать здесь.
Процесс автоматический, и сгенерированный CSS готов к производству как есть. За кулисами Penthouse использует puppeteer для генерации критического CSS с помощью chromium:headless.
(Если вы не хотите писать код, вы можете использовать онлайн-версию.)
yarn add --dev penthouse
(или npm install , если не используете пряжу)
penthouse ( {
url : 'http://google.com' ,
cssString : 'body { color: red }'
} )
. then ( criticalCss => {
// use the critical css
fs . writeFileSync ( 'outfile.css' , criticalCss ) ;
} )https://github.com/pocketjoso/penthouse/tree/master/examples
Пентхаус оптимизирован для параллельного выполнения множества задач. Один общий экземпляр браузера используется повторно, и каждое задание выполняется на отдельной вкладке браузера. Существует не так много задач, которые вы можете выполнять параллельно, прежде чем на вашей машине начнут иссякать ресурсы. Чтобы эффективно выполнять множество заданий, см. пример с множеством URL-адресов.
Требуются только url и cssString , все остальные параметры являются необязательными. Обратите внимание: ожидается, что HTML-файл, найденный по url будет стилизован; penthouse не внедряет никаких стилей, он просто использует cssString (или css ) для обрезки критического CSS.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| URL | string | Доступный URL. Используйте протокол file:/// для локальных html-файлов. | |
| cssString | string | Оригинальный CSS для извлечения критического CSS из | |
| CSS | string | Путь к исходному файлу CSS на диске (при использовании вместо cssString ) | |
| ширина | integer | 1300 | Ширина критического окна просмотра |
| высота | integer | 900 | Высота критического окна просмотра |
| скриншоты | object | Конфигурация для скриншотов (по умолчанию не используется). См. пример снимка экрана | |
| KeepLargerMediaQueries | boolean | false | Сохраняйте медиа-запросы даже для значений ширины/высоты, превышающих критическое окно просмотра. |
| принудительное включение | array | [] | Массив селекторов CSS, которые нужно сохранить в критическом CSS, даже если они не отображаются в критическом окне просмотра. Строки или регулярное выражение (например, ['.keepMeEvenIfNotSeenInDom', /^.button/] ) |
| принудительное исключение | array | [] | Массив селекторов CSS для удаления в критическом CSS, даже если они появляются в критическом окне просмотра. Строки или регулярное выражение (например, ['.doNotKeepMeEvenIfNotSeenInDom', /^.button/] ) |
| свойстваToRemove | array | ['(.*)transition(.*)', 'cursor', 'pointer-events', '(-webkit-)?tap-highlight-color', '(.*)user-select'] ] | Свойства CSS для фильтрации критического CSS |
| тайм-аут | integer | 30000 | РС; прервать генерацию критического CSS по истечении этого времени |
| кукольник | object | Настройки для кукольника. См. пример пользовательского браузера кукловода. | |
| страницаLoadSkipTimeout | integer | 0 | РС; перестать ждать загрузки страницы по истечении этого времени (для сайтов, когда событие загрузки страницы ненадежно) |
| рендерWaitTime | integer | 100 | РС; время ожидания после загрузки страницы перед началом критического извлечения CSS (также до того, как будет сделан снимок экрана «до», если он используется) |
| блокJSRequests | boolean | true | установите значение false для загрузки JS (не рекомендуется) |
| maxEmbeddedBase64Length | integer | 1000 | персонажи; удалить встроенные ресурсы с кодировкой Base64, превышающие этот размер |
| МаксЭлементсТочеккперселектор | integer | undefined | Может быть указано, чтобы ограничить количество элементов для проверки на каждый селектор CSS, сокращая время выполнения. |
| пользовательский агент | string | 'Penthouse Critical Path CSS Generator' | укажите строку пользовательского агента при загрузке страницы |
| пользовательские заголовки страниц | object | Установите дополнительные заголовки http, которые будут отправляться с запросом URL-адреса. | |
| печенье | array | [] | Форматирование каждого файла cookie см. в документации Puppeteer setCookie. |
| строгий | boolean | false | Заставьте Penthouse выдавать ошибки при анализе исходного CSS. Устаревший вариант, не рекомендуется. |
| разрешенныйResponseCode | number|regex|function | Пусть Penthouse остановится, если код ответа сервера не соответствует этому значению. Типы number и regex проверяются на соответствие ответу.status(). function также разрешена и получает ответ в качестве аргумента. Функция должна возвращать boolean . |
Ведение журнала осуществляется через модуль debug в пространстве имен penthouse . Подробнее о ведении журнала можно узнать в их документации.
# Basic verbose logging for all components
env DEBUG= " penthouse,penthouse:* " node script.jsУстановите недостающие зависимости, чтобы запустить Chrome без монитора:
sudo apt-get install libnss3
Возможно, вам понадобится еще более длинный список deps, в зависимости от вашего расстояния, см. этот ответ.
Хорошим первым шагом может быть проверка вашего URL + CSS в размещенном генераторе CSS критического пути, чтобы определить, связана ли проблема с входными данными, которые вы передаете (css + URL), или с вашей локальной настройкой: https://jonassebastianohlsson.com /criticalpathcssgenerator
Если после применения критического CSS вы видите вспышки нестилизованного контента, значит, что-то не так. Ниже приведены наиболее распространенные причины и некоторые общие советы:
Как правило, вам необходимо убедиться, что все элементы, которые вы хотите стилизовать с помощью критического CSS, появляются (видимы) в HTML вашей страницы (с отключенным Javascript). Первый рендеринг вашей страницы, который CSS помогает сделать намного быстрее, происходит до загрузки JS, поэтому Penthouse запускается с отключенным JavaScript. Поэтому, если ваш HTML по существу пуст или ваш реальный контент скрыт перед счетчиком загрузки или чем-то подобным, вам придется решить эту проблему, прежде чем вы сможете получить преимущества в производительности от использования критического CSS.
Если ваш HTML в порядке, но варьируется в зависимости от таких факторов, как вошедший в систему пользователь, сторонняя реклама и т. д., то вы можете использовать параметр forceInclude чтобы заставить определенные дополнительные стили оставаться в критическом CSS, даже если Penthouse их не видит. на странице во время критической генерации CSS.
Эта проблема может возникнуть, если у вас есть элемент, появляющийся в начале DOM, но со стилями, примененными для перемещения за пределы критического окна просмотра (с использованием абсолютного положения или преобразований). Penthouse не учитывает абсолютное положение и значения преобразования и просто будет видеть элемент как не являющийся частью критического окна просмотра, и, следовательно, Penthouse не будет считать его стили критическими (поэтому нестилизованный элемент будет отображаться при использовании критического CSS). Решение: подумайте, действительно ли он должен появиться в DOM так рано, или используйте свойство forceInclude чтобы убедиться, что стили для его «скрытия»/перемещения остались в критическом CSS.
Проблемы со специальными символами, такими как →, после конвертации? Убедитесь, что вы используете правильный шестнадцатеричный формат в своем CSS. Вы всегда можете получить этот формат из консоли браузера, введя «→». .charCodeAt(0).toString(16) (ответ для этого значка стрелки — 2192 ). При использовании шестнадцатеричного формата в CSS перед ним необходимо поставить обратную косую черту, например: 2192 (например, content: '2192'; ).
