Skip to content
О сайте Блог Обучение Исследовать узоры Case studies
Содержание
  • Неоптимальная загрузка CSS
  • Оценка производительности
  • Оптимизация
  • Мониторинг
  • Дальнейшие действия и дополнительные материалы

Откладывание некритичных CSS

Feb 17, 2019 — Обновлено Jun 12, 2020
Available in: English, Español, 中文, 日本語 и 한국어
Appears in: Ускорение загрузки
Demian Renzulli
Demian Renzulli
TwitterGitHubGlitch
Содержание
  • Неоптимальная загрузка 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:

Lighthouse report for unoptimized page, showing FCP of '1s' and 'Eliminate blocking resources' under 'Opportunities'
CSS-файл в рамках этой демонстрации не очень большого размера. Если запросить CSS большего размера (обычное дело на реальных проектах) и Lighthouse обнаружит, что на странице как минимум 2048 байт CSS-правил, не использованных при отрисовке контента видимой части страницы, появится также рекомендация Remove Unused CSS (удалите неиспользуемые CSS).

Посмотрим, как именно такой CSS блокирует отрисовку:

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

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

Трассировка производительности в DevTools для неоптимизированной страницы. FCP начинается после загрузки CSS.

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

Оптимизация #

Чтобы оптимизировать страницу, надо знать, какие классы считаются критичными. Для этого используем Coverage Tool (инструмент «Покрытие»):

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

Дважды щелкните отчет — будут показаны классы, выделенные двумя цветами:

  • Зеленый (критичные): классы, необходимые браузеру для отрисовки видимого контента (например, заголовка, подзаголовка и кнопок-гармошек).
  • Красный (некритичные): стили, применяемые к контенту, который отображается не сразу (например, абзацы внутри гармошек).

Опираясь на эту информацию, оптимизируем 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.
Здесь для оптимизации мы используем базовый код. На реальных проектах рекомендуется использовать функции вроде loadCSS, которые могут инкапсулировать это поведение и учитывать особенности разных браузеров.

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

Мониторинг #

С помощью DevTools запустите трассировку Performance (Производительность) на уже оптимизированной странице.

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

Трассировка производительности DevTools для оптимизированной страницы. FCP начинается до загрузки CSS.

Наконец, запустим Lighthouse для оптимизированной страницы.

В отчете видно, что время FCP страницы снизилось на 0,2 с — то есть, на целых 20 %:

Отчет Lighthouse. Показано значение FCP, равное «0.8 s».

Подсказка Eliminate render-blocking resources из раздела Opportunities (Варианты оптимизации) перешла в Passed Audits (Пройденные проверки):

Отчет Lighthouse. Пункт «Eliminate blocing resources» показан в разделе «Passed Audits».

Дальнейшие действия и дополнительные материалы #

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

Производительность
Последнее обновление: Jun 12, 2020 — Улучшить статью
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.