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

Demián Renzulli

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

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

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

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

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

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

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

Мера

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

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

В отчете Lighthouse предлагается упростить таблицу стилей, чтобы ускорить загрузку страницы.

Примечание. На этом демонстрационном сайте используется очень маленькая таблица стилей. В производственных сценариях обычно требуются CSS-файлы гораздо большего размера. Если Lighthouse обнаруживает, что страница содержит как минимум 2048 байт правил CSS, которые не использовались при рендеринге содержимого над сгибом , он также отображает предложение «Удалить неиспользуемый CSS» .

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

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

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

На неоптимизированной демонстрационной странице FCP не может произойти до тех пор, пока не завершится загрузка CSS.

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

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

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

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

Отчет о покрытии показывает, какая часть вашего 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.

Примечание:

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

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

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

Монитор

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

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

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

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

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

Новый уменьшенный FCP.

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

Теперь страница проходит проверку блокирующих ресурсов.

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

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