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

Demián Renzulli

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

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

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

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

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

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

Мера

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

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

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

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

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

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

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

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

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

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

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

Используя эту информацию, оптимизируйте свой 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 перед отрисовкой страницы:

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

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

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

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

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