Отложить некритичный CSS

Демиан Рензулли

Файлы CSS являются ресурсами, блокирующими рендеринг : они должны быть загружены и обработаны до того, как браузер отобразит страницу. Веб-страницы, содержащие неоправданно большие таблицы стилей, требуют больше времени для рендеринга.

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

Пример: неоптимальная загрузка CSS

Следующий пример содержит аккордеон с тремя скрытыми абзацами текста, каждый из которых имеет свой стиль:

Эта страница запрашивает файл CSS с восемью классами, но не все из них необходимы для отображения «видимого» контента.

Цель этого руководства — оптимизировать эту страницу, чтобы синхронно загружались только критические стили, а остальные (включая стили абзацев) загружались неблокирующим способом.

Мера

Запустите Lighthouse на странице и перейдите в раздел «Производительность» .

В отчете показана метрика First Contentful Paint со значением «1s», а также возможность «Устранить ресурсы, блокирующие рендеринг» , указывающая на файл style.css :

Отчет Lighthouse для неоптимизированной страницы, показывающий FCP «1» и «Устранить блокирующие ресурсы» в разделе «Возможности».
Отчет Lighthouse предлагает упростить таблицу стилей, чтобы ускорить загрузку страницы.

Чтобы визуализировать, как этот CSS блокирует рендеринг:

  1. Откройте страницу в Chrome.
  2. Нажмите Control+Shift+J (или Command+Option+J на Mac), чтобы открыть DevTools.
  3. Откройте вкладку « Производительность» .
  4. На панели «Производительность» нажмите « Обновить» .

В полученной трассировке вы увидите, что маркер FCP размещается сразу после завершения загрузки CSS:

Трассировка производительности DevTools для неоптимизированной страницы, показывающая запуск FCP после загрузки CSS.
На неоптимизированной демонстрационной странице FCP не может произойти до тех пор, пока не завершится загрузка CSS.

Это означает, что браузеру необходимо дождаться загрузки и обработки всего CSS, прежде чем рисовать один пиксель на экране.

Оптимизировать

Чтобы оптимизировать эту страницу, вам нужно знать, какие классы считаются критическими . Чтобы это определить, используйте Инструмент покрытия :

  1. В DevTools откройте командное меню , нажав Control+Shift+P или Command+Shift+P (Mac).
  2. Введите «Покрытие» и выберите «Показать покрытие» .
  3. Нажмите «Обновить» , чтобы перезагрузить страницу и начать запись освещения.
Покрытие CSS-файла: 55,9 % неиспользуемых байт.
Отчет о покрытии показывает, какая часть вашего CSS фактически используется при начальной загрузке страницы.

Дважды щелкните отчет, чтобы просмотреть подробности:

  • Классы, отмеченные зеленым, имеют решающее значение. Они нужны браузеру для рендеринга видимого контента, включая заголовок, подзаголовок и кнопки-аккордеон.
  • Классы, отмеченные красным, не являются критическими и влияют только на контент, который не виден сразу, например скрытые абзацы.

Используя эту информацию, оптимизируйте свой CSS, чтобы браузер мог начать обработку важных стилей сразу после загрузки страницы и отложить некритичный CSS на потом:

  1. Извлеките определения классов, отмеченные зеленым в отчете о покрытии, и поместите эти классы в блок <style> в начале страницы:

    <style type="text/css">
.accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;}
</style>

  2. Загрузите остальные классы асинхронно, применив следующий шаблон:

    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Это не стандартный способ загрузки CSS. Вот как это работает:

  • link rel="preload" as="style" асинхронно запрашивает таблицу стилей. Подробнее о preload можно узнать в руководстве по предварительной загрузке критически важных ресурсов .
  • Атрибут onload в link позволяет браузеру обрабатывать CSS после завершения загрузки таблицы стилей.
  • «Обнуление» обработчика onload после его использования помогает некоторым браузерам избежать повторного вызова обработчика при переключении атрибута rel .
  • Ссылка на таблицу стилей внутри элемента noscript обеспечивает запасной вариант для браузеров, которые не выполняют JavaScript.

Полученная страница выглядит точно так же, как предыдущая версия, даже если большинство стилей загружаются асинхронно. Вот как в HTML-файле выглядят встроенные стили и асинхронный запрос к CSS-файлу:

Монитор

Используйте DevTools, чтобы запустить еще одну трассировку производительности на оптимизированной странице .

Маркер FCP появляется до того, как страница запрашивает CSS, а это означает, что браузеру не нужно ждать загрузки CSS перед отрисовкой страницы:

Трассировка производительности DevTools для оптимизированной страницы, показывающая запуск FCP до загрузки CSS.
На оптимизированной странице FCP может запуститься до загрузки таблицы стилей.

В качестве последнего шага запустите Lighthouse на оптимизированной странице.

В отчете вы увидите, что страница FCP сократилась на 0,2 секунды (улучшение на 20 %):

Отчет маяка, показывающий значение FCP «0,8 с».
Новый уменьшенный FCP.

Предложение «Устранить ресурсы, блокирующие рендеринг» больше не отображается в разделе «Возможности» и вместо этого находится в разделе «Пройденные проверки» :

Изображение отчета Lighthouse, в котором показано «Устранить блокирующие ресурсы» в разделе «Пройденные проверки».
Теперь страница проходит аудит блокирующих ресурсов.

Следующие шаги и ссылки

В этом руководстве вы узнали, как отложить некритичный CSS, вручную извлекая неиспользуемый код на странице. Для более сложных производственных сред руководство по извлечению критического CSS охватывает некоторые из наиболее популярных инструментов для извлечения критического CSS и включает в себя лабораторию кода, чтобы увидеть, как они работают на практике.