Браузеру необходимо скачать и обработать файлы CSS, прежде чем...

220

Браузеру необходимо скачать и обработать файлы CSS, прежде чем он сможет показать страницу, что делает CSS ресурсом, блокирующим рендеринг.

При больших размерах файлов CSS или плохих сетевых условиях запросы к файлам CSS могут значительно увеличить время отрисовки веб-страницы.

Инлайнинг извлеченных стилей в <head> HTML-документа устраняет необходимость делать дополнительный запрос для получения этих стилей.

Остальная часть CSS может быть загружена асинхронно.

Улучшение времени рендеринга может значительно повлиять на восприятие производительности, особенно в условиях плохой сети.

В мобильных сетях высокая задержка является проблемой независимо от пропускной способности.

Если у вас плохой First Contentful Paint (FCP) и вы видите возможность "Устранить блокирующий рендеринг ресурс" в аудитах Lighthouse, стоит попробовать критический CSS.

Чем больше CSS на сайте, тем больше возможный эффект от встраивания CSS.

Существует ряд инструментов, которые могут автоматически определить критический CSS для страницы:

Critical

Critical извлекает, минифицирует и инлайнит CSS первого экрана и доступен как модуль npm.

Его можно использовать с Gulp (напрямую) или с Grunt (как плагин), также есть плагин для webpack.

Это простой инструмент, который избавляет вас от необходимости что-либо решать.

Вам даже не нужно указывать стили, Critical автоматически их обнаруживает.

Он также поддерживает извлечение критических CSS для нескольких разрешений экрана.

criticalCSS

CriticalCSS - это еще один модуль npm, который извлекает CSS, расположенный выше страницы.

Он также доступен в виде CLI.

В нем нет опций инлайнинга и минификации критического CSS, но он позволяет принудительно включать правила, которые на самом деле не принадлежат критическому CSS, и дает вам более детальный контроль над включением деклараций @font-face.

Penthouse

Penthouse - хороший выбор, если ваш сайт или приложение имеет большое количество стилей или динамически инжектируемых в DOM стилей (что часто встречается в приложениях Angular).

Он использует Puppeteer под капотом и даже имеет онлайн-хостинг версию.

Penthouse не обнаруживает таблицы стилей автоматически, вам нужно указать HTML и CSS файлы, для которых вы хотите сгенерировать критический CSS.

Плюсом является то, что он хорошо справляется с параллельным выполнением многих заданий.

https://web.dev/articles/extract-critical-css?hl=en

@MikeBlazerX