CSS-файлы являются ресурсами, блокирующими отображение : они должны быть загружены и обработаны до того, как браузер отобразит страницу. Веб-страницы, содержащие неоправданно большие таблицы стилей, отображаются дольше.
Узнайте, как отложить некритический CSS, чтобы оптимизировать критический путь рендеринга и улучшить первую отрисовку содержимого (FCP) .
Неоптимальная загрузка CSS
Следующий пример содержит аккордеон с тремя скрытыми абзацами текста, каждый из которых стилизован с использованием различного класса:
Эта страница запрашивает CSS-файл с восемью классами, но не все из них необходимы для отображения «видимого» контента.
Целью данного руководства является оптимизация этой страницы таким образом, чтобы синхронно загружались только критические стили, а остальные (включая стили абзацев) загружались неблокирующим образом.
Мера
Запустите Lighthouse в DevTools, чтобы просмотреть важные показатели.
- Откройте демо в Chrome.
- Откройте Chrome DevTools .
- Выберите панель «Производительность» .
- Перезагрузите страницу изнутри панели.
В отчете показана метрика First Contentful Paint со значением «1» и возможность «Устранить ресурсы, блокирующие отображение» , указывающая на файл style.css :
В полученной трассировке маркер FCP размещается сразу после завершения загрузки CSS: