Новая пробная версия Soft Navigations

Барри Поллард
Михал Мокни

Опубликовано: 31 июля 2025 г.

Chrome запускает новую пробную версию Origin для API Soft Navigations, начиная с версии Chrome 139, с которой мы ранее экспериментировали . Эта пробная версия Origin позволяет сайтам протестировать API на своих сайтах с участием реальных пользователей, чтобы протестировать его в реальных условиях и предоставить отзыв команде Chrome.

Что такое мягкие навигации?

Мягкая навигация — это когда JavaScript перехватывает навигацию (например, нажатие на ссылку) и обновляет содержимое существующей страницы, а не загружает новую страницу, после чего URL-адрес обновляется в адресной строке (с сохранением истории переходов, позволяющей использовать мягкую навигацию вперёд и назад). Для пользователя это выглядит так же, как и обычная навигация, но с точки зрения браузера страница остаётся исходной.

Зачем нужен API Soft Navigation

API для мягкой навигации (Soft Navigations API) — это предлагаемый API, позволяющий эвристически обнаруживать так называемые «мягкие навигации», используемые сайтами одностраничных приложений (SPA). Поскольку при мягкой навигации реальная навигация по страницам не происходит, это означает, что некоторые действия, которые обычно выполняются при навигации, необходимо вручную выполнять с помощью JavaScript. Некоторые действия, например, управление историей навигации, доступны в текущих API. Однако другие действия, такие как измерение основных веб-показателей (Core Web Vitals ), для этих навигаций недоступны.

API мягкой навигации позволяет отслеживать мягкие навигации. Хотя JavaScript-код, инициирующий мягкую навигацию (обычно JavaScript-фреймворк), распознаёт момент перехода, другие JavaScript-коды и сам браузер не будут знать об этом.

Основные веб-показатели и SPA

Одним из основных факторов, определяющих использование API Soft Navigation, является возможность измерения основных веб-показателей для одностраничных приложений (SPA). Основные веб-показатели измеряются как браузером (для отображения в таких инструментах, как отчёт об удобстве использования Chrome ), так и библиотеками JavaScript Real User Monitoring (RUM).

Фреймворки JavaScript могут измерять некоторые аспекты основных веб-показателей. В частности, взаимодействие до следующей отрисовки (INP) и кумулятивный сдвиг макета (CLS) основаны на примитивах ( API Event Timing API и API Layout Instability API соответственно), которые можно измерять в любом временном интервале для расчета метрик INP и CLS. Однако другие метрики, такие как отрисовка самого большого количества контента (LCP), генерируются только браузером на основе навигации по страницам и завершаются после взаимодействия .

Как API Soft Navigation позволяет измерять основные веб-показатели для SPA

Первая итерация API мягкой навигации объединила эвристику мягкой навигации со сбросом LCP. После сброса LCP может быть повторно сгенерирован для мягкой навигации при отрисовке нового контента, что позволяет измерять эту метрику для мягкой навигации.

В этой последней итерации используется другой подход, и эти концепции разделяются на API мягкой навигации и новый параметр производительности Interaction to Contentful Paint. Параметр interaction-contentful-paint измеряет «отрисовку контента» после взаимодействий. Пока что он используется только для мягкой навигации, но при включении LCP для всех взаимодействий открываются другие потенциальные варианты использования.

API также расширил каждую из записей производительности largest-contentful-paint , interaction-contentful-paint , event-timing и layout-shift включив идентификатор навигации, к которой относится запись. Записи производительности генерируются после события, которое они измеряют, — обычно во время простоя. Это означает, что URL-адрес часто будет меняться к моменту генерации записи производительности. Включение навигации в запись значительно упрощает измерение основных веб-показателей для заданного URL-адреса без необходимости сопоставления времени входа производительности с временем входа мягкой навигации.

Почему эвристика?

API мягкой навигации считает мягкую навигацию возможной в следующих случаях:

  • Происходит взаимодействие с пользователем (обновления URL без взаимодействия с пользователем не учитываются)
  • … что приводит к модификации DOM и покраске
  • … и происходит обновление URL-адреса
  • Обновление URL-адреса, включая изменение истории.

API использует этот эвристический подход, а не позволяет фреймворку JavaScript «генерировать» мягкую навигацию или строиться на основе API навигации, поскольку это обеспечивает единообразное понимание того, что представляет собой мягкая навигация, независимо от фреймворка или того, как его использует разработчик.

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

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

Фреймворки и разработчики также могут игнорировать эвристику API Soft Navigations и использовать базовые API Event Timing, Layout Instability и Interaction to Contentful Paint для измерения дополнительных показателей производительности по своему усмотрению, но мы рекомендуем Core Web Vitals использовать эвристику, чтобы обеспечить возможность измерений на всех сайтах.

Нужна помощь в тестировании API Soft Navigation

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

Примеры проблем, которые мы наблюдали, включают обновление URL-адреса с помощью replaceState вместо добавления истории или навигацию, инициированную не пользователем (например, выход из системы по истечении времени ожидания). Оба случая объясняются несоответствием эвристикам, и команда Chrome не возражает против их включения, но мы хотели бы услышать мнение веб-разработчиков, согласны ли они с этим. Мы особенно заинтересованы в случаях, когда эвристика, по всей видимости, выполняется, но API всё равно не распознаёт мягкую навигацию.

Кроме того, мы хотим понять, решает ли этот API и новый примитив Interaction to Contentful Paint основной вариант использования, позволяющий измерять основные веб-показатели для SPA.

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

Как проверить

API можно протестировать локально с помощью флагов Chrome или параметров командной строки . Кроме того, его можно протестировать в полевых условиях с помощью пробной версии Origin .

Более подробную техническую информацию об API, в частности, о том, как измерять Core Web Vitals , можно найти в нашей документации или репозитории GitHub . Кроме того, доступна экспериментальная версия библиотеки web-vitals с программной навигацией .

Обратная связь

Мы активно ищем отзывы об этом эксперименте в следующих местах:

Если у вас возникли сомнения, не беспокойтесь слишком сильно: мы предпочтем выслушать ваши отзывы в любом из этих мест и с радостью решим проблемы в обоих местах, а затем перенаправим их в нужное место.