В разделе «Возможности» вашего отчета Lighthouse перечислены все URL-адреса, блокирующие первую отрисовку вашей страницы. Цель состоит в том, чтобы уменьшить влияние этих блокирующих отрисовку URL-адресов путем встраивания критически важных ресурсов, отсрочки выполнения некритических ресурсов и удаления всего неиспользуемого.
Какие URL-адреса помечаются как ресурсы, блокирующие отрисовку?
Lighthouse помечает два типа URL-адресов, блокирующих отрисовку: скрипты и таблицы стилей.
Тег <script> , который:
- Находится в разделе
<head>документа. - Отсутствует атрибут
defer. - Отсутствует атрибут
async.
Тег <link rel="stylesheet"> , который:
- Отсутствует атрибут
disabled. Если этот атрибут присутствует, браузер не загружает таблицу стилей. - Отсутствует атрибут
media, который бы точно соответствовал устройству пользователя.media="all"считается блокирующим рендеринг.
Как определить критически важные ресурсы
Первый шаг к уменьшению влияния ресурсов, блокирующих отрисовку, — это определение критически важных и некритичных элементов. Используйте вкладку «Покрытие кода» в инструментах разработчика Chrome, чтобы определить некритичные CSS и JS-файлы. При загрузке или запуске страницы эта вкладка показывает, сколько кода было использовано, а сколько загружено:
Вы можете уменьшить размер страниц, используя только необходимый код и стили. Щелкните по 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 Optimizer , для рендеринга AMP-макетов на стороне сервера .
Drupal
Рекомендуется использовать модуль для встраивания критически важных CSS и JavaScript-кода, а для некритических CSS или JavaScript-кода использовать атрибут `defer`.
Joomla
Существует ряд плагинов для Joomla, которые могут помочь вам встраивать важные ресурсы или откладывать выполнение менее важных задач .
WordPress
Существует ряд плагинов для WordPress, которые могут помочь вам встраивать важные ресурсы или откладывать выполнение менее важных задач .