Отладка правил спекуляций с помощью Chrome DevTools

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

Отладка правил спекуляций может оказаться сложной задачей. Это особенно актуально для предварительно обработанных страниц, поскольку эти страницы визуализируются в отдельном средстве визуализации — что-то вроде скрытой фоновой вкладки, которая заменяет текущую вкладку при активации. Поэтому обычные параметры DevTools не всегда можно использовать для устранения проблем.

Команда Chrome усердно работала над улучшением поддержки DevTools для отладки правил спекуляций. В этом посте вы увидите все различные способы использования этих инструментов, чтобы понять правила спекуляции на странице, почему они могут не работать и когда разработчики могут использовать более знакомые параметры DevTools, а когда нет.

Объяснение «предварительных» терминов

Существует множество «предварительных» терминов, которые сбивают с толку, поэтому мы начнем с их объяснения:

  • Предварительная выборка : предварительная выборка ресурса или документа для повышения производительности в будущем. В этом посте рассматривается предварительная выборка документов с использованием API Speculation Rules, а не аналогичной, но более старой опции <link rel="prefetch"> часто используемой для предварительной выборки подресурсов.
  • Предварительный рендеринг : это выходит за рамки предварительной выборки и фактически отображает всю страницу так, как если бы пользователь перешел на нее, но сохраняет ее в скрытом фоновом процессе рендеринга, готовом к использованию, если пользователь действительно перейдет туда. Опять же, этот документ посвящен более новой версии API Speculation Rules, а не более старой опции <link rel="prerender"> (которая больше не выполняет полную предварительную отрисовку ).
  • Навигационные спекуляции : собирательный термин для новых опций предварительной выборки и предварительной отрисовки, запускаемых правилами спекуляций.
  • Предварительная загрузка : перегруженный термин, который может относиться к ряду технологий и процессов, включая <link rel="preload"> , сканер предварительной загрузки и предварительные загрузки навигации сервис-воркера . Эти вопросы здесь не рассматриваются, но этот термин включен, чтобы четко отличать их от термина «навигационные спекуляции».

Правила спекуляции для prefetch

Правила спекуляции можно использовать для предварительной выборки следующего навигационного документа. Например, при вставке следующего JSON на страницу next.html и next2.html будут предварительно загружены:

<script type="speculationrules">
  {
    "prefetch": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

Использование правил спекуляции для предварительной выборки навигации имеет некоторые преимущества по сравнению со старым синтаксисом <link rel="prefetch"> , например, более выразительный API и сохранение результатов в кеше памяти, а не в дисковом кеше HTTP.

Правила спекуляций prefetch отладки

Предварительные выборки, вызванные правилами спекуляции, можно увидеть на панели «Сеть» так же, как и другие выборки:

Панель «Сеть» в Chrome DevTools, показывающая предварительно загруженные документы
Панель «Сеть» в Chrome DevTools, показывающая предварительно загруженные документы

Два запроса, выделенные красным, представляют собой предварительно загруженные ресурсы, как видно из столбца «Тип» . Они извлекаются с Lowest приоритетом, поскольку они предназначены для будущих навигаций, а Chrome отдает приоритет ресурсам текущей страницы.

При нажатии на одну из строк также отображается HTTP-заголовок Sec-Purpose: prefetch , который позволяет идентифицировать эти запросы на стороне сервера:

Заголовки предварительной выборки Chrome DevTools с параметром Sec-Purpose, настроенным на предварительную выборку
Заголовки предварительной выборки Chrome DevTools с параметром Sec-Purpose, настроенным на предварительную выборку

prefetch отладки с помощью вкладок «Спекулятивная загрузка»

На панель приложений Chrome DevTools в разделе «Фоновые службы» добавлен новый раздел «Спекулятивные загрузки» , который помогает отлаживать правила спекуляций:

Chrome DevTools Вкладки спекулятивной загрузки, показывающие правило предварительной выборки
Chrome DevTools Вкладки спекулятивной загрузки, показывающие правило предварительной выборки

В этом разделе доступны три вкладки:

  • Спекулятивные загрузки , в которых указан предварительно обработанный статус текущей страницы.
  • Правила , в которых перечислены все наборы правил, найденные на текущей странице.
  • Спекуляции , в которых перечислены все предварительно выбранные и предварительно обработанные URL-адреса из наборов правил.

Вкладка «Спекуляции» показана на предыдущем снимке экрана, и мы видим, что на этой странице-примере есть один набор правил спекуляций для предварительной загрузки трех страниц. Две из этих предварительных выборок прошли успешно, а одна — неудачно. Можно щелкнуть значок рядом с набором правил , чтобы перейти к источнику набора правил на панели «Элементы» . Альтернативно можно щелкнуть ссылку «Статус» , чтобы перейти на вкладку «Предположения» , отфильтрованную по этому набору правил.

На вкладке «Спекуляции» перечислены все целевые URL-адреса, а также действие (предварительная выборка или предварительная обработка), набор правил, из которого они были получены (поскольку на странице их может быть несколько), а также статус каждого предположения:

Вкладка Chrome DevTools Speculations, показывающая предварительно загруженные URL-адреса и их статус.
Вкладка Chrome DevTools Speculations, показывающая предварительно загруженные URL-адреса и их статус.

Над URL-адресами можно использовать раскрывающийся список, чтобы отображать URL-адреса из всех наборов правил или только URL-адреса из определенного набора правил. Ниже перечислены все URL-адреса. Нажав на URL-адрес, вы получите более подробную информацию.

На этом снимке экрана мы видим причину сбоя для страницы next3.html (которая не существует и поэтому возвращает 404, что не является кодом состояния HTTP, отличным от 2xx).

На сводной вкладке Спекулятивные загрузки отображается состояние спекулятивной загрузки для этого отчета о странице, чтобы показать, использовалась ли для этой страницы предварительная выборка или предварительная обработка или нет.

Для предварительно загруженной страницы вы должны увидеть сообщение об успешном выполнении при переходе на эту страницу:

Вкладка Chrome DevTools «Спекулятивные загрузки», показывающая успешную предварительную выборку
Вкладка Chrome DevTools «Спекулятивные загрузки», показывающая успешную предварительную выборку

Непревзойденные спекуляции

Когда навигация происходит со страницы с правилами спекуляции, которая не приводит к использованию предварительной выборки или предварительной обработки, в дополнительном разделе вкладки будет показано более подробное описание того, почему URL-адрес не соответствует ни одному из спекулятивных URL-адресов. Это полезно для обнаружения опечаток в ваших правилах спекуляций.

Вкладка «Спекулятивные загрузки Chrome DevTools», показывающая, что текущий URL-адрес не соответствует ни одному из URL-адресов в правилах спекуляции на предыдущей странице.
Несовпадающие URL-адреса выделяются в DevTools.

Например, здесь мы перешли к next4.html , но только next.html , next2.html или next3.html являются предварительной выборкой, поэтому мы видим, что это не совсем соответствует ни одному из этих трех правил.

Вкладки «Спекулятивные нагрузки» очень полезны для отладки самих правил спекуляций и поиска синтаксических ошибок в JSON.

Что касается самих предварительных выборок, то панель «Сеть» , вероятно, является более привычным местом. В примере с ошибкой предварительной выборки вы можете увидеть код 404 для предварительной выборки здесь:

Панель Chrome DevTools Network, показывающая неудачную предварительную выборку
Панель Chrome DevTools Network, показывающая неудачную предварительную выборку

Однако вкладки Спекулятивные нагрузки становятся гораздо более полезными для правил предварительной отрисовки, которые рассматриваются далее.

Правила спекуляции для prerender

Правила спекуляции предварительной визуализации следуют тому же синтаксису, что и правила спекуляции предварительной выборки. Например:

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

Этот набор правил запускает полную загрузку и отображение указанных страниц (с учетом определенных ограничений). Это может обеспечить мгновенную загрузку, хотя и потребует дополнительных затрат ресурсов.

Однако, в отличие от предварительной выборки, они недоступны для просмотра на панели «Сеть» , поскольку они извлекаются и обрабатываются в отдельном процессе рендеринга в Chrome. Это делает вкладки Спекулятивные загрузки более важными для отладки правил спекуляций перед отрисовкой.

Отладка prerender с помощью вкладок «Спекулятивные нагрузки»

Те же экраны спекулятивной загрузки можно использовать для правил спекуляции перед предварительной отрисовкой, как показано на аналогичной демонстрационной странице, которая пытается выполнить предварительную отрисовку вместо предварительной загрузки трех страниц:

Chrome DevTools Speculative загружает вкладки для страницы с правилами предварительной спекуляции
Chrome DevTools Speculative загружает вкладки для страницы с правилами предварительной спекуляции

Здесь мы снова видим, что один из трех URL-адресов не удалось выполнить предварительную отрисовку, и разработчики могут получить подробную информацию по каждому URL-адресу на вкладке «Предположения» , щелкнув ссылку «2 готово, 1 сбой» .

В Chrome 121 мы запустили поддержку правил документов . Это позволяет браузеру выбирать их по ссылкам одного и того же источника на странице, а не перечислять определенный набор URL-адресов:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": { "href_matches": "/not-safe-to-prerender/*"}}
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

В этом примере в качестве кандидатов на предварительную отрисовку выбираются все одинаковые ссылки на источник, за исключением тех, которые начинаются с /not-safe-to-prerender .

Он также устанавливает moderate eagerness к предварительной визуализации, что означает, что навигация предварительно обрабатывается при наведении указателя мыши или нажатии ссылки.

Подобные правила есть на демонстрационном сайте спекулятивных правил , и использование нового раздела «Спекулятивные нагрузки» на этом сайте показывает полезность этой новой вкладки, поскольку перечислены все подходящие URL-адреса, которые браузер нашел на странице:

Вкладка Chrome DevTools Speculations с несколькими неактивными URL-адресами
Вкладка Chrome DevTools Speculations с несколькими неактивными URL-адресами

Статус « Не активирован» , поскольку процесс предварительной визуализации для них не запущен. Однако, удерживая указатель мыши на ссылках, мы видим изменение статуса по мере предварительной обработки каждого URL-адреса:

Вкладка Chrome DevTools Speculations с активацией предварительно обработанных страниц
Вкладка Chrome DevTools Speculations с активацией предварительно обработанных страниц

В Chrome установлены ограничения на предварительные рендеринги , включая максимум 2 пререндеринга при moderate усердии, поэтому после наведения курсора на третью ссылку мы видим причину сбоя для этого URL:

Вкладка Chrome DevTools Speculations с отображением неудачных предварительных загрузок
Вкладка Chrome DevTools Speculations с отображением неудачных предварительных загрузок

Отладка prerender с помощью других панелей DevTools.

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

Однако теперь можно переключить средство рендеринга, используемое панелями DevTools, с помощью раскрывающегося меню в правом верхнем углу или выбрав URL-адрес в верхней части панели и выбрав «Проверить» :

Chrome DevTools теперь позволяет переключать средства визуализации, для которых отображается информация.
Chrome DevTools теперь позволяет переключать средства визуализации, для которых отображается информация.

Этот раскрывающийся список (и выбранное значение) также используется во всех других панелях, таких как панель «Сеть» , где вы можете видеть, что запрашиваемая страница является предварительно обработанной:

Панель Chrome DevTools Network, показывающая сетевые запросы для предварительно обработанной страницы.
Панель Chrome DevTools Network, показывающая сетевые запросы для предварительно обработанной страницы.

Глядя на HTTP-заголовки этих ресурсов, мы видим, что все они будут установлены с помощью заголовка Sec-Purpose: prefetch;prerender :

Панель Chrome DevTools Network, показывающая заголовок Sec-Purpose для предварительно обработанной страницы
Панель Chrome DevTools Network, показывающая заголовок Sec-Purpose для предварительно обработанной страницы

Или панель «Элементы» , где вы можете увидеть содержимое страницы, как на следующем снимке экрана, где мы видим, что элемент <h1> предназначен для предварительно обработанной страницы:

Панель Chrome DevTools Elements для предварительно обработанной страницы
Панель Chrome DevTools Elements для предварительно обработанной страницы

Или панель «Консоль» , где вы можете увидеть журналы консоли, созданные предварительно обработанной страницей:

Панель консоли Chrome DevTools, показывающая вывод консоли с предварительно обработанной страницы.
Панель консоли Chrome DevTools, показывающая вывод консоли с предварительно обработанной страницы.

Отладка правил спекуляций на предварительно обработанной странице

В предыдущих разделах обсуждается, как отлаживать предварительно обработанные страницы на странице, которая инициирует предварительную обработку. Однако сами предварительно обработанные страницы также могут предоставлять отладочную информацию либо путем выполнения аналитических вызовов, либо путем входа в консоль (которая доступна для просмотра, как описано в предыдущем разделе).

Кроме того, как только предварительно обработанная страница активирована пользователем, перешедшим на нее, на вкладке Спекулятивные загрузки будет показан этот статус, а также информация о том, была ли она успешно обработана или нет. Если это не может быть предварительно обработано, предоставляется объяснение того, почему это произошло:

Вкладка «Спекулятивные загрузки Chrome DevTools», показывающая как успешную, так и неудачную предварительно обработанную страницу.
Вкладка «Спекулятивные загрузки Chrome DevTools», показывающая как успешную, так и неудачную предварительно обработанную страницу.

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

Вкладка «Спекулятивные загрузки Chrome DevTools», показывающая несовпадение URL-адресов текущего URL-адреса и URL-адресов, описанных на предыдущей странице.
Chrome DevTools показывает несоответствия URL-адресов

Заключение

В этом посте мы показали различные способы, с помощью которых разработчики могут отлаживать правила предварительной выборки и спекуляции перед отрисовкой. Команда продолжает работать над инструментами для правил спекуляций, и нам хотелось бы услышать предложения разработчиков о том, какие еще способы могут быть полезны для отладки этого замечательного нового API. Мы рекомендуем разработчикам сообщать о любых запросах функций или обнаруженных ошибках в системе отслеживания проблем Chrome .

Благодарности

Миниатюрное изображение, созданное Нубельсоном Фернандесом на Unsplash .