Устраните ресурсы, блокирующие рендеринг

В разделе «Возможности» вашего отчета Lighthouse перечислены все URL-адреса, блокирующие первую отрисовку вашей страницы. Цель состоит в том, чтобы уменьшить влияние этих URL-адресов, блокирующих рендеринг, путем встраивания критических ресурсов, отсрочки некритических ресурсов и удаления всего неиспользуемого.

Скриншот аудита Lighthouse Eliminate ресурсов, блокирующих рендеринг

Какие URL-адреса помечаются как ресурсы, блокирующие рендеринг?

Lighthouse отмечает два типа URL-адресов, блокирующих рендеринг: скрипты и таблицы стилей.

Тег <script> , который:

  • Находится в <head> документа.
  • Не имеет атрибута defer .
  • Не имеет атрибута async .

Тег <link rel="stylesheet"> который:

  • Не имеет disabled атрибута. Если этот атрибут присутствует, браузер не загружает таблицу стилей.
  • Не имеет атрибута media , который конкретно соответствует устройству пользователя. media="all" считается блокирующим рендеринг.

Как определить критические ресурсы

Первым шагом на пути к снижению влияния ресурсов, блокирующих рендеринг, является определение того, что критично, а что нет. Используйте вкладку «Покрытие» в Chrome DevTools, чтобы определить некритичные CSS и JS. Когда вы загружаете или запускаете страницу, на вкладке отображается количество использованного кода по сравнению с количеством загруженного:

Инструменты разработчика Chrome: вкладка «Охват»
Инструменты разработчика Chrome: вкладка «Охват».

Вы можете уменьшить размер своих страниц, отправляя только тот код и стили, которые вам нужны. Нажмите на 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 или, возможно, асинхронной загрузки ресурсов с помощью JavaScript, например модуля Advanced CSS/JS Aggregation .

Джумла

Существует ряд плагинов Joomla, которые могут помочь вам встроить важные ресурсы или отложить менее важные ресурсы .

WordPress

Существует ряд плагинов WordPress, которые могут помочь вам встроить критически важные ресурсы или отложить менее важные ресурсы .

Ресурсы