В разделе «Возможности» отчёта Lighthouse перечислены все URL-адреса, блокирующие первую отрисовку страницы. Цель — снизить влияние этих URL-адресов, блокирующих отрисовку, путём встраивания критически важных ресурсов, отсрочки некритических ресурсов и удаления всего неиспользуемого.
Какие URL-адреса помечаются как ресурсы, блокирующие отображение?
Lighthouse отмечает два типа URL-адресов, блокирующих отображение: скрипты и таблицы стилей.
Тег <script> , который:
- Находится в
<head>документа. - Не имеет атрибута
defer. - Не имеет атрибута
async.
Тег <link rel="stylesheet"> , который:
- Не имеет атрибута
disabled. При наличии этого атрибута браузер не загружает таблицу стилей. - Не имеет атрибута
media, соответствующего конкретному устройству пользователя.media="all"считается блокирующим отображение.
Как определить критически важные ресурсы
Первый шаг к снижению влияния ресурсов, блокирующих рендеринг, — определить, что критически важно, а что нет. Используйте вкладку «Покрытие» в Chrome DevTools, чтобы определить некритичный CSS и JavaScript. При загрузке или запуске страницы на вкладке отображается объём использованного и загруженного кода:
Вы можете уменьшить размер своих страниц, загружая только необходимый код и стили. Щёлкните по URL-адресу файла, чтобы просмотреть его на панели «Источники». Стили в файлах CSS и код в файлах JavaScript обозначены двумя цветами:
- Зеленый (критический): стили, необходимые для первой отрисовки; код, имеющий решающее значение для основных функций страницы.
- Красный (некритичный): стили, применяемые к содержимому, которое не видно сразу; код, не используемый в основных функциях страницы.
Как устранить скрипты, блокирующие рендеринг
После того, как вы определили критически важный код, переместите его из URL-адреса, блокирующего отображение, во встроенный тег script на HTML-странице. После загрузки страницы у неё будет всё необходимое для выполнения основных функций.
Если в URL-адресе, блокирующем отображение, есть код, который не является критическим, вы можете оставить его в URL-адресе, а затем пометить URL-адрес атрибутами async или defer (см. также Добавление интерактивности с помощью JavaScript ).
Код, который вообще не используется, следует удалить (см. Удаление неиспользуемого кода ).
Как устранить таблицы стилей, блокирующие рендеринг
Аналогично встраиванию кода в тег <script> , встраивайте критически важные стили, необходимые для первой отрисовки внутри блока <style> в head HTML-страницы. Затем загрузите остальные стили асинхронно с помощью ссылки preload (см. Отсрочка неиспользуемых CSS ).
Рассмотрите возможность автоматизации процесса извлечения и встраивания CSS-кода «над сгибом» с помощью инструмента Critical .
Другой подход к устранению стилей, блокирующих отображение, — это разделение этих стилей на отдельные файлы, организованные по медиазапросам. Затем к каждой ссылке на таблицу стилей добавляется атрибут media. При загрузке страницы браузер блокирует только первую отрисовку, чтобы получить таблицы стилей, соответствующие устройству пользователя (см. раздел CSS, блокирующий отображение ).
Наконец, вам следует минимизировать CSS, удалив лишние пробелы и символы (см. раздел «Минимизация CSS» ). Это гарантирует отправку пользователям минимального пакета.
Руководство по конкретному стеку
AMP
Используйте такие инструменты, как AMP Optimizer, для рендеринга макетов AMP на стороне сервера .
Друпал
Рассмотрите возможность использования модуля для встраивания критически важного CSS и JavaScript, а также использование атрибута defer для некритического CSS или JavaScript.
Джумла
Существует ряд плагинов Joomla, которые помогут вам встроить критически важные ресурсы или отложить менее важные ресурсы .
WordPress
Существует ряд плагинов WordPress, которые помогут вам встроить критически важные ресурсы или отложить менее важные ресурсы .