Извлечение критического CSS-кода
Узнайте, как улучшить время рендеринга благодаря извлечению критического CSS-кода.
CSS-файлы — это ресурс, блокирующий рендеринг: браузер должен загрузить и обработать их, прежде чем сможет отобразить страницу. Если загрузка CSS-файлов занимает много времени из-за их большого размера или плохого качества соединения, время рендеринга веб-страницы может существенно увеличиться.
Извлечение стилей и встраивание их в раздел <head> HTML-документа позволяет загружать их, не совершая дополнительных запросов. Остальная часть CSS-кода может быть загружена в асинхронном режиме.
Улучшение времени рендеринга может существенно повлиять на воспринимаемую производительность, особенно при плохом качестве соединения. Для мобильных сетей характерны высокие задержки независимо от пропускной способности.
Если у вас плохой показатель первой отрисовки контента (FCP) и в отчете Lighthouse показывается рекомендация «Eliminate render-blocking resource» («Устраните ресурсы, блокирующие рендеринг»), вам стоит попробовать методику критического CSS-кода.
Чтобы минимизировать число запросов при первом рендеринге, старайтесь, чтобы размер контента в изначально видимой области не превышал 14 КБ (в сжатом виде).
Влияние этого метода на производительность зависит от конкретного типа сайта. Как правило, чем больше на сайте CSS-кода, тем более серьезного эффекта можно добиться при помощи встраиваемого CSS-кода.
Обзор инструментов #
Существует несколько отличных инструментов, которые автоматически определяют критический CSS-код на странице. Это хорошая новость, поскольку вручную это делать было бы слишком утомительно. Для определения стилей, распространяющихся на каждый элемент в области просмотра, требуется анализ всей структуры DOM.
Critical #
Critical извлекает, минифицирует и встраивает CSS-код, относящийся к изначальной видимой области. Он доступен в виде модуля npm. Его можно использовать с Gulp (напрямую) или с Grunt (как плагин); кроме того, есть и плагин webpack.
Этот простой инструмент позволяет сэкономить массу усилий. Вам даже не нужно указывать таблицы стилей: Critical автоматически их обнаружит. Он также поддерживает извлечение критического CSS-кода для различных разрешений экрана.
criticalCSS #
CriticalCSS — еще один npm-модуль для извлечения CSS, относящегося к изначальной видимой области. Он также доступен в виде инструмента командной строки.
Он не поддерживает встраивание и минификацию, однако позволяет принудительно включать правила, не являющиеся частью критического CSS-кода, и дает более тонкий контроль над включением деклараций @font-face.
Penthouse #
Penthouse — хороший выбор, если сайт или приложение используют большое количество стилей или если стили динамически внедряются в DOM (как часто бывает в приложениях Angular). Он основан на Puppeteer, и у него есть онлайн-версия.
Penthouse не определяет таблицы стилей автоматически; файлы HTML и CSS, для которых требуется создать критический CSS-код, необходимо указывать вручную. Плюс инструмента в том, что он хорошо справляется с параллельным выполнением нескольких задач.