TGViewer
Веб-страница Веб-страница @tproger_web · 22.4K subscribers
Post #6388 3.19K
Как измерить Core Web Vitals в SPA, где переходы не перезагружают страницу

Классическая беда одностраничников: роутер меняет содержимое, а для браузера это всё та же первая загрузка. LCP, CLS и INP посчитаны один раз при входе, дальнейшие переходы не мерит никто. Отсюда и метрики, в которые никто в команде не верит.

С Chrome 151 Soft Navigations работает без флага. Проверка поддержки и подписка выглядят так:

```if (PerformanceObserver.supportedEntryTypes.includes('soft-navigation')) {
new PerformanceObserver(console.log)
.observe({ type: 'soft-navigation', buffered: true });
}
```

Дальше логика простая. В каждой записи есть name — URL, к которому относится новый экран, и navigationId — уникальный идентификатор перехода, потому что один и тот же URL за жизнь приложения можно открыть десять раз. Получили запись — финализируйте метрики предыдущего экрана, отправьте их под старым URL и начинайте копить заново.

LCP для мягкой навигации приходит через interaction-contentful-paint, а у самой записи soft-navigation есть getLargestInteractionContentfulPaint() — он вернёт крупнейший такой пейнт, чтобы не буферизовать записи вручную.

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

https://developer.chrome.com/docs/web-platform/soft-navigations

#перформанс #spa
Chrome for Developers Measuring soft navigations | Web Platform | Chrome for Developers The Chrome team is working on better measuring so-called soft navigations used by Single Page Applications and a new API is now available behind a flag to allow sites to try the API.
  • ❤ 2
  • 👍 1
More from @tproger_web
  1. Sep 21, 2026Как перенести поиск по 272 тысячам слов в браузер на Rust и WebAssembly Поисковик работает…
  2. Sep 20, 2026Как проверять CSS после рефакторинга с ИИ Пять ИИ-инструментов получили HTML и CSS карточк…
  3. Sep 20, 2026Как защитить списание кредитов в Django от гонки запросов У аккаунта один кредит. Два запр…
  4. Sep 20, 2026Как анимировать перестройку CSS Grid без JavaScript В разборе приёма содержимое каждой пли…
  5. Sep 19, 2026Как защитить API от повторной оплаты Клиент не получил ответ и повторил POST. Сервер мог у…
  6. Sep 19, 2026Как заблокировать отрисовку JavaScript, не останавливая HTML-парсер Когда компоненту нужно…
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →