Откладывание некритичных CSS
CSS-файлы блокируют отрисовку, поскольку эти ресурсы должны загружаться и обрабатываться до того, как браузер отобразит страницу. Поэтому объемные файлы стилей значительно замедляют отрисовку страницы.
В этом руководстве рассказывается, как оптимизировать Critical Rendering Path (путь критичной отрисовки) и ускорить First Contentful Paint (FCP) (первая отрисовка контента), откладывая некритичные CSS.
Неоптимальная загрузка CSS #
В следующем примере показана гармошка с тремя скрытыми абзацами текста, каждый из которых оформлен с применением отдельного класса:
Страница запрашивает CSS-файл, который содержит восемь классов, но для отображения «видимого» контента нужны только некоторые из них.
В рамках этого руководства мы оптимизируем страницу так, чтобы синхронно загружались только критичные стили, а остальные (например, применяемые к абзацам) загружались, не блокируя отрисовку.
Оценка производительности #
Запустите Lighthouse для этой страницы и перейдите в раздел Performance.
В отчете у метрики First Contentful Paint указано значение «1s» (1 секунда) и приведена рекомендация Eliminate render-blocking resources (уберите ресурсы, блокирующие отрисовку) с указанием на файл style.css:
Посмотрим, как именно такой CSS блокирует отрисовку:
- Откройте эту страницу в Chrome. 1. Откройте DevTools, нажав
Control+Shift+J(илиCommand+Option+J, если у вас Mac). - Перейдите на вкладку Производительность.
- На панели «Performance» (Производительность) нажмите кнопку перезагрузки.
В полученной трассировке метка FCP размещена сразу после завершения загрузки CSS:
Это означает, что браузеру, прежде чем отрисовать первый пиксель на экране, необходимо дождаться загрузки и обработки всех CSS.
Оптимизация #
Чтобы оптимизировать страницу, надо знать, какие классы считаются критичными. Для этого используем Coverage Tool (инструмент «Покрытие»):
- В DevTools откройте командное меню, нажав
Control+Shift+PилиCommand+Shift+P(Mac). - Введите «coverage» (область действия) и выберите Show Coverage (Показать область действия).
- Нажмите кнопку перезагрузки — страница будет обновлена и начнется сбор данных.
Дважды щелкните отчет — будут показаны классы, выделенные двумя цветами:
- Зеленый (критичные): классы, необходимые браузеру для отрисовки видимого контента (например, заголовка, подзаголовка и кнопок-гармошек).
- Красный (некритичные): стили, применяемые к контенту, который отображается не сразу (например, абзацы внутри гармошек).
Опираясь на эту информацию, оптимизируем CSS так, чтобы браузер начинал обрабатывать критичные стили сразу после загрузки страницы, а некритичные откладывал на потом:
- Извлеките определения «зеленых» классов и поместите их в блок
<style>в элементе «head» страницы:
<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>- Затем задайте асинхронную загрузку остальных классов, применив следующий шаблон:
<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 после завершения загрузки. - Указывая значение «null» для обработчика
onloadпосле его использования, мы позволяем некоторым браузерам избежать его повторного вызова обработчика при переключении атрибута «rel». - Ссылка на таблицу стилей внутри элемента
noscript— резервный вариант для браузеров, которые не выполняют JavaScript.
Полученная страница выглядит так же, как и предыдущая версия, но при этом большинство стилей на ней загружаются асинхронно. В HTML-файле встроенные стили и асинхронный запрос к CSS-файлу выглядят следующим образом:
Мониторинг #
С помощью DevTools запустите трассировку Performance (Производительность) на уже оптимизированной странице.
Теперь метка FCP появляется перед тем, как страница запрашивает CSS — то есть, браузеру не приходится ждать загрузки стилей, чтобы начать отрисовку:
Наконец, запустим Lighthouse для оптимизированной страницы.
В отчете видно, что время FCP страницы снизилось на 0,2 с — то есть, на целых 20 %:
Подсказка Eliminate render-blocking resources из раздела Opportunities (Варианты оптимизации) перешла в Passed Audits (Пройденные проверки):
Дальнейшие действия и дополнительные материалы #
В этом руководстве мы разобрались, как отложить некритичные CSS. Для этого мы вручную извлекли неиспользуемый код на странице. Дополнительно можете ознакомиться с руководством по извлечению критичных CSS: в нем рассмотрены популярные инструменты для извлечения критичных CSS и есть демонстрационное практическое задание.