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