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