Поле navigationType и типы навигации

Браузер предоставляет возможность отслеживать тип навигации, которая привела пользователя на текущую страницу, через объект Navigation Timing API, который является частью более широкой спецификации Performance API. Одним из ключевых элементов этой информации является поле navigationType. Это поле определяет, каким образом была инициирована загрузка страницы, и играет важную роль при анализе производительности и пользовательского опыта.

Свойство navigationType

Поле navigationType доступно через объект:

performance.getEntriesByType('navigation')[0].type

или через более старый способ:

performance.navigation.type

Хотя второй вариант считается устаревшим и не рекомендуется для новых проектов, он все еще используется в некоторых браузерах для обратной совместимости.

navigationType возвращает строку (или числовое значение в старой версии API), которая отражает способ загрузки страницы. На основе этого можно оптимизировать логику измерения Web Vitals и учитывать особенности разных сценариев навигации.

Основные типы навигации

Существует несколько ключевых значений navigationType:

  1. navigate Отображает стандартную навигацию, когда пользователь переходит на страницу:

    • по прямой ссылке,
    • вводит URL в адресной строке,
    • переходит по закладке. В таких случаях происходит полная загрузка документа, и все метрики Web Vitals отслеживаются с момента начала загрузки страницы.

  2. reload Используется при перезагрузке страницы пользователем (например, через кнопку «Обновить» или сочетание клавиш F5). В этом случае браузер может кэшировать некоторые ресурсы, что влияет на LCP (Largest Contentful Paint) и CLS (Cumulative Layout Shift), а также на метрики времени ответа сервера (TTFB).

  3. back_forward Указывает, что пользователь вернулся на страницу через историю браузера (кнопки «Назад» или «Вперед»). Для таких переходов браузеры часто используют bfcache (back-forward cache), что означает мгновенную загрузку страницы без повторного запроса ресурсов. При этом метрики загрузки могут сильно отличаться от стандартного navigate.

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

Практическое использование в Web Vitals

Поле navigationType позволяет различать сценарии, влияющие на производительность и корректность метрик Web Vitals:

  • LCP: важно учитывать тип навигации, так как при back_forward или prerender LCP может быть зарегистрирован почти мгновенно, что не отражает реального опыта новой загрузки.
  • CLS: при reload и navigate смещения контента более вероятны из-за загрузки ресурсов с нуля, тогда как back_forward часто показывает низкий CLS.
  • FID и INP: тип навигации влияет на момент доступности страницы для взаимодействия, так как при navigate браузер инициирует полную загрузку, а при back_forward — восстанавливает состояние.

Пример корректного получения типа навигации и логики обработки:

const [navigationEntry] = performance.getEntriesByType('navigation');

switch (navigationEntry.type) {
  case 'navigate':
    console.log('Полная загрузка страницы');
    break;
  case 'reload':
    console.log('Перезагрузка страницы');
    break;
  case 'back_forward':
    console.log('Возврат через историю браузера');
    break;
  case 'prerender':
    console.log('Страница предварительно загружена');
    break;
}

Совместимость и особенности

  • Современные браузеры: performance.getEntriesByType('navigation')[0].type возвращает строковые значения: 'navigate', 'reload', 'back_forward', 'prerender'.

  • Старый API: performance.navigation.type возвращает числовые коды:

    • 0 — navigate
    • 1 — reload
    • 2 — back_forward
    • 255 — undefined/другие случаи

Для корректной работы с Web Vitals рекомендуется ориентироваться на новый API, поскольку числовые коды могут быть менее очевидными и постепенно выводятся из стандарта.

Влияние на сбор аналитики

При построении аналитических систем, отслеживающих Web Vitals, необходимо учитывать:

  • Метрики при back_forward могут быть искажены, если не учитывать использование bfcache.
  • Перезагрузки (reload) и повторные переходы могут показывать лучшие показатели за счет кэширования, что требует нормализации данных.
  • Разделение метрик по типам навигации позволяет получить более точное представление о реальном опыте пользователей и выявить узкие места в производительности страницы.
Оглавление