Запуск финального пробного периода Soft Navigations в Chrome 147.

Barry Pollard

Michal Mocny

Опубликовано: 20 апреля 2026 г.

Chrome планирует выпустить API Soft Navigations, с которым мы ранее экспериментировали, позднее в этом году. В рамках подготовки к этому мы предлагаем еще одно пробное тестирование, начиная с Chrome 147 и до Chrome 149. Это тестирование учитывает отзывы, полученные в ходе предыдущих испытаний, при разработке ожидаемой окончательной версии API. Мы призываем владельцев веб-сайтов, заинтересованных в этой функции, провести окончательное тестирование ожидаемой окончательной версии API перед его выпуском.

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

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

Необходимость в API для мягкой навигации

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

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

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

Одна из главных целей создания API Soft Navigation — измерение основных показателей веб-оптимизации для одностраничных приложений (SPA). Эти показатели измеряются как самим браузером (для отображения в таких инструментах, как отчет Chrome о пользовательском опыте ), так и владельцами сайтов с помощью решений для мониторинга реальных пользователей (RUM).

Фреймворки JavaScript могут измерять некоторые аспекты основных параметров веб-приложений (Core Web Vitals) для одностраничных приложений (SPA). В частности, показатели Interaction to Next Paint (INP) и Cumulative Layout Shift (CLS) основаны на примитивах ( API Event Timing и API Layout Instability, соответственно), которые можно измерять в любом временном интервале для расчета этих метрик. Однако другие метрики, такие как Largest Contentful Paint (LCP), генерируются только браузером — на основе навигации по страницам и завершаются при взаимодействии .

Как API позволяет измерять основные параметры веб-показателей для одностраничных приложений (SPA).

API мягкой навигации представляет два новых параметра повышения производительности:

• Запись SoftNavigationEntry , которая генерируется при выполнении всех требований мягкой навигации. Она включает в себя interactionId для взаимодействия, вызвавшего мягкую навигацию, уникальный navigationId , name , заданное новым URL-адресом, и различные значения времени отрисовки, которые можно использовать для измерения времени первой отрисовки контента в рамках мягкой навигации.
• Параметр InteractionContentfulPaint позволяет измерять количество отображаемых объектов ContentfulPaint различного размера после взаимодействия для определения LCP (Limited Contentful Paint) при мягкой навигации.

Отслеживать появление этих новых записей можно с помощью PerformanceObserver , используя типы soft-navigation и interaction-contentful-paint соответственно.

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

Некоторые события, interaction-contentful-paint могут происходить до навигации, а некоторые — после. Вместо отслеживания всех событий, которые могут привести к плавной навигации, событие soft-navigation включает в себя событие largestInteractionContentfulPaint , представляющее собой самое большое событие, произошедшее до этого момента.

В совокупности эти инструменты позволяют измерять показатели Core Web Vitals по следующим параметрам:

• LCP : Использование largest-contentful-paint для первоначальной загрузки страницы и новых элементов interaction-contentful-paint и soft-navigation для плавной навигации.
• CLS : Использование элементов layout-shift , и их сегментация на основе элементов soft-navigation для мягкой навигации.
• INP : Использование записей event и их сегментация на основе записей soft-navigation для осуществления мягкой навигации.
• FCP : Использование first-contentful-paint для первоначальной загрузки страницы и параметров времени отрисовки для новых элементов soft-navigation навигации.

Для получения более подробной информации см. документацию по Soft Navigations .

Как запускаются функции программной навигации?

API плавной навигации запускает плавную навигацию при следующих событиях:

• Происходит взаимодействие пользователя.
• … что приводит к наглядному отображению контента для пользователя.
• …и происходит обновление URL-адреса.

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

1. Во-первых, это включает все существующие SPA-сайты, для которых не требуется вносить какие-либо изменения.
2. Во-вторых, это позволяет обеспечить единообразное понимание того, что представляет собой мягкая навигация, независимо от того, как фреймворк или разработчик обрабатывает навигацию.

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

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

Разработчики и фреймворки также могут игнорировать API мягкой навигации и использовать базовые API синхронизации событий, нестабильности макета и новый параметр производительности InteractionContentfulPaint для измерения дополнительных метрик производительности по своему усмотрению. Однако мы рекомендуем использовать API для измерения основных показателей веб-технологий (Core Web Vitals), чтобы обеспечить согласованные измерения на разных сайтах и ​​с использованием разных инструментов.

Требуется помощь в тестировании API программной навигации.

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

Что изменилось со времени последнего испытания происхождения?

Основное изменение в этой последней версии заключается в отделении InteractionContentfulPaint от мягкой навигации, что позволяет использовать этот элемент управления производительностью в других сценариях, а также в добавлении атрибута largestInteractionContentfulPaint к SoftNavigationEntry .

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

Мы также внесли множество других улучшений в реализацию. Для тех, кто хочет точно узнать, что изменилось в последней версии, подробную историю всех изменений можно найти в журнале изменений Soft Navigations Changelog .

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

Как проводить тестирование

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

Для получения более подробной технической информации об API, особенно о том, как измерять основные показатели веб-доступа (Core Web Vitals ), обратитесь к нашей документации или репозиторию GitHub.

Кроме того, экспериментальная версия библиотеки web-vitals с мягкой навигацией доступна на GitHub и npm.

Для более простого теста панель «Производительность» в инструментах разработчика Chrome отображает плавную навигацию в трассировках производительности, начиная с версии Chrome 145, даже без включения этой функции:

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

Отзывы об API следует оставлять в виде сообщений об ошибках на GitHub , а сообщения об ошибках в реализации Chromium — в системе отслеживания ошибок Chrome . Если вы не уверены, к какой категории относится обратная связь, не беспокойтесь. Мы предпочитаем получать отзывы в любом из этих мест, и мы будем сортировать сообщения в обоих местах и ​​перенаправлять их в нужное место.