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